2

While testing material-ui v1.0.0-beta, I encountered with the following error when building using webpack 3.8.0. I came across with few other questions like this, too, but am hoping if someone could confirm this is a legitimate issue and is still seen by people? I even added "react-transition-group": "^2.2.1" to package.json and so far no luck. Thanks in advance for your help.

ERROR in ../node_modules/material-ui-next/ButtonBase/Ripple.js
Module not found: Error: Can't resolve 'react-transition-group/Transition' in './node_modules/material-ui-next/ButtonBase'

I have "react-router": "^3.2.0", in my package.json in case this may help folks understand what might be the root cause.

[UPDATE] While investigating, I removed node_modules and issued npm cache clean as well as ensure the global cache is cleared by issuing npm ls -gp --depth=0 | awk -F/ '/node_modules/ && !/\/npm$/ {print $NF}' | xargs npm -g rm. This didn't fix the issue.

Kevin Ghaboosi
  • 606
  • 10
  • 20

2 Answers2

3

Follow the steps explained in this ticket for solution: material-ui-next/9356

Summary of Solution The issue relates to how webpack searches for dependencies at build time and establishes the dependency graph of all peer dependencies for each and every module. When digging further, I noted that material-ui@0.19.4 has react-transition-group@1.2.1 as its peer dependency while material-ui-next@1.0.0 beta has react-transition-group@2.2.1 as its peer dependency. Furthermore, I suspect because I have both material-ui releases on my project, when importing a component from material-ui-next, the expected path for react-transition-group@2.2.1 from material-ui-next's perspective is project/node_modules but apparently due to having two versions of material-ui, the later installs react-transition-group@2.2.1 under material-ui-next.

In webpack path configurations, add the following:

module.exports = {
  app: path.resolve(CURRENT_WORKING_DIR, "app"),
  assets: path.resolve(CURRENT_WORKING_DIR, "public", "assets"),
  compiled: path.resolve(CURRENT_WORKING_DIR, "compiled"),
  public: "/assets/",
  modules: path.resolve(CURRENT_WORKING_DIR, "node_modules"),
  extraModules: path.resolve(CURRENT_WORKING_DIR, 
  "node_modules/material-ui-next/node_modules"),
};

And finally add the extra path to webpack's resolve attribute:

module.exports = {
  modules: [PATHS.app, PATHS.modules, PATHS.extraModules],
  extensions: [".js", ".jsx", ".css"],
};
Kevin Ghaboosi
  • 606
  • 10
  • 20
2

to fix above issue:

please install react-transition-group

npm i react-transition-group@next --save

Chandresh
  • 277
  • 2
  • 14