We Keep Coding

Babel-loader not transpiling JSX component. ModuleParseError

I'm trying to build a standalone component as a package. I'm using webpack to transpile all the CSS and JS/JSX files into JS. I'm able to build the package and pack it into a .tgz file using npm pack. However, when I install the package in another project and try using the component from the installed package. I'm getting this error:
ModuleParseError: Module parse failed: Unexpected token (34:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
And, in the terminal of the running project, I get this:
error - SyntaxError: Cannot use import statement outside a module
webpack.config.js
const path = require('path')
module.exports = {
mode:'production',
entry:'./src/components/StandaloneComponent.js',
output:{
path:path.join(__dirname,'dist'),
filename:'StandaloneComponent.js',
libraryTarget:"commonjs2"
},
module:{
rules:[
{
test:/\.js|jsx$/,
exclude:/(node_modules)/,
use:'babel-loader'
},
{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
}
]
},
resolve:{
alias:{
'react':path.resolve(__dirname,'./node_modules/react'),
'react-dom':path.resolve(__dirname,'./node_modules/react-dom'),
'next':path.resolve(__dirname,'./node_modules/next')
}
},
externals:{
react:{
commonjs:"react",
commonjs2:"react",
amd:"React",
root:"React"
},
"react-dom":{
commonjs:"react-dom",
commonjs2:"react-dom",
amd:"ReactDOM",
root:"ReactDOM"
},
next:{
commonjs:"next",
commonjs2:"next",
amd:"Next",
root:"Next"
}
}
}
package.json
{
"name": "testcomponent",
"version": "1.0.3",
"description": "A lightweight and easy to use package.",
"main": "./src/components/StandaloneComponent.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [
"NextJS",
"react"
],
"peerDependencies": {
"next": "^12.0.7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"prop-types": "^15.7.2"
},
"devDependencies": {
"#babel/core": "^7.16.0",
"#babel/preset-env": "^7.16.4",
"#babel/preset-react": "^7.16.0",
"#babel/preset-stage-0": "^7.8.3",
"babel-loader": "^8.2.3",
"css-loader": "^6.5.1",
"next": "^12.0.7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"style-loader": "^3.3.1",
"webpack": "^5.64.4",
"webpack-cli": "^4.9.1"
}
}
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
I further installed this package in another project like this:
npm install path/to/tgz/testcomponent-1.0.3.tgz
And then imported the component as:
import StandaloneComponent from 'testcomponent'
As a possible workaround, I tried changing the extension of the component file from .js to .jsx and rebuilt the .tgz, but got the same result.
Looking at the error, I feel that babel-loader is unable to convert JSX into JS, which further is causing the import error, but I'm not entirely sure about it.
What could be causing this error?
Any help is appreciated.
Thanks.

The regex rule that you are using to load the JS and JSX file i.e. test:/\.js|jsx$/ seems incorrect in this case. You can fix it in following two ways:
Using capture groups: So when using or you need to capture the both the character sets as /\.(js|jsx)$/. This will consider both js and jsx extension. The earlier version just doesnt match the regex properly because of missing character set.
Using ? occurrence: You can also modify your regex to use the x as an zero or one occurrence using ? matcher. So the other option will be /\.jsx?$/

I believe you need to include the package you installed under include otherwise it looks like Webpack is configured to ignore your node_modules folder:
exclude: /(node_modules)/,
So make sure to let Webpack know what folders in node_modules that you do want to compile
include: [
path.resolve(__dirname, 'node_modules/testcomponent'
]

"TypeError: Invalid value used in weak set" while build using webpack

I'm trying to add scss to the project. I want to build css files from scss ones, but I get an error that says "TypeError: Invalid value used in weak set" since I added MiniCssExtractPlugin.
Here's my webpack.config.js:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const config = {
// TODO: Add common Configuration
module: {},
};
const js = Object.assign({}, config, {
name: 'js',
entry: path.resolve(__dirname, 'index.js'),
output: {
path: path.resolve(__dirname, '../some/path/here'),
filename: 'main.js',
},
});
const scss = Object.assign({}, config, {
name: 'scss',
entry: path.resolve(__dirname, './scss/styles.scss'),
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
}),
],
module: {
rules: [
{
test: /\.(s*)css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
},
},
],
},
],
},
output: {
path: path.resolve(__dirname, '../some/path/here'),
filename: 'styles.css',
},
});
module.exports = [js, scss];
I googled a lot but didn't find any answers.
I use Node.js v 8.4.0.
Console output (There is more, but I think this is enough):
TypeError: Invalid value used in weak set
at WeakSet.add (native)
at MiniCssExtractPlugin.apply (/path/path/path/path/path/path/path/node_modules/mini-css-extract-plugin/dist/index.js:362:18)
PS: I'm new to webpack, so I'll be glad if you help me to make this code better. The main idea is to keep js compilation the same and add scss compilation. I also want to compile included scss files as separated ones.
PSS: If you need more information, I'll provide some, coz idk what else can be useful.

