We've implemented babel and lerna to maintain specific elements of our react web app separately. While the setup has been effective thus far, we're encountering styling issues when generating the static build.
The main project is not processed through babel and has no connection to it.
The components that are separated have these babel dependencies:
"devDependencies": {
"@babel/cli": "^7.2.0",
"@babel/core": "^7.2.0",
"@babel/plugin-proposal-class-properties": "^7.2.1",
"@babel/plugin-transform-runtime": "^7.2.0",
"@babel/preset-env": "^7.2.0",
"@babel/preset-react": "^7.0.0"
},
"dependencies": {
"@babel/runtime": "^7.2.0",
...
}
Here's our configuration file:
module.exports = {
plugins: [
['@babel/plugin-proposal-class-properties', { loose: true }],
'@babel/plugin-transform-runtime'
],
presets: [
'@babel/preset-env',
'@babel/preset-react'
]
};
To create our 'babelised' package, we use the command
./node_modules/.bin/babel ./src/ -d ./dist/ --copy-fileslerna.
For most of our components, we utilize material-ui and apply inline CSS using the syntax withStyles(style)(Component).
While everything functions as expected with npm start in the core project, the styling breaks in the 'babelised' component after building with npm run-script build.
Has anyone else faced this issue or have insight into why it's happening?
UPDATE:
As requested, here's a snippet of the styles used in the react app:
[styles code goes here]We implement the Material-UI withStyles higher order component like this:
export default withStyles(styles)(MyClass);After running it through babel, we get something similar to:
[babel output code goes here]And:
var _default = (0, _withStyles.default)(styles)(MyClass);The import for _withStyles looks like this:
var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));There are no error messages but the layout becomes completely unusable due to the loss of styling.