javascript - Module not found: Can't resolve 'ReactDOM' - Stack Overflow

admin管理员组

文章数量:1287489

I have two react projects:

1. A React Component (built with webpack)
2. A React test project (create-react-app)

When importing 1 into 2 pilation fails with

Module not found: Can't resolve 'ReactDOM'

Webpack config for the ponent project:

var path = require('path');
module.exports = {
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js'
  },
  devtool: "source-map",
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"]
  },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
      { test: /(\.css$)/, loaders: ['style-loader', 'css-loader'] },
      { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
    ]
  },
  externals: {
    'react': 'monjs react',
    'react-dom': 'ReactDOM'
  }
};

I have tried removing the externals section above so that ReactDOM is bundled but that doesn't seem to solve the issue either. Ideally React shouldn't need to be bundled. ReactDOM isn't an import in the ponent project.

package.json for the ponent project:

{
  "name": "ponent",
  "version": "0.1.0",
  "main": "build/index.js",
  "dependencies": {
    "react-grid-layout": "^0.16.0",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "semantic-ui-css": "^2.2.12",
    "semantic-ui-react": "^0.75.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --watch",
    "build": "webpack"
  },
  "devDependencies": {
    "@types/react": "^16.0.20",
    "@types/react-dom": "^16.0.2",
    "@types/react-grid-layout": "^0.16.0",
    "@types/react-redux": "^5.0.12",
    "awesome-typescript-loader": "^3.3.0",
    "react-dom": "^16.0.0",
    "react": "^16.0.0",
    "babel-cli": "^6.24.1",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.5.1",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.5",
    "source-map-loader": "^0.2.3",
    "style-loader": "^0.19.0",
    "typescript": "^2.6.1",
    "webpack": "^2.6.1",
    "url-loader": "^0.6.2"
  }
}

In my test project I have

import * as React from 'react';    
import * as ReactDOM from 'react-dom';
import Component from 'ponent'

The test project builds fine if I remove the dependency on Component. As soon as I import Component the full error message is:

./node_modules/ponent/build/index.js
Module not found: Can't resolve 'ReactDOM' in '/mnt/c/Users/a8345/ws/test/node_modules/ponent/build'

As I am using typescript I have @types/react-dom installed. If I have import ReactDOM from 'react-dom' I get ./src/index.tsx (2,8): error TS1192: Module '"/mnt/c/Users/a8345/ws/test/node_modules/@types/react-dom/i‌​ndex"' has no default export.. import * as ReactDOM from 'react-dom' works fine in the test project unless I try and import my own ponent.

I suspect this is a build issue as opposed to an import issue, how should I best configure this to ensure that the ponent uses ReactDOM from the host project rather than bundling it into the ponent?

Thanks in advance

I have two react projects:

1. A React Component (built with webpack)
2. A React test project (create-react-app)

When importing 1 into 2 pilation fails with

Module not found: Can't resolve 'ReactDOM'

Webpack config for the ponent project:

var path = require('path');
module.exports = {
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js'
  },
  devtool: "source-map",
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"]
  },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
      { test: /(\.css$)/, loaders: ['style-loader', 'css-loader'] },
      { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
    ]
  },
  externals: {
    'react': 'monjs react',
    'react-dom': 'ReactDOM'
  }
};

I have tried removing the externals section above so that ReactDOM is bundled but that doesn't seem to solve the issue either. Ideally React shouldn't need to be bundled. ReactDOM isn't an import in the ponent project.

package.json for the ponent project:

{
  "name": "ponent",
  "version": "0.1.0",
  "main": "build/index.js",
  "dependencies": {
    "react-grid-layout": "^0.16.0",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "semantic-ui-css": "^2.2.12",
    "semantic-ui-react": "^0.75.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --watch",
    "build": "webpack"
  },
  "devDependencies": {
    "@types/react": "^16.0.20",
    "@types/react-dom": "^16.0.2",
    "@types/react-grid-layout": "^0.16.0",
    "@types/react-redux": "^5.0.12",
    "awesome-typescript-loader": "^3.3.0",
    "react-dom": "^16.0.0",
    "react": "^16.0.0",
    "babel-cli": "^6.24.1",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.5.1",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.5",
    "source-map-loader": "^0.2.3",
    "style-loader": "^0.19.0",
    "typescript": "^2.6.1",
    "webpack": "^2.6.1",
    "url-loader": "^0.6.2"
  }
}

In my test project I have

import * as React from 'react';    
import * as ReactDOM from 'react-dom';
import Component from 'ponent'

The test project builds fine if I remove the dependency on Component. As soon as I import Component the full error message is:

./node_modules/ponent/build/index.js
Module not found: Can't resolve 'ReactDOM' in '/mnt/c/Users/a8345/ws/test/node_modules/ponent/build'

As I am using typescript I have @types/react-dom installed. If I have import ReactDOM from 'react-dom' I get ./src/index.tsx (2,8): error TS1192: Module '"/mnt/c/Users/a8345/ws/test/node_modules/@types/react-dom/i‌​ndex"' has no default export.. import * as ReactDOM from 'react-dom' works fine in the test project unless I try and import my own ponent.

I suspect this is a build issue as opposed to an import issue, how should I best configure this to ensure that the ponent uses ReactDOM from the host project rather than bundling it into the ponent?

Thanks in advance

• javascript
• reactjs
• typescript
• webpack

Share Improve this question Follow edited Nov 8, 2017 at 22:04 charns asked Nov 7, 2017 at 22:26 charnscharns 12111 silver badge44 bronze badges 2

• Do you have React and ReactDOM installed in your second project? In package.json you posted both of them are in devDependencies, so they may not be present in your second project. – kfazi Commented Jan 12, 2018 at 0:59
• This solved it for me: stackoverflow./a/47722556/15441 – hawkeye Commented Dec 31, 2019 at 12:09

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8 +50

Try

externals: {
 'react': {monjs: 'react'},
 'react-dom': {monjs: 'react-dom'}
}

https://webpack.js/configuration/externals/#object

Webpack is not resolving .js files. Add this to your webpack.config.js.

resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"]
},

Via this answer.

本文标签： javascriptModule not found Can39t resolve 39ReactDOM39Stack Overflow