Each time I come back to work with JavaScript, I struggle with webpack and transpilers. I need help here, I am stuck. Webpack is not finding appropriate loader even when specified.
webpack.config.js
const path = require( "path" );
module.exports = {
entry: "./app.js",
output: {
filename: "starmap.js",
path: path.resolve(__dirname, "../asset/js/" )
},
mode : "development",
module : {
rules : [
{
test: /\\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: [ "@babel/preset-env", "@babel/preset-react" ]
}
}
]
}
}
package.json
{
"name": "editor",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.0",
"react-dom": "^17.0.0"
},
"devDependencies": {
"@babel/cli": "^7.12.1",
"@babel/core": "^7.12.3",
"@babel/preset-env": "^7.12.1",
"@babel/preset-react": "^7.12.1",
"@webpack-cli/init": "^1.0.2",
"babel-loader": "^8.1.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"css-loader": "^5.0.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.0.0",
"webpack": "^5.1.3",
"webpack-cli": "^4.1.0"
}
}
app.js
import React from "react"
import { render } from "react-dom"
class Starmap extends React.Component {
constructor() {
super()
this.state = []
}
render() {
return "Hello world"
}
}
render( <Starmap />, document.getElementById("customizer"))
.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
When I run webpack
, I get this error:
ERROR in ./app.js 15:8
Module parse failed: Unexpected token (15:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
|
> render( <Starmap />, document.getElementById("_customizer"))
But running npx babel app.js
transpiles successfully. Is something wrong with my webpack config, I have watched carefully, everything seems okay.
It seems that your js is not being handled by the babel-loader. I believe the issue is in your test regex
change
to