Develop Reference

Webpack build results Terser Error: Unexpected token: punc ())

I've been cleaning up my npm audit errors and after I was done I could not execute npm tun build anymore.
Error
ERROR in web/themes/custom/js/funds-chunk.js from Terser
Unexpected token: punc ()) [webpack://./node_modules/source-map-loader/dist/cjs.js!./frontend/js/shared/select2.countSelectionAdapter.js:18,0][web/themes/custom/js/funds-chunk.js:26214,4]
at ne (/node_modules/terser/dist/bundle.min.js:1:19592)
at c (/node_modules/terser/dist/bundle.min.js:1:28298)
at l (/node_modules/terser/dist/bundle.min.js:1:28389)
at f (/node_modules/terser/dist/bundle.min.js:1:28442)
at /node_modules/terser/dist/bundle.min.js:1:38167
at x (/node_modules/terser/dist/bundle.min.js:1:38198)
at O (/node_modules/terser/dist/bundle.min.js:1:34874)
at U (/node_modules/terser/dist/bundle.min.js:1:42405)
at me (/node_modules/terser/dist/bundle.min.js:1:48326)
at /terser/dist/bundle.min.js:1:49206
package.json
{
...
"scripts": {
"build": "webpack --config webpack.config.js --env production",
},
"devDependencies": {
"#babel/core": "^7.10.4",
"#types/jquery": "^3.5.1",
"babel-loader": "^8.1.0",
"css-loader": "^3.6.0",
"file-loader": "^6.0.0",
"image-webpack-loader": "^6.0.0",
"mini-css-extract-plugin": "^1.6.2",
"prettier": "2.8.1",
"sass": "1.32",
"sass-loader": "^9.0.2",
"scss-loader": "0.0.1",
"terser-webpack-plugin": "^3.0.6",
"ts-loader": "^8.0.18",
"typescript": "^4.2.3",
"webpack-cli": "^4.7.2",
"webpack-merge": "^5.0.8"
},
"dependencies": {
"#popperjs/core": "^2.9.2",
"#types/bootstrap": "^5.0.12",
"#types/googlemaps": "^3.43.3",
"#types/iframe-resizer": "^3.5.9",
"#types/js-cookie": "^3.0.0",
"#types/requirejs": "^2.1.32",
"autoprefixer": "^9.8.5",
"bootstrap": "^4.0.0",
"filemanager-webpack-plugin": "^8.0.0",
"fork-ts-checker-webpack-plugin": "^6.2.0",
"highcharts": "^9.3.3",
"highlight.js": "^10.1.1",
"iframe-resizer": "^3.5.5",
"jquery": "^3.5.1",
"jquery-quicksand": "^1.6.0",
"js-cookie": "^3.0.1",
"loader-utils": "^2.0.3",
"parsleyjs": "^2.9.2",
"popper.js": "^1.0.8",
"postcss-loader": "^3.0.0",
"query-string": "^7.0.1",
"select2": "^4.0.13",
"slick-carousel": "^1.8.1",
"source-map-loader": "^2.0.1",
"swiper": "^6.5.3 <6.8",
"tippy.js": "^6.2.6",
"webpack": "^5.30.0"
},
"overrides": {
"got": "12.1.0",
"semver-regex#<3.1.4": "3.1.4",
"semver-regex#>=4.0.0 <4.0.3": "4.0.3",
"trim-newlines": "4.0.1",
"minimist": "1.2.6",
"terser#<4.8.1": "4.8.1",
"terser#>=5.0.0 <5.14.2": "5.14.2",
"nth-check": "2.0.1",
"minimatch": "3.0.5"
}
}
webpack.config.prod.js
const TerserPlugin = require('terser-webpack-plugin');
const path = require('path');
module.exports = {
mode: 'production',
devtool: 'source-map',
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
parallel: false,
terserOptions: {
ecma: 5, // IE11
compress: true,
output: {
comments: false,
beautify: false
}
}
})
]
},
module: {
rules: [{
test: /images.*\.(jpg|jpeg|gif|png|svg|webp)$/i,
use: info => {
const theme = path.basename(info.issuer, path.extname(info.issuer));
return [{
loader: "file-loader",
options: {
outputPath: url => path.join('/web/themes/custom', theme, 'dist/images', url),
name: "[name].[ext]",
publicPath: '../images'
},
},
]
}
}]
}
};
I've looked into these:
https://github.com/webpack-contrib/terser-webpack-plugin/issues/114,
https://github.com/jantimon/html-webpack-plugin/issues/1262 but I do not use uglify or html-minifier.
https://github.com/webpack/webpack/issues/14662 updated webpack from 5.30.0 to version 5.75 did not help
Webpack 5 - "Unexpected token: punc (.)" after import axios adding mode: web didn't do a thing

