create-react-app 无法解析模块答案

【问题标题】：create-react-app can't resolve modulecreate-react-app 无法解析模块
【发布时间】：2018-08-24 10:09:39
【问题描述】：

我正在升级旧的 react 应用程序以使用最新最好的，但我似乎无法弄清楚为什么我的所有模块都无法解析。

似乎在某些时候您可以简单地指向导入中的文件夹，但现在它不再解析

在我的 Webpack 中，我相信我已经正确设置了它。有人知道导入有什么变化吗？

resolve: {
    // This allows you to set a fallback for where Webpack should look for modules.
    // We placed these paths second because we want `node_modules` to "win"
    // if there are any conflicts. This matches Node resolution mechanism.
    // https://github.com/facebookincubator/create-react-app/issues/253
    modules: ["node_modules", paths.appNodeModules].concat(
      // It is guaranteed to exist because we tweak it in `env.js`
      process.env.NODE_PATH.split(path.delimiter).filter(Boolean),
      path.resolve(__dirname, "src")
    ),
    // These are the reasonable defaults supported by the Node ecosystem.
    // We also include JSX as a common component filename extension to support
    // some tools, although we do not recommend using it, see:
    // https://github.com/facebookincubator/create-react-app/issues/290
    // `web` extension prefixes have been added for better support
    // for React Native Web.
    extensions: [
      ".web.js",
      ".mjs",
      ".js",
      ".json",
      ".web.jsx",
      ".jsx",
      ".scss",
      ".css",
      ".json"
    ]

【问题讨论】：

我明白了。请提供可以复制问题的stackoverflow.com/help/mcve。这可以是任何东西。导入没有单点责任，尤其是因为它是您的自定义 Webpack 配置。
要么将其更改为src/common/eventemitter/.....，要么使用当前文件的相对路径，例如../../eventemitter/.....
从“../../eventemitter”导入EventEmitter；有效，但是因为我添加了我的 src 目录来解决：我不应该能够像节点模块一样使用它吗？我是否需要在我的解决方案中将其别名为 internal 然后从 ''internal/common/eventemitter 导入 EventEmitter
好的，尝试将path.resolve(__dirname, "src") 更改为path.resolve(__dirname, "./src")。或者尝试使用 path.join 而不是 path.resolve。
@Kartik 没有区别，stackoverflow.com/questions/39110801/…

标签： reactjs webpack es6-modules

【解决方案1】：

问题是 path.resolve(__dirname, "src") 似乎没有解决我认为的问题。

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

 module.exports = {
  dotenv: resolveApp('.env'),
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
  appIndexJs: resolveApp('src/main.jsx'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveApp('src/setupTests.js'),
  appNodeModules: resolveApp('node_modules'),
  publicUrl: getPublicUrl(resolveApp('package.json')),
  servedPath: getServedPath(resolveApp('package.json')),
};


modules: ["node_modules", paths.appNodeModules].concat(
      // It is guaranteed to exist because we tweak it in `env.js`
      process.env.NODE_PATH.split(path.delimiter).filter(Boolean),
      paths.appSrc
    ),
    // These are the reasonable defaults supported by the Node ecosystem.
    // We also include JSX as a common component filename extension to support
    // some tools, although we do not recommend using it, see:
    // https://github.com/facebookincubator/create-react-app/issues/290
    // `web` extension prefixes have been added for better support
    // for React Native Web.
    extensions: [
      ".web.js",
      ".mjs",
      ".js",
      ".json",
      ".web.jsx",
      ".jsx",
      ".scss",
      ".css",
      ".json"
    ]

【讨论】：