reactjs - Webpack + React + TypeScript: Modul ikke funnet ... i ... node_modules/react/

Jeg prøver å sette sammen et veldig grunnleggende prosjekt med React, TypeScript og Webpack. Når jeg kompilerer får jeg følgende feil fra react-mappen i node_modules (jeg har fjernet stack traces og stien til prosjektet mitt av hensyn til korthet):

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'

Jeg prøvde å avinstallere TypeScript og erstatte det med Babel for å transpile JSX, og fikk samme feil. Å installere babel-preset-2015 løste det.

Jeg har prøvd omtrent alle kombinasjoner av target og module i tsconfig.json for å få samme resultat i TypeScript, men fikk ingenting til å fungere. Hvordan kan jeg få Webpack, TypeScript og React til å fungere sammen?

Jeg har jobbet med alle tre av disse teknologiene før, er det et nylig kompatibilitetsproblem? Hvis ja, hva er de nyeste kompatible versjonene?

Jeg har sett noen få andre spørsmål som ligner på dette hvor løsningen var å installere fbjs direkte i prosjektet - jeg har prøvd dette også uten suksess.

Filer

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 />;

(Jeg kjører dette med Node 9.2.1 og NPM 5.6.0 installert)

Svar #1

Webpack løser ikke .js-filer. Legg dette til din webpack.config.js.

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

Her er tsconfig.json jeg brukte for å kjøre eksemplet ditt.

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

Relaterte artikler