I have two reactive projects:
- React component (built-in with webpack)
- Reaction Testing Project (create-react-app)
When importing 1 to 2 compilation with
Module not found: Can't resolve 'ReactDOM'
Webpack configuration for 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 tried deleting the externals section above so that ReactDOM is bundled, but this does not seem to solve the problem. Ideally, the Reaction should not be included. ReactDOM is not an import into a 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 the 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 use typescript, I install @ types / react-dom. 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/index"' has no default export .. import * as ReactDOM from 'react-dom' works fine in a test project unless I try to import my own component.
I suspect this is a build problem and not an import problem, what is the best way to configure this to ensure that the component uses ReactDOM from the host project and not binds it to the component?
Thank you in advance