React-Transition-Group 的 Material-UI v1.0.0.-beta 问题答案

【问题标题】：Material-UI v1.0.0.-beta Issue with React-Transition-GroupReact-Transition-Group 的 Material-UI v1.0.0.-beta 问题
【发布时间】：2018-05-11 03:55:56
【问题描述】：

在测试material-ui v1.0.0-beta 时，我在使用webpack 3.8.0 构建时遇到了以下错误。我也遇到了一些其他问题，例如this，但是我希望是否有人可以确认这是一个合法的问题并且仍然被人们看到？我什至将"react-transition-group": "^2.2.1" 添加到package.json，但到目前为止还没有运气。提前感谢您的帮助。

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'

我的package.json 中有"react-router": "^3.2.0",，以防万一这可以帮助人们了解可能的根本原因。

[更新] 在调查过程中，我删除了node_modules 并发出了npm cache clean，并通过发出npm ls -gp --depth=0 | awk -F/ '/node_modules/ && !/\/npm$/ {print $NF}' | xargs npm -g rm 确保清除了全局缓存。这并没有解决问题。

【问题讨论】：

标签： material-ui react-transition-group

【解决方案1】：

按照此票证中说明的步骤解决问题：material-ui-next/9356

解决方案总结 这个问题与webpack 如何在构建时搜索依赖关系并为每个模块建立所有对等依赖关系的依赖关系图有关。当进一步挖掘时，我注意到material-ui@0.19.4 有react-transition-group@1.2.1 作为它的对等依赖，而material-ui-next@1.0.0 beta 有react-transition-group@2.2.1 作为它的对等依赖。此外，我怀疑因为我的项目中有两个material-ui 版本，当从material-ui-next 导入组件时，从material-ui-next 的角度来看react-transition-group@2.2.1 的预期路径是project/node_modules，但显然是由于有两个版本material-ui，后者安装在react-transition-group@2.2.1下material-ui-next。

在webpack路径配置中，添加以下内容：

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"),
};

最后添加webpack的resolve属性的额外路径：

module.exports = {
  modules: [PATHS.app, PATHS.modules, PATHS.extraModules],
  extensions: [".js", ".jsx", ".css"],
};

【讨论】：

【解决方案2】：

解决上述问题：

请安装 react-transition-group

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

【讨论】：