Module not found: Can't resolve 'ReactDOM'

Question

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 compilation fails with

Module not found: Can't resolve 'ReactDOM'

Webpack config for the component 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': 'commonjs 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 component project.

package.json for the component project:

{
  "name": "component",
  "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 'component'

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/component/build/index.js
Module not found: Can't resolve 'ReactDOM' in '/mnt/c/Users/a8345/ws/test/node_modules/component/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 component.

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

Thanks in advance

Answer 1

Try

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

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