我正在try 用React、TypeScript和Webpack组合一个非常基本的项目.编译时,我从node_modules中的react文件夹中得到以下错误(为了简洁起见,我删除了堆栈跟踪和项目路径):

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'

我try 卸载TypeScript,并用Babel替换它来传输JSX,但也遇到了同样的错误.Installing 100 fixed it

我try 了tsconfig.jsontargetmodule的每一种组合,以在TypeScript中获得相同的结果,但没有任何效果.How can I get Webpack, TypeScript, and React working together?

我以前使用过这三种技术,这是最近的兼容性问题吗?如果是,最新的兼容版本是什么?

我还看到过一些类似的问题,解决方案是直接在项目中安装fbjs,我也try 过,但没有成功.

Files

tsconfig.json

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

网页包.配置.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)

推荐答案

Webpack无法解析.js个文件.把这个加到你的webpack.config.js.

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

这是我用来运行你的例子的tsconfig.json个.

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

Typescript相关问答推荐

如何准确确定此特定场景中的类型?

如何根据参数的值缩小函数内的返回类型?

Typescript:将内部函数参数推断为子对象键的类型

Angular中的其他服务仅获取默认值

类型脚本泛型最初推断然后设置

Redux—Toolkit查询仅在不为空的情况下添加参数

如何正确地对类型脚本泛型进行限制

TypeScrip表示该类型不可赋值

在不更改类型签名的情况下在数组并集上映射文字

是否有一个版本的联合类型递归地使属性只出现在一个可选选项中?

使用订阅时更新AG网格中的行

AngularJS服务不会解析传入的Json响应到管道中的模型

寻址对象中路径的泛型类型

如何创建由空格连接的多个字符串的类型

自动通用回调

来自枚举的<;复选框和组件列表

映射类型不是数组类型

导航链接不触发自定义挂钩

Svelte+EsBuild+Deno-未捕获类型错误:无法读取未定义的属性(读取';$$';)

如何在由函数参数推断的记录类型中具有多个对象字段类型