Module not found: Nie można rozwiązać 'ReactDOM'

Question

mam dwa reagować projekty:

1. React składnik (zbudowany z WebPack)
2. React projekt testowy (tworzenie reagują aplikacji)

przy imporcie 1 do 2 kompilacji nie powiedzie się z

Module not found: Can't resolve 'ReactDOM' 

WebPACK config dla projektu komponentu:

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' 
    } 
}; 

Próbowałem usunięcie sekcję externals powyżej tak że ReactDOM jest w zestawie, ale to nie wydaje się, aby rozwiązać ten problem albo. Najlepiej byłoby, gdyby React nie musiał być wiązany. ReactDOM nie jest importem w projekcie komponentu.

package.json dla projektu komponentu:

{ 
    "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" 
    } 
} 

W moim projekcie badania mam

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

Projekt Test buduje w porządku jeśli usunąć zależność od komponentu. Gdy tylko zaimportuję komponent, pełny komunikat o błędzie to:

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

Ponieważ używam maszynopisu, mam zainstalowany @ types/react-dom. Jeśli mam import ReactDOM from 'react-dom', otrzymam ./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' działa poprawnie w projekcie testowym, chyba że spróbuję zaimportować mój własny komponent.

Podejrzewam, że jest to problem z budowaniem, w przeciwieństwie do problemu z importowaniem, jak najlepiej go skonfigurować, aby upewnić się, że komponent korzysta z ReactDOM z projektu głównego zamiast łączenia go w komponent?

góry dzięki

Answer 1

Try

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

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