[英]Webpack 4: Module parse failed: Unexpected token
During my builds, webpack is giving me this error: 在我的构建过程中,webpack给我这个错误:
ERROR in ./client/components/App/index.tsx 15:9 Module parse failed: Unexpected token (15:9) You may need an appropriate loader to handle this file type.
./client/components/App/index.tsx中的错误15:9模块解析失败:意外的令牌(15:9)您可能需要适当的加载程序来处理此文件类型。
|
|
> const App: SFC = () => (
| <div style={{ background: "red" }}>
| <h3>test</h3>
@ ./client/index.tsx 11:4-14:6 12:24-51 @ multi react-hot-loader/patch ./client/index.tsx webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true
@ ./client/index.tsx 11:4-14:6 12:24-51 @ multi react-hot-loader / patch ./client/index.tsx webpack-hot-middleware / client?path = / __ webpack_hmr&timeout = 20000&reload =真
Here is my webpack.config.ts
: 这是我的
webpack.config.ts
:
import CleanWebpackPlugin from "clean-webpack-plugin";
import HtmlWebpackPlugin from "html-webpack-plugin";
import path from "path";
import { Configuration, HotModuleReplacementPlugin } from "webpack";
const rootDir = ["..", "..", "..", ".."];
const distDir = ["..", ".."];
// this file lives in one place as `.ts` and another as `.js` grab the
// file extension to determine the include path relative to its location
const include =
path.extname(module.id) === ".ts"
? path.resolve(__dirname, "client", "index.tsx")
: path.resolve(__dirname, ...rootDir, "client", "index.tsx");
const exclude = /node_modules/;
const tsconfig = path.resolve(
__dirname,
...rootDir,
"config",
"tsconfig.client.json"
);
// development plugins
const plugins = [
new HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "..", "..", "..", "index.html")
}),
new CleanWebpackPlugin([path.resolve(__dirname, ...distDir, "*.*")], {
allowExternal: true,
root: __dirname,
verbose: true
})
];
// script for webpack-hot-middleware
const hotMiddlewareScript: string =
"webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true";
const webpackDevConfig: Configuration = {
context: path.resolve(__dirname, ...rootDir),
devtool: "source-map",
entry: {
app: ["react-hot-loader/patch", include, hotMiddlewareScript]
},
mode: "development",
module: {
rules: [
{
exclude,
include,
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
exclude,
include,
loader: "ts-loader",
options: {
configFile: tsconfig,
transpileOnly: true
},
test: /\.tsx?$/
},
{
enforce: "pre",
exclude,
include,
loader: "source-map-loader",
test: /\.js$/
}
]
},
optimization: {
nodeEnv: "development"
},
output: {
filename: "[name].bundle.js",
path: path.join(__dirname, ...distDir),
publicPath: path.join(__dirname, ...distDir, "static/")
},
plugins,
resolve: {
extensions: [".js", ".ts", ".tsx", "*"]
},
target: "web"
};
export default webpackDevConfig;
My App.tsx
: 我的
App.tsx
:
import React, { SFC } from "react";
import ReactDOM from "react-dom";
const App: SFC = () => (
<div style={{ background: "red" }}>
<h3>test</h3>
</div>
);
My index.tsx
: 我的
index.tsx
:
import React from "react";
import ReactDOM from "react-dom";
import { App } from "./components";
ReactDOM.render(<App />, document.getElementById("app"));
// enables Hot Module Replacement (HMR)
if ((module as any).hot) {
(module as any).hot.accept("./components/App", () => {
// for HMR to work, `App` must be re-required
const NextApp = require("./components/App").default;
ReactDOM.render(<NextApp />, document.getElementById("app"));
});
}
My tsconfig.json
: 我的
tsconfig.json
:
{
"compilerOptions": {
"allowJs": true,
"jsx": "react",
"module": "commonjs",
...
}
}
The error itself seems to give the solution: You may need an appropriate loader to handle this file type.
错误本身似乎提供了解决方案:
You may need an appropriate loader to handle this file type.
, however, it is my understanding that ts-loader
should be able to handle react. 但是,据我了解,
ts-loader
应该能够处理反应。
Here is an example webpack.config
provided by the ts-loader
team used in an app that uses typescript and react. 这是由
ts-loader
团队提供的webpack.config
示例,该应用程序在使用打字稿并做出反应的应用中使用。 The set up is fairly similar to my own, however, I do not use webpack-dev-server
, rather, I use webpack-dev-middleware
. 该设置与我自己的设置非常相似,但是,我不使用
webpack-dev-server
,而是使用webpack-dev-middleware
。
The issue was resolved by niba 's comment on the original question. niba对原始问题的评论解决了该问题。 It seems that
ts-loader
when given a single module to include
will not traverse the linked modules. ts-loader
在给定要include
的单个模块时似乎不会遍历链接的模块。 Removing the include
field or using the folder name fixed this error for me. 删除
include
字段或使用文件夹名称为我修复了此错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.