Search code examples
node.jsreactjsmaterial-uicreate-react-app

Material-ui layout scrambled after production build

I have build a website based on node.js, material-ui and create-react-app.

When I do a development build using yarn start I get this result on localhost:

Localhost display

Then, after doing a production build using yarn build, I get this:

enter image description here

All the functionality works except for the layout.

Any ideas what might be the cause?

Solution

  • It looks like material-ui is included two extra times by rollup, which breaks the app. If you take a closer look at what is built in med-react-component and bo-module-taxonomie you will notice that rollup includes material-ui in both builds. Since you are using rollup-plugin-peer-deps-external, you should make material-ui peer dependency in both med-react-component and bo-module-taxonomie:

    "peerDependencies": {
    "@material-ui/core": "^1.0.0",
    "@material-ui/icons": "^1.0.0",
    ...