Material-ui: Build failed after upgrade from 4.3.3 to 4.4.2

[hongyuan1306]

After the following upgrade to my package.json file, my webpack build fails.

   "dependencies": {
-    "@material-ui/core": "^4.3.3",
-    "@material-ui/icons": "^4.2.1",
-    "@material-ui/lab": "^4.0.0-alpha.24",
-    "@material-ui/styles": "^4.3.3",
+    "@material-ui/core": "^4.4.2",
+    "@material-ui/icons": "^4.4.1",
+    "@material-ui/lab": "^4.0.0-alpha.26",
+    "@material-ui/styles": "^4.4.1",
     "ag-grid-community": "^21.0.1",
     "ag-grid-react": "^21.0.1",
     "blueimp-canvas-to-blob": "^3.16.0",
     "clsx": "^1.0.4",
     "core-js": "^3.1.4",

The build error is as follows:

ERROR in ./node_modules/react-transition-group/esm/CSSTransition.js
Module not found: Error: Can't resolve 'dom-helpers/addClass' in '/home/hong/workspace/ecop/client/worktop/node_modules/react-transition-group/esm'
 @ ./node_modules/react-transition-group/esm/CSSTransition.js 5:0-47 13:11-22
 @ ./node_modules/react-transition-group/esm/index.js
 @ ./node_modules/@material-ui/core/esm/Slide/Slide.js
 @ ./node_modules/@material-ui/core/esm/Slide/index.js
 @ ./node_modules/@material-ui/core/esm/Drawer/Drawer.js
 @ ./node_modules/@material-ui/core/esm/Drawer/index.js
 @ ./src/components/AppFrame.js
 @ ./src/components/AppMain.js
 @ ./src/main.js

ERROR in ./node_modules/react-transition-group/esm/CSSTransition.js
Module not found: Error: Can't resolve 'dom-helpers/removeClass' in '/home/hong/workspace/ecop/client/worktop/node_modules/react-transition-group/esm'
 @ ./node_modules/react-transition-group/esm/CSSTransition.js 6:0-53 19:11-25
 @ ./node_modules/react-transition-group/esm/index.js
 @ ./node_modules/@material-ui/core/esm/Slide/Slide.js
 @ ./node_modules/@material-ui/core/esm/Slide/index.js
 @ ./node_modules/@material-ui/core/esm/Drawer/Drawer.js
 @ ./node_modules/@material-ui/core/esm/Drawer/index.js
 @ ./src/components/AppFrame.js
 @ ./src/components/AppMain.js
 @ ./src/main.js

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.4.2 |
| React | 16.8.6 |
| TypeScript | No |

[oliviertassinari]

@hongyuan1306 This looks like an issue with react-transition-group or you build setup.

---

Question, we can see ag-grid-react in your list of dependencies, do you pay for a license? Would you be interested in a paid DataGrid component if Material-UI was authoring one (as part of a Material-UI Enterprise offering)?

[FlameDuck]

I experienced this error as well today, except I didn't upgrade anything. I spent the entire day debugging it. It has nothing to do with the upgrade, because we are still running on 4.1.1. What we did do is run yarn install, which generated a new yarn.lock file. Reverting to the old one from VCS fixed this. We have not changed our package.json, and have yet to identify the culprit.

I have working (older) lock files, and broken (generated from yarn install) lock files if anyone thinks they would be helpful in tracking down what went wrong.

[hongyuan1306]

@oliviertassinari

Question, we can see _ag-grid-react_ in your list of dependencies, do you pay for a license? Would you be interested in a paid DataGrid component if Material-UI was authoring one (as part of a Material-UI Enterprise offering)?

We are using the community version of _ag-grid_. The enterprise version is so feature rich and we are just using a small subset.

As for a DataGrid component, the requirements in different projects can be so versatile that it is hard to find a solution that will fulfill all the requirements. So we would rather be interested in a reasonably priced base solution that can be easily customized in stead of paying for a full-featured solution while just using a small subset of it.

[hongyuan1306]

After some research, the issue is indeed caused by a mis-configuration of my webpack builder.

My webpack resolve.modules looks like this:

  resolve: {
    modules: [
      path.resolve(__dirname, 'src'),
      path.resolve(__dirname, 'node_modules')
    ]
  }

It is limiting all module search to the base directory of my project. After @material-ui/core upgrade however, the react-transition-group is updated to 4.3.0, which depends on a new version of dom-helpers ^5.0.1. The new version is installed under the node_modules subdir of the react-transition-group library, not under the base node_modules directory of my project.

Adding a relative path 'node_modules' to resolve.modules config makes the correct version of dom-helpers module to be resolved. And my project now compiles with no error.

     modules: [
       path.resolve(__dirname, 'src'),
+      'node_modules',
       path.resolve(__dirname, 'node_modules')
     ]

[oliviertassinari]

@hongyuan1306 awesome, thanks.

[alogobay]

Thanks @hongyuan1306. You are right.