Question

我请求你的帮助

我正在尝试使用 react 和 webpack 来设置一个基本的 Web 应用程序。就目前而言，我刚刚将基本框架放在一起，但是运行构建似乎总是会导致以下错误：

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\Develop\reactapp\react-youtube\src\index.js: Unexpected token, expected "," (1:8)

> 1 | [object Object]
    |         ^
    at Object._raise (D:\Develop\reactapp\react-youtube\node_modules\@babel\parser\lib\index.js:775:17)
    at Object.raiseWithData (D:\Develop\reactapp\react-youtube\node_modules\@babel\parser\lib\index.js:768:17)
    at Object.raise (D:\Develop\reactapp\react-youtube\node_modules\@babel\parser\lib\index.js:736:17)
    at Object.unexpected (D:\Develop\reactapp\react-youtube\node_modules\@babel\parser\lib\index.js:9716:16)
    at Object.expect (D:\Develop\reactapp\react-youtube\node_modules\@babel\parser\lib\index.js:9702:28)
    at Object.parseExprList (D:\Develop\reactapp\react-youtube\node_modules\@babel\parser\lib\index.js:11803:14)
    at Object.parseArrayLike (D:\Develop\reactapp\react-youtube\node_modules\@babel\parser\lib\index.js:11707:26)
    at Object.parseExprAtom (D:\Develop\reactapp\react-youtube\node_modules\@babel\parser\lib\index.js:11017:23)
    at Object.parseExprAtom (D:\Develop\reactapp\react-youtube\node_modules\@babel\parser\lib\index.js:5173:20)
    at Object.parseExprSubscripts (D:\Develop\reactapp\react-youtube\node_modules\@babel\parser\lib\index.js:10689:23)

我的源文件：

/webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: path.join(__dirname, 'public')
  },
  module: {
      rules: [
        {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: ['babel-loader', 'babel-plugin-transform-react-jsx']
        },
        {
            test: /\.(?:|gif|png|jpg|jpeg|svg)$/,
            use: ['file-loader'],
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
        },
        {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader'],
        }
      ]
  }
};

./src/index.js

import ReactDOM from 'react-dom';
import React from 'react';
import App from './App';
import * as serviceWorker from './serviceWorker';
/*require('file-loader?name=[name].ext!./index.html');*/
import './index.scss';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

[object Object] 是什么意思？在 index.js 文件中没有这样的东西

Answer 1

我解决了这个问题，需要从 /webpack.config.js 中删除 'babel-plugin-transform-react-jsx'

WebPack SyntaxError Unexpected token, expected "," [object Object]

1 个答案: