私は非常に基本的なプロジェクトを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
修正しました。
TypeScriptで同じ結果を得るために、target
とのほぼすべての組み合わせを試しmodule
ましtsconfig.json
たが、何も機能しませんでした。Webpack、TypeScript、Reactを連携させるにはどうすればよいですか?
これらの3つのテクノロジーすべてを以前に使用したことがありますが、最近の互換性の問題ですか?もしそうなら、最新の互換バージョンは何ですか?
ソリューションがfbjs
プロジェクトに直接インストールされるこの質問に似た他のいくつかの質問を見ました-私もこれを試してみましたが、成功しませんでした。
{
"compilerOptions": {
"target": "es5",
"jsx": "react",
"module": "es2015"
},
"exclude": ["build"]
}
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" },
],
},
};
{
...
"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"
}
}
import * as React from "react";
const a = <div />;
(ノード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"
]
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加