Webpack Build SyntaxError: Unexpected token )

Question

Note: I read through the other similar questions (here and others), but they are all about earlier versions of webpack and babel and do not solve the following issue.

This is serving just fine, but when I run npm run build I'm getting the following error. How do I solve this? (And how do I get better errors than this?, the log is just as bad).

> [email protected] 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! [email protected] build: `webpack --mode production`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.

My webpack file looks like this:

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()]
}

My package json looks like this:

{
  "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"
  }

My babelrc file looks like this:

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

My index.js file looks like this:

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

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

My app.js file looks like this:

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

*** Edit: not sure what I was thinking... I totally forgot to add the webpack code before :o ! I guess that was a dyslexic senior moment. It's added now.

What version of Node are you using? Does your code editor show any errors when you open the incriminated file? Have you tried deleting your node_modules and reinstalling them? — Altareos
– Altareos, Commented Jul 17, 2021 at 18:08
@Altareos node v16.5.0 , no errors in the code editor. Yes I've tried deleting the node_modules folder and reinstalling. I'm getting the same error. — Agent Zebra
– Agent Zebra, Commented Jul 17, 2021 at 18:15

Ernesto · Accepted Answer · 2021-07-17 21:25:36Z

2

Just remove the styles import

import "./style.css"

Webpack speaks JavaScript, not css, if you want it to learn it you need to create a webpack config file and use the proper loader to handle css

answered Jul 17, 2021 at 21:25

Ernesto

4,3461 gold badge17 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Agent Zebra Over a year ago

Thanks, you reminded me to actually add the webpack code to the above, which somehow I completely forgot to do when I first posted this :o !

Collectives™ on Stack Overflow

Webpack Build SyntaxError: Unexpected token )

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related