Why does it seem the whole core-js library is being bundled with my webpack setup?

I am using Webpack with Babel, and #babel/preset-env to hopefully import only required polyfills that I need. It seems though that the entire library is being installed, resulting in a large bundle (~250kb)
My package.js:
{
"name": "holidaynewtheme",
"version": "0.1",
"description": "Starter theme for holidaynewbase",
"private": true,
"main": "webpack.config.js",
"dependencies": {
"core-js": "^3.6.5",
"element-closest": "^3.0.2",
"flickity": "^2.2.1",
"gsap": "^3.4.2",
"js-cookie": "^2.2.1",
"turbolinks": "^5.2.0",
"vanilla-lazyload": "^17.1.0",
"whatwg-fetch": "^3.4.0"
},
"devDependencies": {
"#babel/core": "^7.11.0",
"#babel/plugin-transform-runtime": "^7.8.3",
"#babel/preset-env": "^7.8.4",
"#babel/runtime": "^7.8.4",
"#shopify/theme-cart": "^3.0.3",
"#shopify/theme-product": "^3.0.3",
"#shopify/theme-product-form": "^3.0.3",
"#shopify/themekit": "^1.1.3",
"autoprefixer": "^9.7.4",
"babel-loader": "^8.0.6",
"bluebird": "^3.5.3",
"copy-webpack-plugin": "^5.1.1",
"cross-env": "^7.0.2",
"css-loader": "^3.4.2",
"eslint": "^6.8.0",
"file-loader": "^3.0.1",
"glob": "^7.1.6",
"html-includes": "^4.3.3",
"mini-css-extract-plugin": "^0.9.0",
"modernizr": "^3.6.0",
"modernizr-loader": "^1.0.1",
"node-sass": "^4.13.1",
"postcss-loader": "^3.0.0",
"pre-commit": "^1.2.2",
"sass-loader": "^8.0.2",
"svg-symbols": "^1.0.5",
"url-loader": "^1.1.2",
"webpack": "^4.41.6",
"webpack-bundle-analyzer": "^3.8.0",
"webpack-cli": "^3.3.11",
"webpack-shell-plugin-next": "^1.1.5"
},
"browserslist": [
"last 1 version",
"> 2%",
"Explorer >= 11"
]
}
My babel.config.json:
{
"presets": [
[
"#babel/preset-env",
{
useBuiltIns: "entry",
debug: true,
corejs: "3.6.4"
}
]
],
"plugins": [
"#babel/plugin-transform-runtime"
]
}
I have the following imports set up in my main entry point:
import 'core-js/stable';
import 'regenerator-runtime/runtime';
I'm using the BundleAnalyzerPlugin and get a gzipped size of 250kb for just core-js:
When I change the browserslist setup to be just Chrome 85, nothing form core-js is imported.
When I remove the import line, nothing is imported either.

OK, feeling foolish.
My webpack.config.js had this configuration for babel-loader:
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['#babel/env'],
}
},
... I'm not that au faix with webpack setup, so I think this was overriding my babel.config.json for anything .js.
Also, I removed the import lines, and changed useBuiltIns to be usage and everything works as expected.
The giveaway should have been that my debug: true was not causing debug info to be logged when webpack was compiling. It is now, and my bundle is much smaller.

Published npm package does not apply styles

