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

Question

I'm trying to put together a very basic project with React, TypeScript and Webpack. When I compile I get the following errors from the react folder in node_modules (I've removed the stack traces and my project's path for brevity):

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 uninstalling TypeScript and replacing it with Babel to transpile the JSX and got the same error. Installing babel-preset-2015 fixed it.

I've tried just about every 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 working together?

I've worked with all three of these technologies before, is it a recent compatibility problem? If so what are the most recent compatible versions?

I've seen a few other questions similar to this one where the solution was installing fbjs directly in the project - I've tried this too 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"     } } 

./src/index.tsx

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

(I'm running this with Node 9.2.1 and NPM 5.6.0 installed)

Answer 1

Webpack is not resolving .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"   ] }