Search code examples
reactjsreduxmaterial-uibabeljscreate-react-app

material-ui and react does not reproduce same behavior after `npm run build`?

I am working on creating a content-library, where I am using react-app using create-react-app. The package.json looks like 

{
  "name": "demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^1.4.1",
    "@material-ui/icons": "^2.0.1",
    "firebase": "^5.3.0",
    "md5": "^2.2.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-flexbox-grid": "^2.1.2",
    "react-katex": "^2.0.2",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0",
    "uuid": "^3.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

When running yarn install && yarn start the application comes out fine, see the snapshot below
While when I ran yarn build && serve -s build or npm run build && serve -s build , the application does not look the same and UX is messed up, see below
The yarn.lock file is linked https://pastebin.com/dDHnvRWA

Expected Behavior

The page on yarn start and one after running npm run build && serve -s build should exactly be the same

Current Behavior

The page that comes up after npm run build && serve -s build are different (see snapshots attached)

Your Environment

| Tech         | Version |
|--------------|---------|
| Material-UI/core  | ^1.4.1 |
| Material-UI/icons | ^2.0.1|  
| React        |    ^16.4.1     |
| Browser      |   Google Chrome Version 68.0.3440.106 (Official Build) (64-bit)      |
| TypeScript   |      None   |
| etc.         |         |

enter image description here
enter image description here

Solution

  • The issue was created because the Material React Components were imported from incorrect path

    Incorrect Path (causing the issue) 

    import {AppBar, Toolbar, Typography} from
    "@material-ui/core/umd/material-ui.production.min";

    Correct Path 

    import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";

    After importing from Correct Path, the application started to behave as expected