ReactJS 错误：模块构建失败：SyntaxError: Unexpected token '<'

【问题标题】：ReactJS Error: Module Build failed: SyntaxError: Unexpected token '<'ReactJS 错误：模块构建失败：SyntaxError: Unexpected token '<'
【发布时间】：2019-11-05 03:43:23
【问题描述】：

当我尝试编译我的 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"]
}

【问题讨论】：

  • 你在某处配置了 babel-preset-react - babeljs.io/docs/en/babel-preset-react 吗？你的 webpack 配置中没有它，你的 package.json 中也没有。 .babelrc 中有吗？
  • 是的，它在我的 .babelrc 中，但也许我做错了……我只是将它添加到我的问题中。
  • 嗯，它是.babelrc，但不是实际内容。我将名称拼错为 .bablerc。感谢您为我指明正确的方向！
  • 不客气，很高兴为您提供帮助。

标签： reactjs npm webpack


【解决方案1】：

在尝试解决这个问题几个小时后，我终于设法抓住了这个错误。这是一个错字……是的，程序员最大的敌人。我将.babelrc 拼错为.bablerc，这是我问题的根源。谢谢大家的反馈，我现在要尴尬了……

【讨论】：

  • 可能会切换到带有最新 babel 的 babel config json。想看就看
  • 对于 babel 配置，只有一个新的推荐文件格式 - babel.config.js babeljs.io/docs/en/configuration#babelconfigjs 。但是 .babelrc 仍然有效。
  • 谢谢，我去看看！
【解决方案2】：

确保您导入了正确的东西！ vs代码已导入

import { Button , Modal } from "bootstrap";

你应该导入

import { Button , Modal } from "react-bootstrap";

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-11-28
    • 2019-01-08
    • 1970-01-01
    • 2017-12-06
    • 2016-04-09
    • 2018-06-09
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode