代码之家 › 专栏 › 技术社区 › Sandy Gifford

Webpack+React+TypeScript:未找到模块。。。在里面节点\模块/反应/

webpack typescript reactjs

Sandy Gifford · 技术社区 · 8 年前

我正在尝试用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 直接在项目中-我也尝试过,但没有成功。

文件夹

t配置。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/索引。tsx公司

import * as React from "react";

const a = <div />;

(我在运行时安装了节点9.2.1和NPM 5.6.0)

2 回复 | 直到 8 年前

101

arpl 7 年前

网页包未解析 .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"
  ]
}

-6

é¹é¹åç«¯ 5 年前

在VSCode中,选中Deno Extension并将其设置为Enable(工作区)