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'

我有"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在构建时搜索依赖关系，并为每个模块建立所有对等依赖关系的依赖关系图。当进一步挖掘时，我注意到 <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc919d88998e959d90d18995bcccd2cdc5d2c8" rel="noreferrer noopener nofollow">[email protected]</a>有<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1664737775623b62647778657f627f79783b7164796366562738243827" rel="noreferrer noopener nofollow">[email protected]</a>作为其对等依赖项，而 <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="036e627766716a626f2e766a2e6d667b7743322d332d33" rel="noreferrer noopener nofollow">[email protected]</a> beta有<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0775626664732a73756669746e736e68692a6075687277473529352936" rel="noreferrer noopener nofollow">[email protected]</a>作为其对等依赖。此外，我怀疑因为我都有 material-ui当从 material-ui-next 导入组件时，在我的项目上发布， <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d5f484c4e5900595f4c435e4459444243004a5f42585d6d1f031f031c" rel="noreferrer noopener nofollow">[email protected]</a> 的预期路径来自material-ui-next的视角是project/node_modules但显然是由于 material-ui 有两个版本，后者安装<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5321363230277e2721323d203a273a3c3d7e34213c262313617d617d62" rel="noreferrer noopener nofollow">[email protected]</a>下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"],
};