Maybe the latest mini-css-extract-plugin version has bugs. And I tried to use another version of this package. And its Worked!!!
Remove your last package version:
npm uninstall mini-css-extract-plugin
Download this version 0.9.0 (its worked for me):
npm i --save-dev mini-css-extract-plugin#0.9.0
*optionally (--save-dev)
checkout all versions:
mini-css-extract-plugin/all-versions

This is most likely due to either a bug or an incompatible version of webpack, e.g. upgrading to the current major v2.0.0 releases on webpack 4.
For more information, please check the changelog for breaking changes and fixes.

I think you'll need to downgrade some other plugins as well. I was following a tutorial when I had the same error. This is what worked for me:
{
"name": "recipe-blocks",
"scripts": {
"dev": "cross-env BABEL_ENV=default webpack --watch",
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack -p"
},
"main": "index.js",
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-transform-react-jsx": "^7.2.0",
"#wordpress/babel-preset-default": "^3.0.1",
"babel-loader": "^8.0.4",
"classnames": "^2.2.6",
"cross-env": "^5.1.5",
"css-loader": "^2.1.1",
"mini-css-extract-plugin": "^0.6.0",
"node-sass": "^4.12.0",
"raw-loader": "^2.0.0",
"sass-loader": "^7.1.0",
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2"
},
"version": "1.0.0",
"license": "MIT"
}
Then Run:
npm install
npm run dev

Duplicate ReactJS import issue when using npm link to test component before publishing as npm package

I have a simple component like this.
import React, {useState} from 'react';
function MyComponentWithState(props) {
const [value, setValue] = useState(0);
return (
<p>My value is: {value}</p>
)
}
export default MyComponentWithState;
and I want to publish it on NPM as a separate package. so, to do that I prepared package.json and webpack.config.js like below.
package.json:
{
"name": "try-to-publish",
"version": "0.0.1",
"description": "Just a test",
"main": "build/index.js",
"scripts": {
"start": "webpack --watch",
"build": "webpack"
},
"author": {
"name": "Behnam Azimi"
},
"license": "ISC",
"peerDependencies": {
"react": "16.9.0",
"react-dom": "16.9.0"
},
"dependencies": {
"react": "16.9.0",
"react-dom": "16.9.0",
"prop-types": "15.7.2",
"react-scripts": "3.1.1",
"webpack": "4.39.3"
},
"devDependencies": {
"#babel/core": "7.6.0",
"#babel/plugin-proposal-class-properties": "7.5.5",
"#babel/preset-env": "7.6.0",
"#babel/preset-react": "7.0.0",
"babel-loader": "8.0.6",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-plugin-transform-react-jsx": "6.24.1",
"css-loader": "3.2.0",
"node-sass": "4.12.0",
"sass-loader": "8.0.0",
"style-loader": "1.0.0",
"webpack-cli": "3.3.8",
"webpack-external-react": "^1.1.2"
}
}
webpack.config.json:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'index.js',
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
include: path.resolve(__dirname, 'src'),
use: {
loader: "babel-loader"
}
},
]
},
resolve: {
alias: {
'react': path.resolve(__dirname, 'node_modules/react'),
'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
}
},
externals: {
'react': "commonjs react",
'react-dom': "commonjs react-dom"
},
};
and here is my .babelrc:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": ["#babel/plugin-proposal-class-properties"]
}
These configs work like charm when I publish my component to NPM and install it in my another ReactJs project with `npm install , but my point is the local test!
I want to test this component/lib before publish. To do this I use npm link feature to link my component with my main ReactJS project.
As you saw above, my component is functional and I used hooks too. So when I inject the locally linked lib to my main ReactJs project face this error,
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
My issue is related to the 3td reason. My project uses ReactJs and import it once and also my component will import React! I mean twice React import in one project!.
I also have externals config about react and react-dom in my Webpack config.
What should I do to solve that? Where is my mistake?
Update:
I also tried what #sung-m-kim and #eddie-cooro say but it not worked! Mean, I change the package.json and removed react and react-dom from dependencies and add them to devDpendencies.

I finally solved this problem by these steps.
run npm link inside
<your-library-package>/node_modules/react
also
run npm link inside
<your-library-package>/node_modules/react-dom
then run npm link react and npm link react-dom inside your application root directory
and dont forget to keep react and react-dom as externals in the library
// webpack.config.js
const externals = {
"react": "react",
"react-dom": "react-dom",
}
module.exports = {
.
.
.
externals
}

I solved my issue. I used RollupJS instead of Webpack for bundling as bundle tool.
Here is my rollup.config.js:
import {uglify} from 'rollup-plugin-uglify'
import babel from 'rollup-plugin-babel'
export default {
input: "./src/index.js",
external: ['react', 'react-dom'],
output: {
name: 'test-lib',
format: "cjs",
},
plugins: [
babel({
exclude: "node_modules/**"
}),
uglify(),
],
};
and my package.json:
{
"name": "test-lib",
"version": "1.0.0",
"main": "dist/test-lib.min.js",
"scripts": {
"build": "rollup -c -o dist/test-lib.min.js"
},
"author": "Behnam Azimi",
"license": "ISC",
"peerDependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0"
},
"devDependencies": {
"#babel/core": "^7.6.0",
"#babel/preset-env": "^7.6.0",
"#babel/preset-react": "^7.0.0",
"rollup": "^1.21.4",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-uglify": "^6.0.3"
}
}
After these changes, npm link worked truly in my ReactJS (Hooks) project.
Notice that it's just a simple Rollup config to show my solution and you can add many kinds of stuff like hot reloading, styles loaders, and many other plugins to the config.

Set the react and react-native packages only inside of the peerDependencies part of package.json, not the dependencies. Also for local development (When your package is not included in any other react projects and you want to to run it locally), you can use the devDependencies field.

I resolve this problem in a typescript react project.
probably, when use the npm link use the react from main app project and the component project.
So, in your package.json remove react from dependencies and/or devDependencies
Check the answer: https://stackoverflow.com/a/62807950/5183591

Error: File to import not found or unreadable: ~bootstrap/scss/bootstrap

I followed the instructions at getbootstrap.com thinking that everything would just work. It isn't so far :\
Everything seems to be fine until I try to load the page, at which point my Express.js app throws the error
[[sass] error: File to import not found or unreadable: ~bootstrap/scss/bootstrap.
Parent style sheet: .../sass/app.scss at options.error (.../node-sass/lib/index.js:291:26)
I have tried npm install, restarting my server, looking on Google, StackOverflow (yes, I know there are quite a few similar questions, but none of them answer my question), the Bootstrap 4 GitHub issue pages and so far I haven't been able to come up with the answer.
Could it be that I installed the dependencies in the wrong place? (Dev instead of production or vis-à-vis)
Why am I getting this error??
My webpack.config.js file looks like this...
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/public',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader', // inject CSS to page
}, {
loader: 'css-loader', // translate CSS into CommonJS modules
}, {
loader: 'postcss-loader', // run post CSS actions
options: {
plugins: function () { // post css plugins, can be exported to postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader' // compile Sass to CSS
}]
}
]
}
};
My package.json file
...
"scripts": {
"start": "nodemon --exec babel-node server.js --ignore public/",
"dev": "webpack -wd",
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"axios": "^0.17.1",
"bootstrap": "^4.0.0",
"ejs": "^2.5.7",
"express": "^4.16.2",
"jquery": "^3.3.1",
"mongoose": "^5.0.0",
"node-sass-middleware": "^0.11.0",
"popper.js": "^1.12.9",
"precss": "^3.1.0",
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"autoprefixer": "^7.2.5",
"babel-cli": "^6.26.0",
"babel-eslint": "^8.2.1",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.9",
"eslint": "^4.15.0",
"eslint-plugin-react": "^7.5.1",
"node-sass": "^4.7.2",
"nodemon": "^1.14.11",
"postcss-loader": "^2.0.10",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.1",
"webpack": "^3.10.0"
}
}
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
};
and inside app.scss I have
#import "custom";
#import "~bootstrap/scss/bootstrap";

When Sass is precompiled by its own CLI, it processes #imports by itself, and sometimes thus doesn’t understand ~ notation. So you can import "node_modules/bootstrap/scss/bootstrap"; in first place and replaced the ~
notation with node_modules/ instead.

I had a similar error
File to import not found or unreadable:
node_modules/bootstrap-sass/assets/stylesheets/bootstrap
Just add "bootstrap-sass": "^3.3.7", to devDependencies at yours package.json, ad run npm update, npm install in your project directory.

For me, I had to change the way I was importing
#import '../../../node_modules/bootstrap/scss/bootstrap';
Then it works

In Rails 7.0.1, after installing using rails new myapp --css=bootstrap, the same error occured. The problem was solved by:
Replacing the line with stylesheet_link_tag in application.erb by: stylesheet_link_tag "application.bootstrap", "data-turbo-track": "reload"
renaming app/assets/stylesheets/application.scss by app/assets/stylesheets/application.bootstrap.scss
Replacing the content by #import '../../../node_modules/bootstrap/scss/bootstrap';

I am not using webpack, but I got the same error when I try to import bootstrap in my scss file like this:
#import 'bootstrap';
It would work if I just import it like this in my case:
#import "../../../../../bootstrap/scss/bootstrap";
But since That is not clean enough to my liking, I found out I could alter my gulp scss task from:
.pipe(plugins.sass())
to:
.pipe(plugins.sass({
outputStyle: 'nested',
precision: 3,
errLogToConsole: true,
includePaths: ['node_modules/bootstrap/scss']
}))
(notice the includePaths section) and now I can just use
#import 'bootstrap';
In my scss file

I am using Solidus and on the very first while getting bootstrap works with the solidus faced the same issue.
The below thing works for me as we have to show the full path where the bootsrap is.
#import "../../../../../node_modules/bootstrap/scss/bootstrap";

I had a similar problem and the fix for me was very basic in the end.
I just had to change "../node_modules/bootstrap/scss/bootstrap"; to "node_modules/bootstrap/scss/bootstrap";.

This happens when you give import from node_modules in any scss file other than the base root style.scss. Try placing it in the root style.scss, it should do it.

If you are having any issue and the answers fail to resolve try this:
Open up your scss file that tries to import.
Rectify the address of the import it might be trying from differnt space.

I solved the problem by:
remove node_modules
npm install
ng serve
works ;)

I just run npm i bootstrap and it worked.

This is similar to my problem, npx mix fail to import bootsrtap with error;
SassError: Can't find stylesheet to import.
Turns out my application root folder name using "#" that caused npx consider as unusual path and fail to import
npx mix error
Solution:
Rename the folder (remove "#")
Good to go
Hope this helps

ReferenceError: Unknown plugin "react-html-attrs" specified

I have tried all the way to run sample Module-Loader program based on YouTube but even after following with all the links in stackoverflow regarding this, am unable to fix the issue.Please find the details of my project below,
My Project Structure:
**package.json**
{
"name": "react-tutorials",
"version": "0.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.3.13",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.16.0",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"webpack": "^1.12.9",
"webpack-dev-middleware": "^1.8.4",
"webpack-dev-server": "^1.14.1",
"webpack-hot-middleware": "^2.12.2"
},
"devDependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.3.13",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.16.0",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"webpack": "^1.12.9",
"webpack-dev-middleware": "^1.8.4",
"webpack-dev-server": "^1.14.1",
"webpack-hot-middleware": "^2.12.2"
},
"scripts": {
"dev": "./node_modules/.bin/webpack-dev-server --content-base src --inline --hot",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
webconfig.js
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
module.exports = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/scripts.js",
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
}
}
]
},
output: {
path: __dirname + "/js",
filename: "scripts.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
Exception trace:
D:\Software\Ping\react-js-tutorials-master\react-js-tutorials-master\1-basic-rea
ct>webpack
Hash: 826e21c818de1882d366
Version: webpack 1.13.2
Time: 1424ms
+ 1 hidden modules
ERROR in ./js/scripts.js
Module build failed: ReferenceError: Unknown plugin "react-html-attrs" specified
in "base" at 0, attempted to resolve relative to "D:\\Software\\Ping\\react-js-
tutorials-master\\react-js-tutorials-master\\1-basic-react\\js"
at D:\Software\Ping\react-js-tutorials-master\react-js-tutorials-master\1-ba
sic-react\node_modules\babel-core\lib\transformation\file\options\option-manager
.js:176:17
at Array.map (native)
at Function.normalisePlugins (D:\Software\Ping\react-js-tutorials-master\rea
ct-js-tutorials-master\1-basic-react\node_modules\babel-core\lib\transformation\
file\options\option-manager.js:154:20)
at OptionManager.mergeOptions (D:\Software\Ping\react-js-tutorials-master\re
act-js-tutorials-master\1-basic-react\node_modules\babel-core\lib\transformation
\file\options\option-manager.js:228:36)
at OptionManager.init (D:\Software\Ping\react-js-tutorials-master\react-js-t
utorials-master\1-basic-react\node_modules\babel-core\lib\transformation\file\op
tions\option-manager.js:373:12)
at File.initOptions (D:\Software\Ping\react-js-tutorials-master\react-js-tut
orials-master\1-basic-react\node_modules\babel-core\lib\transformation\file\inde
x.js:221:65)
at new File (D:\Software\Ping\react-js-tutorials-master\react-js-tutorials-m
aster\1-basic-react\node_modules\babel-core\lib\transformation\file\index.js:141
:24)
at Pipeline.transform (D:\Software\Ping\react-js-tutorials-master\react-js-t
utorials-master\1-basic-react\node_modules\babel-core\lib\transformation\pipelin
e.js:46:16)
at transpile (D:\Software\Ping\react-js-tutorials-master\react-js-tutorials-
master\1-basic-react\node_modules\babel-loader\index.js:38:20)
at Object.module.exports (D:\Software\Ping\react-js-tutorials-master\react-j
s-tutorials-master\1-basic-react\node_modules\babel-loader\index.js:131:12)

Try npm install babel-plugin-react-html-attrs --save
and while you're at it,
$npm install babel-plugin-transform-class-properties --save
For some reason the name is shortened in the error message.
These help process attributes and class names from html pasted in as JSX codes. The syntax needs to be adapted to JSX.
See https://github.com/insin/babel-plugin-react-html-attrs/blob/master/README.md
Oops, now I see these in your package.json (tldr). Somehow these errors got fixed for me by doing the npm installs.

I cloned the same repository from learnCodeAcademy, and got issues when try run webpack , I did the following step by step till i got the webpack command ran without any issue.
npm install webpack --save-dev
npm install webpack-dev-server --save-dev
npm install babel-loader --save-dev
npm install babel-core --save-dev
npm install babel-plugin-react-html-attrs --save-dev
npm install babel-plugin-transform-decorators-legacy --save-dev
npm install babel-plugin-transform-class-properties --save-dev
npm install babel-preset-react --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-stage-0 --save-dev
npm install react-dom --save-dev
npm install react --save-dev
And when i ran webpack command , i got the following result :
Hash: c323a36a23de43f8c0cf
Version: webpack 1.15.0
Time: 2186ms
Asset Size Chunks Chunk Names
client.min.js 1.76 MB 0 [emitted] main
+ 163 hidden modules
Then you can run it using npm run dev
as on package.json the script mapped as below :
"dev": "webpack-dev-server --content-base src --inline --hot"
I also modified the webpack.config.js the entry section as followed:
entry: {
javaScript: './js/client.js',
html: './index.html'
}
This is the result after running npm run dev
output
I hope this will help, if i answered your question, kindly mark it.
Thanks.