Webpack + React + TypeScript: module not found ... in ... node_modules / react /

Question

I am trying to build a very simple project using React, TypeScript and Webpack. When I compile, I get the following errors from the react folder in node_modules (I shortened the stack trace and my project path for short):

 ERROR in ./node_modules/react/cjs/react.production.min.js Module not found: Error: Can't resolve 'fbjs/lib/emptyFunction' in '.../node_modules/react/cjs' ERROR in ./node_modules/react/cjs/react.development.js Module not found: Error: Can't resolve 'fbjs/lib/emptyFunction' in '.../node_modules/react/cjs' ERROR in ./node_modules/react/cjs/react.production.min.js Module not found: Error: Can't resolve 'fbjs/lib/emptyObject' in '.../node_modules/react/cjs' ERROR in ./node_modules/react/cjs/react.development.js Module not found: Error: Can't resolve 'fbjs/lib/emptyObject' in '.../node_modules/react/cjs' ERROR in ./node_modules/react/cjs/react.development.js Module not found: Error: Can't resolve 'fbjs/lib/invariant' in '.../node_modules/react/cjs' ERROR in ./node_modules/react/cjs/react.development.js Module not found: Error: Can't resolve 'fbjs/lib/warning' in '.../node_modules/react/cjs' ERROR in ./node_modules/react/cjs/react.production.min.js Module not found: Error: Can't resolve 'object-assign' in '.../node_modules/react/cjs' ERROR in ./node_modules/react/cjs/react.development.js Module not found: Error: Can't resolve 'object-assign' in '.../node_modules/react/cjs' ERROR in ./node_modules/react/cjs/react.development.js Module not found: Error: Can't resolve 'prop-types/checkPropTypes' in '.../node_modules/react/cjs' 

I tried removing TypeScript and replacing it with Babel to override JSX and got the same error. babel-preset-2015 installation fixed.

I tried just about any combination of target and module in tsconfig.json to get the same result in TypeScript, but couldn't get anything working. How can I get Webpack, TypeScript and React to work together?

I have worked with all three of these technologies before, is this a recent compatibility issue? If so, what are the latest compatible versions?

I saw several other questions like this one, where the solution installed fbjs directly in the project - I also tried this without success.

Files

tsconfig.json

 { "compilerOptions": { "target": "es5", "jsx": "react", "module": "es2015" }, "exclude": ["build"] } 

webpack.config.js

 module.exports = { entry: { dev: "./src/index.tsx", }, output: { filename: "./build/index.js", }, devtool: "source-map", resolve: { extensions: [".ts", ".tsx"], }, module: { loaders: [ // Typescript { test: /\.tsx?$/, loader: "ts-loader" }, ], }, }; 

package.json

 { ... "scripts": { "build": "webpack" }, "devDependencies": { "@types/react": "^16.0.28", "ts-loader": "^3.2.0", "typescript": "^2.6.2", "webpack": "^3.10.0" }, "dependencies": { "react": "^16.2.0" } } 

./CSI/index.tsx

 import * as React from "react"; const a = <div />; 

(I am running this with Node 9.2.1 and NPM 5.6.0)

Answer 1

Webpack does not allow .js files. Add this to your webpack.config.js .

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

Here is the tsconfig.json I used to run your example.

 { "compilerOptions": { "jsx": "react", "lib": ["es6", "dom"], "rootDir": "src", "module": "commonjs", "target": "es5", "sourceMap": true, "moduleResolution": "node", "noImplicitReturns": true, "noImplicitThis": true, "noImplicitAny": true, "strictNullChecks": true }, "include": [ "./src" ], "exclude": [ "node_modules", "build" ] }