我是 webpack 4/react/babel 的新手,我收到以下错误:
ERROR in ./src/index.js 7:4
Module parse failed: Unexpected token (7:4)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
> <Hello compiler="TypeScript" framework="React" />,
| document.getElementById("example")
| );
我试过这个解决方案:link from stack overflow但也没有用。
所以我被卡住了,主要区别是我使用的是 webpack 4(我没有让它与 webpack 3 一起工作)
我的环境是:
- window :10
- nodejs:6.9.5
下面是文件及其相对路径
./package.json
{
"name": "using-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.4.1",
"react-dom": "^16.4.1"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"file-loader": "^1.1.11",
"webpack": "^4.16.1"
}
}
./.babelrc
{
"presets":[
"es2015", "react"
]
}
./webpack.config.js
module.exports = {
mode:"development",
entry: {
javascript: "./src/index.js",
html: "./src/index.html",
},
output: {
filename: "bundle.js",
path: __dirname + "/dist"
},
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".js"]
},
module: {
rules: [
{
test:"/\.js$/",
exclude:"/node_modules/",
loader:"babel-loader",
},
]
},////
externals: {
"react": "React",
"react-dom": "ReactDOM"
}
};
./index.js
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Hello } from "./components/hello";
ReactDOM.render(
<Hello compiler="TypeScript" framework="React" />,
document.getElementById("example")
);
./components/hello.js
import * as React from "react";
// 'HelloProps' describes the shape of props.
// State is never set so we use the '{}' type.
export class Hello extends React.Component {
render() {
return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
}
}
最佳答案
你的模块部分在它应该有正则表达式的时候有纯字符串。
删除正则表达式周围的引号! :)
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader:"babel-loader",
},
]
},
关于javascript - webpack4 : React babel - You may need an appropriate loader to handle this file type,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51449282/