Kris Rice
Kris Rice

Reputation: 815

Getting error, Unknown option when compiling webpacks

Im trying to build my react code with webpacks and babel. I downloaded a project from Github that combined React with Scala and AKKA (this was my ultimate goal). After hours of updating packages and dealing with issues, I finally had something that built.

I then realised I was missing some balel plugins from my webpacks.config.js. So I added these, and now I get the error:

Error: [BABEL] /Users/_/IdeaProjects/Hydra/src/main/frontend/main.jsx: Unknown option: .name

I am new to babel and React so please bare this in mind.

After some Googling, I found this guide, but i'm not using the plugins mentioned in this post. Should I be? Unknown Option error from Babel in React-Native app

This is my webpack.config.js:

const webpack = require('webpack');
const path = require('path');
const paths = {
    MAIN: path.resolve('src', 'main'),
    NODE_MODULES: path.resolve('src', 'main', 'node', 'node_modules')
}

module.exports = {
    entry: path.join(paths.MAIN, 'frontend', 'main.jsx'),
    output: {
        path: path.join(paths.MAIN, 'webapp', 'js'),
        filename: 'bundle.js',
        library: ['com', 'nudemeth', 'example', 'web']
    },
    module: {
        rules: [{
            test: /\.jsx$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            options: {
                presets: [
                    path.join(paths.NODE_MODULES, '@babel/preset-env'),
                    path.join(paths.NODE_MODULES, '@babel/preset-react'),
                    path.join(paths.NODE_MODULES, "@babel/plugin-proposal-class-properties"),
                    path.join(paths.NODE_MODULES, "@babel/plugin-proposal-decorators"),
                    path.join(paths.NODE_MODULES, "@babel/plugin-proposal-export-namespace-from"),
                    path.join(paths.NODE_MODULES, "@babel/plugin-proposal-function-sent"),
                    path.join(paths.NODE_MODULES, "@babel/plugin-proposal-json-strings"),
                    path.join(paths.NODE_MODULES, "@babel/plugin-proposal-numeric-separator"),
                    path.join(paths.NODE_MODULES, "@babel/plugin-proposal-throw-expressions"),
                    path.join(paths.NODE_MODULES, "@babel/plugin-syntax-dynamic-import")
                ]
            }
        }]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        })
    ],
    resolve: {
        modules: [paths.NODE_MODULES]
    },
    resolveLoader: {
        modules: [paths.NODE_MODULES]
    }
}

And my package.json:

  {
  "name": "node-tasks",
  "version": "1.0.0",
  "description": "to run node tasks",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "nudemeth",
  "license": "ISC",
  "private": true,
  "dependencies": {
    "@babel/core": "^7.26.0",
    "@babel/plugin-transform-runtime": "^7.25.9",
    "@babel/preset-env": "^7.26.0",
    "@babel/preset-react": "^7.26.3",
    "@types/react": "^18.3.16",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-proposal-function-sent": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "@types/react-dom": "^18.3.5",
    "babel-loader": "^9.2.1",
    "core-js": "^3.39.0",
    "history": "^5.3.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router": "^7.0.2",
    "react-router-dom": "^7.0.2",
    "terser-webpack-plugin": "^5.3.10",
    "webpack": "^5.97.1",
    "webpack-cli": "^5.1.4"
  }
}

And finally, by babel.config.json:

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

Thanks for your help!

UPDATE:

So I tried commenting out each plugin inside webpack.config.js one at a time. What I found is that by having any of the commented plugins uncommented, I get the error.

    presets: [
        path.join(paths.NODE_MODULES, '@babel/preset-env'),
        path.join(paths.NODE_MODULES, '@babel/preset-react'),
        // path.join(paths.NODE_MODULES, '@babel/plugin-proposal-decorators'),
        // path.join(paths.NODE_MODULES, '@babel/plugin-proposal-function-sent'),
        // path.join(paths.NODE_MODULES, '@babel/plugin-proposal-throw-expressions'),
        // path.join(paths.NODE_MODULES, '@babel/plugin-syntax-dynamic-import'),
        // path.join(paths.NODE_MODULES, '@babel/plugin-syntax-import-meta'),
        // path.join(paths.NODE_MODULES, '@babel/plugin-transform-class-properties'),
        // path.join(paths.NODE_MODULES, '@babel/plugin-transform-export-namespace-from'),
        // path.join(paths.NODE_MODULES, '@babel/plugin-transform-json-strings'),
        // path.join(paths.NODE_MODULES, '@babel/plugin-transform-numeric-separator'),
        // path.join(paths.NODE_MODULES, '@babel/plugin-transform-runtime')
    ]

Upvotes: 0

Views: 29

Answers (0)

Related Questions