我尝试编译它时,我的ReactJS代码抛出错误。我以前使用过ReactJS,但从未遇到此错误(见下文)
ERROR in ./kapiche/@kapiche_react/teacher/login.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /mnt/d/src/kapiche/@kapiche_react/teacher/login.jsx: Unexpected token (59.6)
57 | render() {
58 | return (
> 59 | <div>
| ^
60 | Hello world
61 | </div>
62 | );
at Parser.raise (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:6420:17)
at Parser.unexpected (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:7773:16)
at Parser.parseExprAtom (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8996:20)
at Parser.parseExprSubscripts (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8556:23)
at Parser.parseMaybeUnary (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8536:21)
at Parser.parseExprOps (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8402:23)
at Parser.parseMaybeConditional (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8375:23)
at Parser.parseMaybeAssign (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8325:21)
at Parser.parseParenAndDistinguishExpression (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:9133:28)
at Parser.parseExprAtom (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8917:21)
at Parser.parseExprSubscripts (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8556:23)
at Parser.parseMaybeUnary (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8536:21)
at Parser.parseExprOps (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8402:23)
at Parser.parseMaybeConditional (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8375:23)
at Parser.parseMaybeAssign (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8325:21)
at Parser.parseExpression (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8275:23)
at Parser.parseReturnStatement (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10378:28)
at Parser.parseStatementContent (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10057:21)
at Parser.parseStatement (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10009:17)
at Parser.parseBlockOrModuleBlockBody (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10585:25)
at Parser.parseBlockBody (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10572:10)
at Parser.parseBlock (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10556:10)
at Parser.parseFunctionBody (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:9584:24)
at Parser.parseFunctionBodyAndFinish (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:9554:10)
at Parser.parseMethod (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:9508:10)
at Parser.pushClassMethod (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10987:30)
at Parser.parseclassMemberWithIsStatic (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10912:12)
at Parser.parseclassMember (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10851:10)
at /mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10806:14
at Parser.withTopicForbiddingContext (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:9884:14)
at Parser.parseclassBody (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10783:10)
at Parser.parseclass (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10757:22)
at Parser.parseStatementContent (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10051:21)
at Parser.parseStatement (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10009:17)
at Parser.parseBlockOrModuleBlockBody (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10585:25)
at Parser.parseBlockBody (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10572:10)
这是我的webpack.config.js,用于定义入口点和输出点。
// create proper string representing path to file
const path = require('path');
// files to export
let export_list = [];
// helpful log message for debugging
console.log('webpack watch starting for the files:\n');
// general files
const export_dict = {
'student': ['login'],'teacher': ['login']
};
// loop through all directories and files in export dictionary
for (let [key,value] of Object.entries(export_dict)) {
for (let i = 0; i < export_dict[key].length; i++) {
// helpful log message for debugging
console.log(`entry:\t/kapiche/@kapiche_react/${key}/${value[i]}.jsx`);
console.log(`output:\t/kapiche/static/js/${key}/${value[i]}_compiled.js\n`);
// add object to export list
export_list.push(
{
entry: `./kapiche/@kapiche_react/${key}/${value[i]}.jsx`,output: {
path: path.join(__dirname,`/kapiche/static/js/${key}/`),filename: `${value[i]}_compiled.js`,},module: {
rules: [
{
test: /\.(js|jsx)$/,exclude: /node_modules/,use: ['babel-loader']
}
]
},resolve: {
extensions: ['*','.js','.jsx']
},}
)
}
}
console.log(export_list);
// list of exports
module.exports = export_list;
这是我要编译的ReactJS文件(在jsx中)
import React from 'react';
import ReactDOM from 'react-dom';
class LoginTeacher extends React.Component {
constructor(props) {
super(props);
this.state = { };
}
componentDidmount() {
}
render() {
return (
<div>
Hello world
</div>
);
}
}
ReactDOM.render(
<LoginTeacher/>,document.getElementById('login'),);
最后,这是我的package.json
{
"name": "kapiche","version": "1.0.0","description": "Promoting classroom communication","main": "webpack.config.js","scripts": {
"watch": "webpack --watch --mode production","start": "webpack-dev-server --open --hot --mode development","build": "webpack --mode production"
},"repository": {
"type": "git","url": "git+https://github.com/jbseg/BlueSlide.git"
},"author": "Joshua S,Riley C,Hannah Z,Xiangliang N","license": "MIT","bugs": {
"url": "https://github.com/jbseg/BlueSlide/issues"
},"homepage": "https://github.com/jbseg/BlueSlide#readme","devDependencies": {
"@babel/core": "^7.6.4","@babel/preset-env": "^7.6.3","@babel/preset-react": "^7.6.3","babel-loader": "^8.0.6","css-loader": "^3.2.0","html-loader": "^0.5.5","html-webpack-plugin": "^3.2.0","sass": "^1.23.3","style-loader": "^1.0.0","webpack": "^4.41.2","webpack-cli": "^3.3.10","webpack-dev-server": "^3.9.0"
},"dependencies": {
"@material-ui/core": "^4.5.2","@material-ui/icons": "^4.5.1","chart.js": "^2.9.2","react": "^16.11.0","react-chartjs-2": "^2.8.0","react-dom": "^16.11.0","react-tabs": "^3.0.0","socket.io": "^2.3.0"
}
}
有什么想法可能导致此错误?
编辑:这也是我的.babelrc
{
"presets": ["@babel/preset-env","@babel/preset-react"]
}