Webpack + React + TypeScript: модуль не найден… в… node_modules / реагировать /

Sandy Gifford спросил: 14 ноября 2017 в 07:10 в: reactjs

Я пытаюсь собрать очень простой проект с помощью React, TypeScript и Webpack. При компиляции я получаю следующие ошибки из папки react в node_modules (я удалил следы стека и путь моего проекта для краткости):

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'

Я попытался удалить TypeScript и заменить его Babel, чтобы перенести JSX, и получил ту же ошибку. Установка babel-preset-2015 исправила это.

Я пробовал почти все комбинации target и module в tsconfig.json, чтобы получить тот же результат в TypeScript, но ничего не получалось. Как настроить совместную работу Webpack, TypeScript и React?

Я уже работал со всеми этими тремя технологиями ранее, это недавняя проблема совместимости? Если да, то каковы последние совместимые версии?

Я видел еще несколько вопросов, похожих на этот, когда решение устанавливало fbjs непосредственно в проекте - я пробовал это тоже безуспешно.

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" },
        ],
    },
};

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

(я запускаю это с Node 9.2.1 и NPM 5.6 .0 установлено)

0 ответов