the command yarn run build throw errors - reactjs

Question

when i try to build my project with yarn run build i get errors that are not exist in my code my code is clean it works fine in my local. I've been stuck for two weeks to resolve this problem please help me to solve this problem. this the errors that i get
node version: v10.15.3
webpack: 4.30.0
this is my package.json
{
"name": "xxxx",
"version": "1.8.0",
"description": "React website tempate with focus on perfomance and design",
"private": true,
"engines": {
"npm": ">=5",
"node": ">=8.15.1"
},
"author": "Dandelion Pro Team",
"license": "Envato Regular License",
"scripts": {
"analyze:clean": "rimraf stats.json",
"preanalyze": "npm run analyze:clean",
"analyze": "node ./internals/scripts/analyze.js",
"extract-intl": "node ./internals/scripts/extract-intl.js",
"npmcheckversion": "node ./internals/scripts/npmcheckversion.js",
"preinstall": "npm run npmcheckversion",
"postinstall": "npm run build:dll",
"prebuild": "npm run build:clean",
"build": "cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout",
"build:clean": "rimraf ./build",
"build:dll": "node ./internals/scripts/dependencies.js",
"start": "cross-env NODE_ENV=development node server",
"start:tunnel": "cross-env NODE_ENV=development ENABLE_TUNNEL=true node server",
"start:production": "npm run test && npm run build && npm run start:prod",
"start:prod": "cross-env NODE_ENV=production node server",
"presetup": "npm i chalk shelljs",
"setup": "node ./internals/scripts/setup.js",
"postsetup": "npm run build:dll",
"clean": "shjs ./internals/scripts/clean.js",
"clean:all": "npm run analyze:clean && npm run test:clean && npm run build:clean",
"generate": "plop --plopfile internals/generators/index.js",
"lint": "npm run lint:js && npm run lint:css",
"lint:css": "stylelint app/**/*.js",
"lint:eslint": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts",
"lint:eslint:fix": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts --fix",
"lint:js": "npm run lint:eslint -- . ",
"lint:staged": "lint-staged",
"coveralls": "cat ./coverage/lcov.info | coveralls",
"prettify": "prettier --write"
},
"browserslist": [
"last 1 version",
"> 1%",
"maintained node versions",
"not dead"
],
"lint-staged": {
"*.js": [
"npm run lint:eslint:fix",
"git add --force"
],
"*.json": [
"prettier --write",
"git add --force"
]
},
"pre-commit": "lint:staged",
"resolutions": {
"babel-core": "7.0.0-bridge.0"
},
"dllPlugin": {
"path": "node_modules/react-boilerplate-dlls",
"exclude": [
"#types/googlemaps",
"#types/markerclustererplus",
"autosuggest-highlight",
"chalk",
"compression",
"convert-source-map",
"cross-env",
"dotenv",
"etag",
"express",
"fs",
"ip",
"jsdom",
"minimist",
"mocha",
"moment",
"sanitize.css",
"serve-favicon",
"slick-carousel",
"tunnel-agent"
],
"include": [
"core-js",
"lodash",
"eventsource-polyfill"
]
},
"dependencies": {
"#babel/plugin-proposal-export-default-from": "^7.2.0",
"#babel/plugin-proposal-object-rest-spread": "^7.2.0",
"#babel/polyfill": "7.4.3",
"#date-io/date-fns": "^1.3.11",
"#date-io/moment": "1.3.8",
"#material-ui/core": "^4.9",
"#material-ui/icons": "^4.5.1",
"#material-ui/lab": "^4.0.0-alpha.33",
"#material-ui/pickers": "^3.2.10",
"#react-pdf/renderer": "^1.6.13",
"#types/googlemaps": "^3.38.1",
"#types/markerclustererplus": "^2.1.33",
"acorn": "^6.1.1",
"autoprefixer": "^9.0.0",
"autosuggest-highlight": "^3.1.1",
"axios": "^0.21.1",
"babel-polyfill": "6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"bourbon": "^5.1.0",
"bourbon-neat": "^3.0.0",
"caniuse-lite": "^1.0.30001223",
"chalk": "^2.4.2",
"chart.js": "^2.7.3",
"classnames": "^2.2.6",
"compression": "1.7.4",
"connected-react-router": "6.6.1",
"country-language": "^0.1.7",
"country-state-city": "^1.0.5",
"cross-env": "5.2.0",
"date-fns": "2.1.0",
"detect-browser": "^4.0.0",
"dotenv": "^6.0.0",
"downshift": "^1.31.12",
"draft-js": "^0.11.7",
"draft-js-inline-toolbar-plugin": "^3.0.0",
"draft-js-plugins-editor": "^2.1.1",
"draftjs-to-html": "^0.8.3",
"draftjs-to-markdown": "^0.5.1",
"emailjs-com": "^2.6.4",
"express": "4.16.4",
"file-saver": "^2.0.2",
"fontfaceobserver": "2.1.0",
"formik": "^2.1.4",
"geo-reverse": "^1.0.12",
"google-libphonenumber": "^3.2.13",
"history": "4.9.0",
"hoist-non-react-statics": "3.3.0",
"html2canvas": "^1.0.0-rc.7",
"immer": "3.0.0",
"immutable": "3.8.2",
"interactjs": "^1.10.11",
"intl": "1.2.5",
"invariant": "2.2.4",
"ip": "1.1.5",
"jspdf": "^2.3.1",
"jss": "^10.0.0",
"jss-rtl": "^0.3.0",
"jwt-decode": "^3.1.2",
"keycode": "^2.2.0",
"leaflet": "^1.7.1",
"leaflet-control-geocoder": "^1.13.0",
"lodash": "^4.17.15",
"material-table": "^1.69.0",
"material-ui-color-picker": "^3.5.1",
"material-ui-pickers": "^2.2.4",
"minimist": "^1.2.5",
"moment": "^2.29.1",
"moment-weekday-calc": "^1.1.4",
"mui-datatables": "^2.13.1",
"net": "^1.0.2",
"nuxeo": "^3.17.0",
"profile-picture": "git+https://github.com/dsalvagni/react-profile-picture.git",
"prop-types": "15.7.2",
"rcolor": "^1.0.1",
"react": "16.8.6",
"react-anchor-link-smooth-scroll": "^1.0.11",
"react-animated-slider": "^2.0.0",
"react-autosuggest": "^9.3.4",
"react-big-calendar": "^0.19.1",
"react-calendar": "^2.17.4",
"react-chartjs-2": "^2.7.4",
"react-charts": "^1.0.10",
"react-clock": "^2.3.0",
"react-countup": "^3.0.3",
"react-dom": "16.8.6",
"react-draft-wysiwyg": "^1.12.13",
"react-dropzone": "^10.2.1",
"react-event-listener": "^0.6.1",
"react-google-maps": "^9.4.5",
"react-helmet": "6.0.0-beta",
"react-html5video": "^2.5.1",
"react-image-lightbox": "^5.1.1",
"react-images": "^1.1.7",
"react-intl": "2.8.0",
"react-ionicons": "^2.1.6",
"react-jss": "^10.0.0",
"react-leaflet": "^2.7.0",
"react-loadable": "^5.5.0",
"react-markdown": "^4.1.0",
"react-modal": "^3.4.4",
"react-notifications-component": "^2.4.0",
"react-number-format": "^3.3.4",
"react-papaparse": "^3.8.0",
"react-pdf": "^5.0.0",
"react-pdf-print": "^0.2.0",
"react-player": "^2.9.0",
"react-popper": "^0.10.4",
"react-print-components": "^1.0.4",
"react-redux": "^7.0.2",
"react-router-dom": "^5.0.1",
"react-scroll-parallax": "^1.3.5",
"react-scrollspy": "^3.3.5",
"react-select": "^3.0.4",
"react-slick": "^0.23.1",
"react-swipeable-views": "^0.13.9",
"react-syntax-highlighter": "^7.0.0",
"react-text-mask": "^5.3.2",
"react-trello": "^1.33.0",
"react-ultimate-pagination": "^1.2.0",
"recharts": "^1.4.2",
"recompose": "^0.28.2",
"redux": "4.0.1",
"redux-form": "8.2.0",
"redux-immutable": "4.0.0",
"redux-saga": "1.0.2",
"reselect": "4.0.0",
"sanitize.css": "8.0.0",
"serve-favicon": "^2.4.5",
"slick-carousel": "^1.8.1",
"tunnel-agent": "^0.6.0",
"video-react": "^0.14.1",
"warning": "4.0.2",
"xlsx": "^0.16.6"
},
"devDependencies": {
"#babel/cli": "7.4.3",
"#babel/core": "7.4.3",
"#babel/plugin-proposal-class-properties": "7.4.0",
"#babel/plugin-syntax-dynamic-import": "7.2.0",
"#babel/plugin-transform-modules-commonjs": "7.4.3",
"#babel/plugin-transform-react-constant-elements": "7.2.0",
"#babel/plugin-transform-react-inline-elements": "7.2.0",
"#babel/preset-env": "7.4.3",
"#babel/preset-react": "7.0.0",
"#babel/register": "7.4.0",
"add-asset-html-webpack-plugin": "3.1.3",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-loader": "8.0.5",
"babel-plugin-dynamic-import-node": "2.2.0",
"babel-plugin-lodash": "3.3.4",
"babel-plugin-react-intl": "3.0.1",
"babel-plugin-react-transform": "3.0.0",
"babel-plugin-styled-components": "1.10.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.24",
"babel-preset-es2015": "^6.24.1",
"circular-dependency-plugin": "5.0.2",
"compare-versions": "3.4.0",
"compression-webpack-plugin": "3.0.0",
"coveralls": "3.0.3",
"css-loader": "2.1.1",
"enzyme": "3.7.0",
"enzyme-adapter-react-16": "1.6.0",
"enzyme-to-json": "3.3.4",
"eslint": "5.16.0",
"eslint-config-airbnb": "17.1.0",
"eslint-config-airbnb-base": "13.1.0",
"eslint-config-prettier": "4.1.0",
"eslint-import-resolver-webpack": "0.11.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-flowtype": "^3.2.0",
"eslint-plugin-import": "2.17.2",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-prettier": "3.0.1",
"eslint-plugin-react": "7.12.4",
"eslint-plugin-react-hooks": "1.6.0",
"eslint-plugin-redux-saga": "1.0.0",
"eventsource-polyfill": "0.9.6",
"exports-loader": "0.7.0",
"file-loader": "3.0.1",
"happypack": "^5.0.1",
"html-loader": "0.5.5",
"html-webpack-plugin": "4",
"http-proxy-middleware": "0.19.1",
"imports-loader": "0.8.0",
"lint-staged": "8.1.5",
"ngrok": "3.1.1",
"node-plop": "0.18.0",
"node-sass": "^4.12.0",
"null-loader": "0.1.1",
"offline-plugin": "5.0.6",
"optimize-css-assets-webpack-plugin": "5.0.1",
"plop": "2.3.0",
"postcss-loader": "3.0.0",
"pre-commit": "1.2.2",
"prettier": "1.17.0",
"prismjs": "^1.11.0",
"raw-loader": "2.0.0",
"react-app-polyfill": "0.2.2",
"react-test-renderer": "16.8.6",
"react-testing-library": "6.1.2",
"react-to-print": "^2.12.3",
"rimraf": "2.6.3",
"sass-loader": "^7.1.0",
"sass-material-colors": "0.0.5",
"shelljs": "^0.8.3",
"style-loader": "0.23.1",
"stylelint": "10.0.1",
"stylelint-config-recommended": "2.2.0",
"stylelint-config-styled-components": "0.1.1",
"stylelint-processor-styled-components": "1.6.0",
"svg-url-loader": "2.3.2",
"terser-webpack-plugin": "1.4.1",
"url-loader": "1.1.2",
"webpack": "4.30.0",
"webpack-cli": "3.3.0",
"webpack-dev-middleware": "3.6.2",
"webpack-hot-middleware": "2.24.3",
"webpack-pwa-manifest": "^4.3.0",
"whatwg-fetch": "3.0.0"
}
}
this is my webpack structure
finaly this my contente of webpack.base.babel.js
/**
* COMMON WEBPACK CONFIGURATION
*/
const path = require('path');
const webpack = require('webpack');
const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({ size: 5 });
module.exports = options => ({
mode: options.mode,
entry: options.entry,
output: Object.assign(
{
// Compile into js/build.js
path: path.resolve(process.cwd(), 'build'),
publicPath: '/',
},
options.output,
), // Merge with env dependent settings
optimization: options.optimization,
module: {
rules: [
/*
Disabled eslint by default.
You can enable it to maintain and keep clean your code.
NOTE: By enable eslint running app process at beginning will slower
*/
/* {
enforce: 'pre',
test: /\.js?$/,
exclude: [/node_modules/],
loader: 'eslint-loader',
options: {
quiet: true,
}
}, */
{
test: /\.jsx?$/, // Transform all .js and .jsx files required somewhere with Babel
exclude: /node_modules/,
use: {
loader: 'happypack/loader?id=js',
options: options.babelQuery,
},
},
{
// Preprocess our own .css files
// This is the place to add your own loaders (e.g. sass/less etc.)
// for a list of loaders, see https://webpack.js.org/loaders/#styling
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
// Preprocess 3rd party .css files located in node_modules
test: /\.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(eot|otf|ttf|woff|woff2)$/,
use: 'file-loader',
},
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader'
},
{
loader: 'css-loader',
options:
{
sourceMap: false,
importLoaders: 2,
modules: true,
localIdentName: '[local]__[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: false
}
}],
},
{
test: /\.md$/,
use: 'raw-loader'
},
{
test: /\.(jpg|png|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
// Inline files smaller than 10 kB
limit: 10 * 1024,
},
},
/*
Disabled image compression by default,
due error in windows 10 because libpng not available.
The libpng avaible on Linux and Mac system only.
NOTE: To enable this, first you need to install image-webpack-loader.
npm install -i image-webpack-loader --save
*/
// {
// loader: 'image-webpack-loader',
// options: {
// mozjpeg: {
// enabled: false,
// // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
// // Try enabling it in your environment by switching the config to:
// // enabled: true,
// // progressive: true,
// },
// gifsicle: {
// interlaced: false,
// },
// optipng: {
// optimizationLevel: 7,
// },
// pngquant: {
// quality: '65-90',
// speed: 4,
// },
// },
// },
],
},
{
test: /\.html$/,
use: 'html-loader',
},
{
test: /\.(mp4|webm)$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
},
},
},
],
},
node: {
fs: 'empty'
},
plugins: options.plugins.concat([
// Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
// inside your code for any environment checks; Terser will automatically
// drop any unreachable code.
new HappyPack({
id: 'js',
threadPool: happyThreadPool,
loaders: ['babel-loader?cacheDirectory=true']
}),
new webpack.EnvironmentPlugin({
NODE_ENV: 'development',
}),
new webpack.ContextReplacementPlugin(/^\.\/locale$/, context => {
if (!/\/moment\//.test(context.context)) { return; }
// context needs to be modified in place
Object.assign(context, {
// include only CJK
regExp: /^\.\/(ja|ko|zh)/,
// point to the locale data folder relative to moment's src/lib/locale
request: '../../locale'
});
})
]),
resolve: {
modules: ['node_modules', 'app'],
extensions: ['.js', '.jsx', '.react.js'],
mainFields: ['browser', 'jsnext:main', 'main'],
alias: {
'dan-components': path.resolve(__dirname, '../../app/components/'),
'dan-actions': path.resolve(__dirname, '../../app/actions/'),
'dan-redux': path.resolve(__dirname, '../../app/redux/'),
'dan-styles': path.resolve(__dirname, '../../app/styles/components/'),
'dan-api': path.resolve(__dirname, '../../app/api/'),
'dan-images': path.resolve(__dirname, '../../public/images/'),
'dan-vendor': path.resolve(__dirname, '../../node_modules/'),
}
},
devtool: options.devtool,
target: 'web', // Make web variables accessible to webpack, e.g. window
performance: options.performance || {},
});
thanks a lot stackoverflow

Answer 1

i added two folders that was missing 'transversal-administration', 'transversal-translation' in the past i have just only: ['app']. the loader in the past load just the app folder
env: {
production: {
// only: ['app'],
only: ['app', 'transversal-administration', 'transversal-translation'],
plugins: [
'lodash',
'transform-react-remove-prop-types',
'#babel/plugin-transform-react-inline-elements',
'#babel/plugin-transform-react-constant-elements',
],
},