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'

我"react-router": "^3.2.0",中有package.json，以防有人理解可能是根本原因。

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

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版本，react-transition-group@2.2.1的预期路径来自material-ui-next的视角是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"],
};

Answer 2

解决以上问题：

请安装react-transition-group

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

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

2 个答案: