Description
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:
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"
},