I'm currently working on creating an npm package. Which is basically a React component with added styles using SCSS. When I test it out, the class names are there, but no styles are being applied.
Here is the repo for the package. I use a separated webpack config for building the specific folder where the component is.
Here's the webpack configuration I'm using:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const EsLintFormatter = require('eslint-formatter-pretty');
const path = require('path');
const pkg = require('../../package.json');
const { SRC_PATH, BUILD_PATH } = require('./constants');
const setStyleLoaders = require('./style-loaders');
const alias = require('./alias');
const packageName = pkg.name;
module.exports = ({ NODE_ENV }) => ({
mode: 'production',
entry: `${SRC_PATH}/components/Carousel/Carousel.js`,
output: {
path: BUILD_PATH,
filename: 'index.js',
library: packageName,
libraryTarget: 'commonjs2',
umdNamedDefine: true,
publicPath: '/build/',
},
node: {
net: 'empty',
tls: 'empty',
dns: 'empty',
},
resolve: {
alias: {
...alias,
react: path.resolve(__dirname, './node_modules/react'),
'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
},
},
externals: {
react: 'react',
reactDom: 'react-dom',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: [
{ loader: 'babel-loader' },
{
loader: 'eslint-loader',
options: {
formatter: EsLintFormatter,
},
},
],
},
{
test: /\.(sa|sc|c)ss$/,
use: setStyleLoaders(NODE_ENV),
},
{
test: /\.(png|pje?g|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'images',
},
},
],
},
{
test: /\.(woff|woff2|tff|otf|eot)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'fonts',
},
},
],
},
],
},
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({ filename: 'index.css' }),
],
});
...and here's my package.json
{
"name": "react-clear-carousel",
"version": "0.1.0-beta.1",
"description": "A test",
"main": "build/index.js",
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --env.NODE_ENV=development --config config/webpack/webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --env.NODE_ENV=production --config config/webpack/webpack.config.publish.js",
"stylelint": "stylelint 'src/**/*.scss' --config stylelint.config.js; exit 0",
"eslint": "eslint 'src/**/*.js'; exit 0",
"es:fix": "eslint 'src/**/*.js' --fix",
"style:fix": "stylelint 'src/**/*.scss' --fix",
"lint": "npm run eslint && npm run stylelint",
"publish:beta": "npm publish --tag=beta",
"test": "jest"
},
"repository": {
"type": "git",
"url": "git+https://github.com/RobCC/web-playground.git"
},
"author": "robcc",
"license": "ISC",
"bugs": {
"url": "https://github.com/RobCC/web-playground/issues"
},
"files": [
"dist"
],
"jest": {
"setupFilesAfterEnv": [
"<rootDir>/config/jest/setup.js"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/fileMock.js",
"\\.(css|less|scss)$": "identity-obj-proxy",
"^~/(.*)": "<rootDir>/$1",
"^#/(.*)": "<rootDir>/src/$1"
}
},
"homepage": "https://github.com/RobCC/web-playground#readme",
"peerDependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1",
"prop-types": "^15.7.2"
},
"devDependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.9.0",
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/plugin-proposal-export-default-from": "^7.8.3",
"#babel/plugin-proposal-export-namespace-from": "^7.8.3",
"#babel/preset-env": "^7.9.0",
"#babel/preset-react": "^7.9.1",
"#types/jest": "^25.1.4",
"#types/node": "^13.9.2",
"#types/react": "^16.9.25",
"#types/react-dom": "^16.9.5",
"#welldone-software/why-did-you-render": "^4.0.5",
"autoprefixer": "^9.7.4",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"chalk": "^3.0.0",
"clean-webpack-plugin": "^3.0.0",
"core-js": "^3.6.4",
"cross-env": "^7.0.2",
"css-loader": "^3.4.2",
"cssnano": "^4.1.10",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-formatter-pretty": "^3.0.1",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-loader": "^3.0.3",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^2.5.1",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^3.2.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^25.1.0",
"log-symbols": "^3.0.0",
"mini-css-extract-plugin": "^0.9.0",
"postcss-loader": "^3.0.0",
"pr*op-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"regenerator-runtime": "^0.13.5",
"sass": "^1.26.3",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.3",
"stylelint": "^13.2.1",
"stylelint-config-recommended": "^3.0.0",
"stylelint-formatter-pretty": "^2.0.0",
"stylelint-scss": "^3.16.0",
"stylelint-webpack-plugin": "^1.2.3",
"ts-loader": "^6.2.1",
"typescript": "^3.8.3",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
},
"dependencies": {
"weak-key": "^1.0.2"
}
}
This is the result when testing the published package:
Edit 1:
There are no errors on the Network and Console tab in devtools. I also can't find the file loaded, even though it's there in the package. It seems like the js file is not using it, but it should.
Edit 2:
Thanks for pointing me on the right direction!
I added import 'react-clear-carousel/build/index.css'; to include the CSS file from my package. I can see the file now (on devtools), but the styles are not being applied since css-loader is modularizing it and adding additional suffix and prefix (even though it already had them), thus having different class names that the ones my component has.
eg. My component is rendered as <div class="carousel_swimlane--kXSjh">, but the styles in the DOM are named as index_carousel_swimlane--kXSjh--2C.
I guess the question is now, how do I tell Webpack to pass this CSS as is? And if there's a way for me to deliver the CSS file without other people having to change their Webpack configuration.

Looking at your repo I see that you are importing your scss but attributing it's properties to classNames.
className should be the name of the class, and you can either attribute your imported styles to style or you can load your compiled css into the DOM using <link rel="stylesheet" type="text/css" href="styles.min.css">
The reason you're not seeing a stylesheet in the network tab is because you've simply forgotten to declare a stylesheet.

Unexpected token '<' React Webpack build

