'Unexpected token' 关于 JSX for Django React 教程
'Unexpected token' on JSX for Django React Tutorial
我正在关注这个 tutorial 但我终究无法弄清楚为什么 webpack 无法识别 JSX?希望有人指出我遗漏的愚蠢的事情:)
我的完整代码在这里
https://github.com/dukarc/django-react-app
错误:
\django-react-app\leadmanager\frontend\src\components\App.js: Unexpected token (6:11)
4 | class App extends Component {
5 | render() {
> 6 | return <h1>React App</h1>;
| ^
7 | }
8 | }
我尝试过的东西
- rm -rf node_modules && rm -f package-lock.json && npm install
- 参考教程 github 并仔细检查我是否同步
版本(如果需要会输出更多...这只是我的头脑):
- 节点:10.15.1
- npm: 6.8.0
package.json
{
"name": "lead_manager_react_django",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development ./leadmanager/frontend/src/index.js --output ./leadmanager/frontend/static/frontend/main.js",
"build": "webpack --mode production ./leadmanager/frontend/src/index.js --output ./leadmanager/frontend/static/frontend/main.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.3.1",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1"
},
"dependencies": {
"prop-types": "^15.6.2",
"react": "^16.7.0",
"react-dom": "^16.7.0"
}
}
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["transform-class-properties"]
}
我检查了你的源代码,它有一个小错字,它是 getElementById
而不是 getElementByID
。
它在以下文件中的第 10 行
https://github.com/dukarc/django-react-app/blob/master/leadmanager/frontend/src/components/App.js
它对我有效post。
我正在关注这个 tutorial 但我终究无法弄清楚为什么 webpack 无法识别 JSX?希望有人指出我遗漏的愚蠢的事情:)
我的完整代码在这里 https://github.com/dukarc/django-react-app
错误:
\django-react-app\leadmanager\frontend\src\components\App.js: Unexpected token (6:11)
4 | class App extends Component {
5 | render() {
> 6 | return <h1>React App</h1>;
| ^
7 | }
8 | }
我尝试过的东西
- rm -rf node_modules && rm -f package-lock.json && npm install
- 参考教程 github 并仔细检查我是否同步
版本(如果需要会输出更多...这只是我的头脑):
- 节点:10.15.1
- npm: 6.8.0
package.json
{
"name": "lead_manager_react_django",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development ./leadmanager/frontend/src/index.js --output ./leadmanager/frontend/static/frontend/main.js",
"build": "webpack --mode production ./leadmanager/frontend/src/index.js --output ./leadmanager/frontend/static/frontend/main.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.3.1",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1"
},
"dependencies": {
"prop-types": "^15.6.2",
"react": "^16.7.0",
"react-dom": "^16.7.0"
}
}
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["transform-class-properties"]
}
我检查了你的源代码,它有一个小错字,它是 getElementById
而不是 getElementByID
。
它在以下文件中的第 10 行
https://github.com/dukarc/django-react-app/blob/master/leadmanager/frontend/src/components/App.js
它对我有效post。