web-dev-qa-db-fra.com

Webpack + React + TypeScript: module introuvable ... dans ... node_modules / react /

J'essaie de monter un projet très basique avec React, TypeScript et Webpack. Lorsque je compile, j'obtiens les erreurs suivantes du dossier react dans node_modules (J'ai supprimé les traces de pile et le chemin de mon projet par souci de concision):

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'

J'ai essayé de désinstaller TypeScript et de le remplacer par Babel pour transpiler le JSX et j'ai eu la même erreur. Installation de babel-preset-2015 l'a corrigé.

J'ai essayé à peu près toutes les combinaisons de target et module dans tsconfig.json pour obtenir le même résultat dans TypeScript mais n'a rien pu faire fonctionner. Comment puis-je obtenir Webpack, TypeScript et React fonctionne ensemble?

J'ai déjà travaillé avec ces trois technologies auparavant, est-ce un problème de compatibilité récent? Si oui, quelles sont les versions compatibles les plus récentes?

J'ai vu quelques autres questions similaires à celle-ci où la solution installait fbjs directement dans le projet - j'ai essayé cela aussi sans succès.

Des dossiers

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

(J'exécute ceci avec Node 9.2.1 et NPM 5.6.0 installés)

reactjstypescriptwebpack
24
Sandy Gifford

Webpack ne résout pas .js des dossiers. Ajoutez ceci à votre webpack.config.js.

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

Voici la tsconfig.json J'avais l'habitude d'exécuter votre exemple.

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