Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Possible regression in 0.4.4 #337

Closed
dustinsoftware opened this issue Jan 14, 2019 · 4 comments
Closed

Possible regression in 0.4.4 #337

dustinsoftware opened this issue Jan 14, 2019 · 4 comments

Comments

@dustinsoftware
Copy link

I can't repro this issue outside of my work's source code (which I can't share), so I understand having this fixed is a bit of a longshot. That said, I'll share as much as I can about the problem we're running into:

In #284 , this.id was set to empty string in the constructor. Somehow, in one of our projects, this causes React to be imported as undefined in a lazy loaded component.

After using yarn link locally with mini-css-extract-plugin, I can confirm that the issue did not happen before that change for us. Commenting out the initial assignment to this.id and rebuilding fixes the runtime issue.

Our project looks something like this:

  • Main component
    • Lazy loaded component, whose source is minified and published to an internal npm registry
    • Lazy loaded component's exported stylesheet
export class LazyLoaded extends React.Component {
	constructor() {
		super();
		this.state = { loaded: false };
	}
	componentDidMount() {
		import('lazy-loaded-example').then(component => { this.setState({ loadedComponent: component.default })})
	}
	render() {
		return this.state.loadedComponent
			? React.createElement(this.state.loadedComponent, {})
			: React.createElement('h1', {}, 'Loading');
	}
}

After change:
image

image

I can repro this pretty reliably locally, but I'm not sure what information I could share that would be helpful.

  "devDependencies": {
    "css-loader": "^1.0.0",
    "mini-css-extract-plugin": "^0.4.5",
    "postcss-loader": "^3.0.0",
    "url-loader": "^1.1.2",
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8"
  },
  "scripts": {
    "build": "webpack"
  },
@dustinsoftware
Copy link
Author

Ok, it looks like this issue is related NamedModulesPlugin using a strict equality check, comparing id to null somewhere around here.

webpack/webpack#7088
https://github.com/webpack/webpack/pull/7152/files

Should this.id be initialized to null in MiniCssExtractPlugin, if at all? It's still unclear why that change was introduced.

cc @lfre @sokra do you have any ideas off the top of your head where to investigate next? For now we'll work around the problem by pinning to an older version of this plugin.

@alexander-akait
Copy link
Member

alexander-akait commented Jan 22, 2019

@dustinsoftware problem solved in webpack@5, don't think it is possible to fix on plugin side

@alexander-akait
Copy link
Member

/cc @dustinsoftware sorry for big delay, problem still exists? Can you create minimum reproducible test repo?

@dustinsoftware
Copy link
Author

Sorry, I’ve since moved on to another co and don’t have a reliable repro for this anymore. I think we worked around the problem by pinning to an older package version.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants