Module not found: Error: Can't resolve 'ReactDOM'

Question

我正在尝试在我的项目中导入 framer 库。如果我不导入 Hearts.tsx，项目本身编译得很好。但是，如果我导入 Hearts.tsx，它就会像下面这样失败。 Hearts.tsx 导入成帧器。不幸的是，当我尝试使用 webpack-dev-server 运行时出现错误。

    ERROR in ./node_modules/framer/build/framer.js
Module not found: Error: Can't resolve 'ReactDOM' in '/Users/ikaplan/Code/typeTestFramer/node_modules/framer/build'
 @ ./node_modules/framer/build/framer.js 1:99-118
 @ ./src/components/Heart.tsx
 @ ./src/index.tsx
 @ multi (webpack)-dev-server/client?http://localhost:9001 ./src/index.tsx





var path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.tsx",
  output: {
    filename: "bundle.js",
    path: __dirname + "/dist"
  },

  // Enable sourcemaps for debugging webpack's output.
  devtool: "source-map",

  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts", ".tsx", ".js", ".json"]
    },
  externals: {
    react: "react",
    "react-dom": "react-dom"
  },
  module: {
    rules: [
      // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
      { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
    ]
  },

  // When importing a module whose path matches one of the following, just
  // assume a corresponding global variable exists and use that instead.
  // This is important because it allows us to avoid bundling all of our
  // dependencies, which allows browsers to cache those libraries between builds.

  // webpack-dev-server configuration
  // This specifies where javascript bundle is created when
  // webpack CLI is run. However, webpack-dev-server is only
  // concerned with the 'filename' parameter.
  // webpack-dev-server generates the bundle with the 'filename' in
  // memory. It never creates an actual file in the 'path' specified
  // unlike the webpack CLI.
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js"
  },

  devServer: {
    // Can be omitted unless you are using 'docker'

    // This is where webpack-dev-server serves your bundle
    // which is created in memory.
    // To use the in-memory bundle,
    // your <script> 'src' should point to the bundle
    // prefixed with the 'publicPath', e.g.:
    //   <script src='http://localhost:9001/assets/bundle.js'>
    //   </script>
    publicPath: "/dist/",
    // The local filesystem directory where static html files
    // should be placed.
    // Put your main static html page containing the <script> tag
    // here to enjoy 'live-reloading'
    // E.g., if 'contentBase' is '../views', you can
    // put 'index.html' in '../views/main/index.html', and
    // it will be available at the url:
    //   https://localhost:9001/main/index.html
    contentBase: path.resolve(__dirname, "./"),
    // 'Live-reloading' happens when you make changes to code
    // dependency pointed to by 'entry' parameter explained earlier.
    // To make live-reloading happen even when changes are made
    // to the static html pages in 'contentBase', add
    // 'watchContentBase'
    watchContentBase: true,
    compress: false,
    port: 9001
  }
};

这是详细的错误：

ERROR in ./node_modules/framer/build/framer.js
Module not found: Error: Can't resolve 'ReactDOM' in '/Users/ikaplan/Code/typeTestFramer/node_modules/framer/build'
resolve 'ReactDOM' in '/Users/ikaplan/Code/typeTestFramer/node_modules/framer/build'
  Parsed request is a module
  using description file: /Users/ikaplan/Code/typeTestFramer/node_modules/framer/package.json (relative path: ./build)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/ikaplan/Code/typeTestFramer/node_modules/framer/build/node_modules doesn't exist or is not a directory
      /Users/ikaplan/Code/typeTestFramer/node_modules/framer/node_modules doesn't exist or is not a directory
      /Users/ikaplan/Code/typeTestFramer/node_modules/node_modules doesn't exist or is not a directory
      /Users/ikaplan/Code/node_modules doesn't exist or is not a directory
      /Users/ikaplan/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Users/ikaplan/Code/typeTestFramer/node_modules
        using description file: /Users/ikaplan/Code/typeTestFramer/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: /Users/ikaplan/Code/typeTestFramer/package.json (relative path: ./node_modules/ReactDOM)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/ikaplan/Code/typeTestFramer/node_modules/ReactDOM doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/ikaplan/Code/typeTestFramer/node_modules/ReactDOM.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/ikaplan/Code/typeTestFramer/node_modules/ReactDOM.tsx doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/ikaplan/Code/typeTestFramer/node_modules/ReactDOM.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Users/ikaplan/Code/typeTestFramer/node_modules/ReactDOM.json doesn't exist
            as directory
              /Users/ikaplan/Code/typeTestFramer/node_modules/ReactDOM doesn't exist
[/Users/ikaplan/Code/typeTestFramer/node_modules/framer/build/node_modules]
[/Users/ikaplan/Code/typeTestFramer/node_modules/framer/node_modules]
[/Users/ikaplan/Code/typeTestFramer/node_modules/node_modules]
[/Users/ikaplan/Code/node_modules]
[/Users/ikaplan/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/ikaplan/Code/typeTestFramer/node_modules/ReactDOM]
[/Users/ikaplan/Code/typeTestFramer/node_modules/ReactDOM.ts]
[/Users/ikaplan/Code/typeTestFramer/node_modules/ReactDOM.tsx]
[/Users/ikaplan/Code/typeTestFramer/node_modules/ReactDOM.js]
[/Users/ikaplan/Code/typeTestFramer/node_modules/ReactDOM.json]
 @ ./node_modules/framer/build/framer.js 1:99-118
 @ ./src/components/Heart.tsx
 @ ./src/index.tsx

我错过了什么？

顺便说一下，这是我的 package.json 文件：

{
  "name": "typetest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "awesome-typescript-loader": "^5.2.0",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "typescript": "^2.7.1",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.4",
    "framer": "^0.7.5"
  },
  "dependencies": {
    "@types/react": "^16.3.12",
    "@types/react-dom": "^16.0.5",
    "@types/draft-js": "^0.10.24",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "source-map-loader": "^0.2.4",
    "ReactDOM": "./ReactDOM"
  },
  "peerDependencies": {
    "framer": "^0.7.5",
    "react": "^16.3.2",
    "react-dom": "^16.3.2"
  }
}

Answer 1

可能是你的 react-dom 没有正确安装的问题。

尝试

npm install react react-dom --save

然后你的 package.json 必须包含依赖项

你检查过你的 package.json 了吗？

Answer 2

看起来 node_modules/framer/build/framer.js 需要错误的模块名称：它应该是 react-dom，而不是 ReactDOM。我找不到任何说明该库应该如何使用的文档，这些文档可能暗示了为什么需要 ReactDOM 会起作用。将您指向该库的文档在哪里？

无论如何，您应该能够通过创建一个仅重新导出 react-dom 的 ReactDOM 模块来解决该问题。使用以下文件创建 ReactDOM 目录：

// ReactDOM/index.js
export * from "react-dom";

// ReactDOM/package.json
{"name": "ReactDOM"}

并将 "ReactDOM": "./ReactDOM" 添加到 package.json 中的依赖项。

Answer 3

另一种解决方案是在 Webpack 配置中使用 module.resolve 选项：

const path = require('path');

module.exports = {
  ...,
  resolve: {
    ...,
    alias: {
      ...,
      React: path.resolve(__dirname, './node_modules/react/'),
      ReactDOM: path.resolve(__dirname, './node_modules/react-dom/')
    }
  }
}

我在使用不同的库时遇到了类似的问题，这为我解决了！

Module not found: Error: Can't resolve 'ReactDOM'

Module not found: Error: Can't resolve 'ReactDOM'

npm

typescript

reactjs

webpack

framerjs