Webpack Build SyntaxError: Unexpected token )

编程问答 2022-11-21

问题描述

注意：我通读了其他类似的问题（here 和其他），但它们都是关于早期版本的 webpack 和 babel，并没有解决以下问题。

这很好，但是当我运行 npm run build 时，我收到以下错误。我该如何解决这个问题？ （我怎样才能得到比这更好的错误？，日志也一样糟糕）。

> react_01@1.0.0 build /Users/monkeydo/Documents/code/__tests/react_01
> webpack --mode production

/Users/monkeydo/Documents/code/__tests/react_01/node_modules/webpack-cli/bin/cli.js:41
                )} manually.`,^

SyntaxError: Unexpected token )
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:549:28)
    at Object.Module._extensions..js (module.js:586:10)
    at Module.load (module.js:494:32)
    at tryModuleLoad (module.js:453:12)
    at Function.Module._load (module.js:445:3)
    at Module.require (module.js:504:17)
    at require (internal/module.js:20:19)
    at runcli (/Users/monkeydo/Documents/code/__tests/react_01/node_modules/webpack/bin/webpack.js:69:2)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react_01@1.0.0 build: `webpack --mode production`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the react_01@1.0.0 build script.

我的 webpack 文件如下所示：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  //entry: ['@babel/polyfill','./src/index.js'],entry: './src/index.js',// Where files should be sent once they are bundled
 output: {
   path: path.join(__dirname,'/dist'),filename: 'index.bundle.js'
 },// webpack 5 comes with devServer which loads in development mode
 devServer: {
   port: 3000,watchContentBase: true
 },// Rules of how webpack will take our files,complie & bundle them for the browser
 module: {
   rules: [
     {
       test: /\.(js|jsx)$/,// test: /\.jsx?/,exclude: /nodeModules/,use: {
         loader: 'babel-loader',query:
           {
             presets:['react','preset-env']
           }
       }
     },{
       test: /\.css$/,use: [MiniCssExtractPlugin.loader,'css-loader']
     }
   ]
 },plugins: [new HtmlWebpackPlugin({ template: './src/index.html' }),new MiniCssExtractPlugin()]
}

我的包 json 如下所示：

{
  "name": "react_01","version": "1.0.0","description": "","main": "index.jsx","scripts": {
    "serve": "webpack serve --mode development","build": "webpack --mode production"
  },"author": "","license": "ISC","devDependencies": {
    "@babel/core": "^7.14.6","@babel/preset-env": "^7.14.7","@babel/preset-react": "^7.14.5","babel-loader": "^8.2.2","css-loader": "^6.0.0","file-loader": "^6.2.0","html-webpack-plugin": "^5.3.2","mini-css-extract-plugin": "^2.1.0","style-loader": "^3.1.0","webpack": "^5.45.1","webpack-cli": "^4.7.2","webpack-dev-server": "^3.11.2"
  },"dependencies": {
    "react": "^17.0.2","react-dom": "^17.0.2"
  }

我的 babelrc 文件如下所示：

{
  "presets": [
      "@babel/preset-env","@babel/preset-react"
  ]
}

我的 index.js 文件如下所示：

import React from "react"
import ReactDom from "react-dom"
import App from "./components/app"
import "./style.css"

ReactDom.render(<App />,document.getElementById('app'))

我的 app.js 文件如下所示：

import React from "react"

function App() {
    return (<div>
        <h2>Welcome to My new React App</h2>
        <h3>Date : {new Date().toDateString()}</h3>
    </div>)
}

export default App

*** 编辑：不知道我在想什么...我完全忘了在 :o 之前添加 webpack 代码！我想那是一个阅读障碍的高级时刻。现已添加。

解决方法

只需删除样式导入

导入“./style.css”

Webpack 使用 JavaScript，而不是 css，如果你想让它学习它，你需要创建一个 webpack 配置文件并使用适当的加载器来处理 css

babel-loaderjavascriptreactjsreactjsreactjsreactjswebpackwebpackwebpack