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

Question

在测试 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 并通过发布 [=21= 确保清除了全局缓存].这没有解决问题。

Answer 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，后者在 material-ui-next.

下安装 react-transition-group@2.2.1

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

Answer 2

解决上述问题：

请安装 react-transition-group

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

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

Material-UI v1.0.0.-beta Issue with React-Transition-Group

material-ui

react-transition-group