我检查其他线程已经超过几天了;我几次在网上发现相同的错误,但无法复制已发布的解决方案。为每种不同版本编写babel / webpack配置的方法很多,但并没有太大帮助。我正在运行Webpack,TS和ESLint。我能够得到的“最佳情况”错误如下。我真的很想帮忙! :[[在很多事情中,我试图将tsx转换为jsx,并使用jsx保留而不是反应。
终端编译器错误:
ERROR in ./src/index.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\Milo\Desktop\Programacion\zekeapp\src\index.tsx: Unexpected token (12:2)
10 |
11 | ReactDOM.render(
> 12 | <Provider store={store}>
| ^
13 | <Router>
14 | <Main />
15 | </Router>
index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ThemeProvider } from 'styled-components';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import store from './store';
import Main from './containers/Main';
import { lightTheme } from './templates/theme';
ReactDOM.render(
<Provider store={store}>
<Router>
<Main />
</Router>
</Provider>,
document.getElementById('root')
);
webpack.config.tsx
import * as path from 'path';
module.exports = {
entry: path.join(__dirname, './src/index.tsx'),
mode: 'production',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist/scripts')
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
},
module: {
rules: [
{
test: /\.(js|jsx|tsx|ts)$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
}
};
tsconfig.json
{
"compilerOptions": {
"target": "ES2018" /* Specify ECMAScript target version: "ES3" (default), "ES5", "ES2015", "ES2016", "ES2017", "ES2018", "ES2019" or "ESNEXT". */,
"module": "commonjs" /* Specify module code generation: "none", "commonjs", "amd", "system", "umd", "es2015", or "ESNext". */,
"jsx": "preserve" /* Specify JSX code generation: "preserve", "react-native", or "react". */,
"strict": true /* Enable all strict type-checking options. */,
"noImplicitAny": false /* Raise error on expressions and declarations with an implied "any" type. */,
"moduleResolution": "node" /* Specify module resolution strategy: "node" (Node.js) or "classic" (TypeScript pre-1.6). */,
"baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
"paths": {
"#server/*": ["./server/*"],
"#src/*": ["./src/*"]
},
"experimentalDecorators": true /* Enables experimental support for ES7 decorators. */,
"emitDecoratorMetadata": true /* Enables experimental support for emitting type metadata for decorators. */,
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
}
}
答案 0 :(得分:2)
通过遵循官方React & Webpack文档,我得到了一个示例项目。
进行以下更改:
将webpack.config.tsx
重命名为webpack.config.js
(由节点而不是TypeScript运行)
安装ts-loader
来转换.ts / .tsx文件:npm install --save-dev ts-loader
编辑webpack.config.js
并配置ts-loader
此示例还包括babel-loader
。
请注意exclude: /node_modules/,
和configFile: path.resolve('./tsconfig.json'),
行,它们很重要,必须正确运行(有关详细信息,请参见下面的故障排除部分)
// webpack.config.js
{
//...
module: {
rules: [
{
test: /\.(js|jsx|tsx|ts)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
},
{
loader: 'ts-loader',
options: {
configFile: path.resolve('./tsconfig.json'),
},
},
],
}
]
}
}
tsconfig.json
并添加以下设置: // tsconfig.json
{
"compilerOptions": {
//...
// Can use to "react" if you aren't using `babel-loader` and `@babel/preset-react` to handle jsx
"jsx": "react" /* Specify JSX code generation: "preserve", "react-native", or "react". */,
// Include these so the `react` imports work nicely:
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
}
}
npx webpack
$ npx webpack
Hash: 184cde71516bcbc08144
Version: webpack 4.41.5
Time: 2558ms
Built at: 01/13/2020 2:34:08 PM
Asset Size Chunks Chunk Names
bundle.js 128 KiB 0 [emitted] main
Entrypoint main = bundle.js
[2] ./src/index.tsx 498 bytes {0} [built]
[8] ./src/Main.tsx 385 bytes {0} [built]
+ 7 hidden modules
这是我的测试项目的文件内容:
package.json
{
"devDependencies": {
"@babel/core": "^7.8.0",
"babel-loader": "^8.0.6",
"ts-loader": "^6.2.1",
"typescript": "^3.7.4",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
},
"dependencies": {
"@types/react": "^16.9.17",
"@types/react-dom": "^16.9.4",
"react": "^16.12.0",
"react-dom": "^16.12.0"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "ES2018" /* Specify ECMAScript target version: "ES3" (default), "ES5", "ES2015", "ES2016", "ES2017", "ES2018", "ES2019" or "ESNEXT". */,
"module": "commonjs" /* Specify module code generation: "none", "commonjs", "amd", "system", "umd", "es2015", or "ESNext". */,
"strict": true /* Enable all strict type-checking options. */,
"noImplicitAny": false /* Raise error on expressions and declarations with an implied "any" type. */,
"moduleResolution": "node" /* Specify module resolution strategy: "node" (Node.js) or "classic" (TypeScript pre-1.6). */,
"baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
"experimentalDecorators": true /* Enables experimental support for ES7 decorators. */,
"emitDecoratorMetadata": true /* Enables experimental support for emitting type metadata for decorators. */,
"forceConsistentCasingInFileNames": true, /* Disallow inconsistently-cased references to the same file. */
"jsx": "react" /* Specify JSX code generation: "preserve", "react-native", or "react". */,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
}
}
webpack.config.json
const path = require('path');
module.exports = {
entry: path.join(__dirname, './src/index.tsx'),
mode: 'production',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist/scripts')
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
},
module: {
rules: [
{
test: /\.(js|jsx|tsx|ts)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
},
{
loader: 'ts-loader',
options: {
configFile: path.resolve('./tsconfig.json'),
},
},
],
}
]
}
};
src / index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import Main from './Main';
ReactDOM.render( <Main />, document.getElementById('root') );
src / Main.tsx
import React from 'react';
import ReactDOM from 'react-dom';
export default function Main(){
return (<h1>This is Main</h1>);
}
我遇到了这些问题,进行了设置-这是我找到的解决方案。
错误::您收到类似The 'files' list in config file 'tsconfig.json' is empty.
例如
ERROR in [tsl] ERROR
TS18002: The 'files' list in config file 'tsconfig.json' is empty.
ERROR in ./src/index.tsx
Module build failed (from ./node_modules/ts-loader/index.js):
Error: error while parsing tsconfig.json
解决方案::解析完整的tsconfig.json
路径
// webpack.config.js
{
loader: 'ts-loader',
options: {
// configFile: './tsconfig.json', // !! WRONG
configFile: path.resolve('./tsconfig.json'), // CORRECT
},
}
错误::您收到类似Module not found: Error: Can't resolve '...' in 'path-to-project/node_modules/react'
例如
ERROR in ./node_modules/react/index.js
Module not found: Error: Can't resolve './Main' in 'C:\webpack-typescript\node_modules\react'
@ ./node_modules/react/index.js 15:31-48
@ ./src/index.tsx
解决方案::确保从node_modules
规则中排除ts-loader
。
// webpack.config.js
{
module: {
rules: [
{
test: /\.(js|jsx|tsx|ts)$/,
exclude: /node_modules/, // <--- make sure this is here!
// ...
}
]
}
}