Reputation: 815
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