I am facing issue running npm run build during the minification process as this. Most of the solutions given is to upgrade to react-scripts v2.x.x is not a viable option for me. So I am currently implementing this solution which suggests to use terser-webpack-plugin-legacy instead of UglifyJS for the minification process.
I was able to build successfully. But I'm not sure if what I did is correct and I have no idea how to ensure that the minification process was successful.
I compared between the Sources tab under chrome dev tools and see that using UglifyJS there is static/js folder while when using Terser, there isn't a static/js folder
Dev Tools screenshot with UglifyJS
Dev tools screenshot using terser
This is a snippet of my old webpack.config.prod.js
module.exports = {
plugins: [
// Minify the code.
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebookincubator/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
},
mangle: {
safari10: true,
},
output: {
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebookincubator/create-react-app/issues/2488
ascii_only: true,
},
sourceMap: shouldUseSourceMap,
}),
And this is the new config
module.exports = {
plugins: [
// Minify the code.
new TerserPlugin({
terserOptions:{
compress: {
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebookincubator/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
},
mangle: {
safari10: true,
},
output: {
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebookincubator/create-react-app/issues/2488
ascii_only: true,
},
},
sourceMap: shouldUseSourceMap,
}),
My package.json
{
"name": "my-web-project",
"private": true,
"homepage": "./",
"dependencies": {
"@material-ui/core": "^3.2.2",
"@material-ui/icons": "^3.0.1",
"autoprefixer": "7.1.2",
"axios": "^0.16.2",
"babel-core": "^6.26.3",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.1",
"babel-preset-react-app": "^3.0.2",
"babel-runtime": "6.26.0",
"base-64": "^0.1.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"classnames": "^2.2.6",
"core-js": "^2.6.12",
"css-loader": "0.28.4",
"dotenv": "4.0.0",
"email-validator": "^2.0.4",
"eslint-config-react-app": "^2.0.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.35.0",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.1.0",
"extract-text-webpack-plugin": "3.0.0",
"file-loader": "0.11.2",
"fs-extra": "3.0.1",
"history": "^4.7.2",
"html-webpack-plugin": "2.29.0",
"jwt-decode": "^2.2.0",
"material-ui": "^0.20.2",
"material-ui-chip-input": "^1.1.0",
"material-ui-flat-pagination": "^2.1.4",
"material-ui-icons": "^1.0.0-beta.36",
"mdi-material-ui": "^5.6.0",
"moment": "^2.22.1",
"node-sass": "^4.11.0",
"npm": "^6.4.1",
"object-assign": "4.1.1",
"patch-package": "^6.0.5",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.6",
"print-js": "^1.0.54",
"promise": "8.0.1",
"prop-types": "^15.6.1",
"react": "^16.5.2",
"react-bootstrap": "^0.32.4",
"react-bootstrap-modal": "^4.2.0",
"react-calendar": "^2.17.5",
"react-content-loader": "^3.2.0",
"react-csv": "^1.0.16",
"react-day-picker": "^7.2.4",
"react-dev-utils": "^4.2.3",
"react-dom": "^16.5.2",
"react-dropzone": "^7.0.1",
"react-fontawesome": "^1.6.1",
"react-loadable": "^5.5.0",
"react-number-format": "^4.0.5",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.1.4",
"react-slidedown": "^2.0.7",
"react-swipeable-views": "^0.12.18",
"react-text-mask": "^5.4.3",
"react-validation": "^3.0.7",
"reactstrap": "^6.5.0",
"recharts": "^1.5.0",
"redux": "^3.7.2",
"redux-saga": "^0.15.6",
"sass-loader": "^6.0.7",
"style-loader": "0.18.2",
"suneditor": "^2.41.3",
"suneditor-react": "^2.16.5",
"sw-precache-webpack-plugin": "0.11.4",
"url-loader": "0.5.9",
"webpack": "3.5.1",
"webpack-dev-server": "2.7.1",
"webpack-manifest-plugin": "1.2.1",
"whatwg-fetch": "2.0.3"
},
"resolutions": {
"terser": {
"terserOptions": {
"exclude": "node_modules/suneditor-react/dist/main.js"
}
}
},
"scripts": {
"start": "react-scripts --max_old_space_size=4096 start",
"build": "react-scripts --max_old_space_size=4096 build",
"build:ci": "react-scripts --max_old_space_size=12288 build",
"postinstall": "npx patch-package",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.js?(x)",
"<rootDir>/src/**/?(*.)(spec|test).js?(x)"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx",
"node"
]
},
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"module-resolver",
{
"cwd": "babelrc",
"root": "./src",
"alias": {
"ambank-language": "./src/_asset/language"
}
}
]
]
},
"eslintConfig": {
"extends": "react-app",
"rules": {
"no-unused-vars": "error"
}
},
"devDependencies": {
"babel-plugin-module-resolver": "^3.1.1",
"eslint": "^4.19.1",
"jest": "^20.0.4",
"terser-webpack-plugin-legacy": "^1.2.5"
}
}