I'm Using Webpack4 and #babel/core 7 for my ReactJs Project.When i trying to build project i'm getting bellow error on terminal
ERROR in ./src/views/Pages/Login/Login.js Module build failed (from
./node_modules/babel-loader/lib/index.js): SyntaxError:
/xx/xx/web/src/views/Pages/Login/Login.js: Unexpected token (8:6)
render() { return (
<div className="app flex-row align-items-center">
^
Package.json
"dependencies": {
"#babel/core": "^7.4.0",
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#babel/plugin-transform-runtime": "^7.5.5",
"#babel/preset-env": "^7.4.2",
"#babel/preset-react": "^7.0.0",
"#coreui/coreui": "2.1.12",
"#coreui/coreui-plugin-chartjs-custom-tooltips": "1.3.1",
"#coreui/icons": "0.3.0",
"#coreui/react": "2.5.1",
"#devexpress/dx-react-core": "2.0.2",
"#devexpress/dx-react-grid": "2.0.2",
"#devexpress/dx-react-grid-bootstrap4": "2.0.2",
"axios": "0.19.0",
"bootstrap": "4.3.1",
"babel-loader": "8.0.5",
"copy-webpack-plugin": "5.0.4",
"css-loader": "2.1.1",
"dotenv-webpack": "1.7.0",
"file-loader": "4.1.0",
"chart.js": "2.8.0",
"core-js": "3.1.4",
"html-webpack-plugin": "3.2.0",
"image-webpack-loader": "5.0.0",
"node-sass": "4.12.0",
"node-sass-chokidar": "1.3.4",
"npm-run-all": "4.1.5",
"mini-css-extract-plugin": "0.8.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"prop-types": "15.7.2",
"react": "16.8.6",
"react-chartjs-2": "2.7.6",
"react-redux": "7.1.0",
"react-router-dom": "5.0.1",
"reactstrap": "8.0.0",
"redux": "4.0.4",
"style-loader": "0.23.1",
"terser-webpack-plugin": "1.4.1",
"webpack": "4.29.6",
"webpack-cli": "3.3.0"
}
Webpack.config.js
module: {
rules: [
{
test: /\.(js|jsx|es6)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ["#babel/preset-env"]
}
}
],
},
......
]
}
.babelrc
{
"presets": [ "#babel/preset-env","#babel/preset-react"],
"plugins": ["#babel/plugin-proposal-class-properties","#babel/transform-runtime"]
}

You need to add preset react to your .babelrc file like this
{
"presets": ["es2015", "react"],
"plugins": [
"transform-es2015-destructuring",
"transform-object-rest-spread",
["transform-class-properties", { "spec": true }]
]
}
If that is not the case you can check their document here

Webpack not detecting new modules

So I have a React app that I'm working on, I'm building the app with Visual Studio (ASP.NET Web API 2.0 for the backend). I had to make some pretty major changes to the app so I created a separate branch for it. I added a few JSX files to the project in the new branch and when I try to require them in a file like so:
const Reports = require("./Reports/Reports.jsx");
I get an error: "Uncaught Error: Cannot find Module ./Reports/Reports.jsx" in the web browser
It seems like webpack isn't detecting any of the newly added files on the branch, what could be the cause of this?
Here's my webpack config:
function getWebpackConfig(moreProps) {
var config = {
debug: true,
devtool: 'source-map',
entry: {
main: './src/start.jsx'
},
output: {
path: path.join(__dirname, './dist'),
filename: 'app.bundle.js'
},
module: {
loaders: [{
test: /\.jsx$|\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}]
},
resolve: {
alias: {
"~": path.resolve("./src")
},
extensions: ['', '.js', '.jsx']
}
};
config = Object.assign({}, config, moreProps);
return config;
}
Here's my package.json containing the node_modules installed in the directory of my project:
{
"name": "internal auditing site",
"version": "1.0.0",
"description": "Web Client for internal auditing site",
"repository": "~company name excluded for StackOverflow~",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-polyfill": "^6.16.0",
"lodash": "^4.11.1",
"moment": "^2.12.0",
"node-uuid": "^1.4.7",
"path": "^0.12.7",
"react": "^15.0.1",
"react-dom": "^15.0.1",
"react-redux": "^4.4.4",
"redux": "^3.4.0",
"redux-thunk": "^2.0.1",
"webpack": "^1.13.3",
"whatwg-fetch": "^0.11.0"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.7.6",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-runtime": "^6.6.1",
"css-loader": "^0.23.1",
"del": "^2.2.0",
"extract-text-webpack-plugin": "^1.0.1",
"gulp": "^3.9.1",
"gulp-replace": "^0.5.4",
"gulp-util": "^3.0.7",
"history": "^2.0.1",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"object-assign": "^4.0.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.3"
}
}
I'm also not entirely sure if this is an issue with Webpack or Team Foundation Server.