Webpack 1.15.0 Parse Error: JSX File - reactjs

I have tried to fix my errors according to some answers. But I can't solve.
I am using webpack 1.15.0 and babel-loader 6.4.1.
Please help me to parse jsx file.
Here is the error message.
ERROR in ./~/react-file-viewer/src/components/file-viewer.jsx Module
parse failed:
E:\code-bucket\university\node_modules\react-file-viewer\src\components\file-viewer.jsx
Unexpected token (74:6) You may need an appropriate loader to handle
this file type. SyntaxError: Unexpected token (74:6)
Here is my webpack.config.js file.
{
var path = require('path');
module.exports = {
entry: './client/js/app.js',
output: {
path: path.resolve('www/build/js'),
filename: 'app.bundle.js',
pathinfo: false
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react'],
plugins: ['transform-object-rest-spread']
},
exclude: /node_modules/
},
{
test: /\.css$/, // Transform all .css files required somewhere within an entry point...
loaders: ['style-loader', 'css-loader', 'postcss-loader'] // ...with PostCSS
}
]
},
postcss: function() {
return [
require('postcss-import')({ // Import all the css files...
onImport: function (files) {
files.forEach(this.addDependency); // ...and add dependecies from the main.css files to the other css files...
}.bind(this) // ...so they get hot–reloaded when something changes...
}),
require('postcss-simple-vars')(), // ...then replace the variables...
require('postcss-focus')(), // ...add a :focus to ever :hover...
require('autoprefixer')({ // ...and add vendor prefixes...
browsers: ['last 2 versions', 'IE > 8'] // ...supporting the last 2 major browser versions and IE 8 and up...
}),
require('postcss-reporter')({ // This plugin makes sure we get warnings in the console
clearMessages: true
})
];
},
target: "web", // Make web variables accessible to webpack, e.g. window
stats: {
colors: true
},
devtool: 'source-map'
};
}
Here is my package.json file.
{
"name": "university",
"version": "1.0.0",
"description": "Sample Application with React and the Lightning Design System",
"engines": {
"node": "4.2.1"
},
"main": "server.js",
"scripts": {
"webpack": "webpack",
"start": "node server.js",
"bundle": "build-bundle src/apps/ -o dist -v 1.0.0"
},
"author": "Christophe Coenraets <ccoenraets#gmail.com> (http://coenraets.org/)",
"license": "ISC",
"dependencies": {
"autoprefixer": "^7.1.4",
"babel-plugin-transform-object-rest-spread": "^6.3.13",
"bcryptjs": "^2.4.3",
"body-parser": "^1.14.2",
"build-bundle": "^2.0.8",
"compression": "^1.6.1",
"connect-busboy": "0.0.2",
"connect-multiparty": "^2.0.0",
"css-loader": "^0.28.7",
"cssnano": "^3.10.0",
"express": "^4.13.4",
"file-loader": "^0.11.2",
"filesize": "^3.5.10",
"fine-uploader": "^5.15.0",
"fontfaceobserver": "^2.0.13",
"fs": "0.0.1-security",
"fs-extra": "^4.0.2",
"gulp": "^3.9.1",
"json2csv": "^3.11.4",
"loader-utils": "^1.1.0",
"method-override": "^2.3.5",
"moment": "^2.11.2",
"multer": "^1.3.0",
"mysql": "^2.14.1",
"object.assign": "^4.0.4",
"path": "^0.12.7",
"pg": "^4.4.4",
"postcss-cssnext": "^3.0.2",
"postcss-focus": "^2.0.0",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.6",
"postcss-reporter": "^5.0.0",
"react-addons-css-transition-group": "^15.6.2",
"react-addons-transition-group": "^15.6.2",
"react-animate-height": "^0.10.3",
"react-bootstrap": "^0.31.3",
"react-csv": "^1.0.8",
"react-file-download": "^0.3.5",
"react-file-viewer": "^0.3.48",
"react-fileupload": "^2.4.0",
"react-fine-uploader": "^1.0.7",
"react-html-table-to-excel": "^2.0.0",
"react-redux": "^5.0.6",
"react-router": "^2.0.0-rc5",
"react-strap": "0.0.1",
"react-swipeable-views": "^0.12.8",
"react-transition-group": "^2.2.1",
"react-upload-file": "^2.0.0-beta.6",
"reactstrap": "^4.8.0",
"reactstrap-tether": "^1.3.4",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"sass": "^1.0.0-beta.2",
"style-loader": "^0.18.2",
"write": "^1.0.3",
"write-file": "^1.0.0",
"write-file-p": "^1.0.6"
},
"devDependencies": {
"babel-core": "^6.4.5",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-3": "^6.3.13",
"history": "^1.17.0",
"postcss": "^6.0.12",
"postcss-simple-vars": "^4.1.0",
"react": "^0.14.9",
"react-addons-linked-state-mixin": "^0.14.7",
"react-dom": "^0.14.9",
"react-onclickoutside": "^4.5.0",
"react-router": "^1.0.3",
"webpack": "^1.15.0"
}
}

Related

Module build failed (from ./node_modules/eslint-loader/dist/cjs.js): TypeError: Cannot read properties of undefined (reading 'getFormatter')

I am running a simple React/Django app with webpack that is receiving this error on build:
ERROR in ./src/index.js
Module build failed (from ./node_modules/eslint-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'getFormatter')
at getFormatter (**[Relative path]**/frontend/node_modules/eslint-loader/dist/getOptions.js:52:20)
at getOptions (**[Relative path]**/frontend/node_modules/eslint-loader/dist/getOptions.js:30:23)
at Object.loader (**[Relative path]**/frontend/node_modules/eslint-loader/dist/index.js:17:43)
Here's my package.json
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start:dev": "webpack serve --config webpack.config.dev.js --port 3000",
"clean:build": "rimraf ../static && mkdir ../static",
"prebuild": "run-p clean:build",
"build": "webpack --config webpack.config.prod.js",
"postbuild": "rimraf ../static/index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.24.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"redux": "^4.1.2",
"redux-thunk": "^2.4.0",
"reselect": "^4.1.1"
},
"devDependencies": {
"#babel/core": "^7.16.0",
"#babel/node": "^7.16.0",
"#babel/preset-env": "^7.16.0",
"#babel/preset-react": "^7.16.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.3",
"babel-polyfill": "^6.26.0",
"css-loader": "^6.5.0",
"cssnano": "^5.0.9",
"eslint": "^8.1.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-react": "^7.26.1",
"eslint-plugin-react-hooks": "^4.2.0",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.4.3",
"npm-run-all": "^4.1.5",
"postcss-loader": "^6.2.0",
"redux-immutable-state-invariant": "^2.1.0",
"rimraf": "^3.0.2",
"style-loader": "^3.3.1",
"webpack": "^5.61.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.4.0"
}
}
And my webpack.config.dev.js
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
process.env.NODE_ENV = 'development';
module.exports = {
mode: 'development',
target: 'web',
devtool: 'cheap-module-source-map',
entry: ['babel-polyfill', './src/index'],
output: {
path: path.resolve(__dirname),
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
// stats: 'minimal',
client: {
overlay: true
},
historyApiFallback: true,
// disableHostCheck: true,
headers: { 'Access-Control-Allow-Origin': '*' },
https: false
},
plugins: [
new webpack.DefinePlugin({
'process.env.API_URL': JSON.stringify('http://localhost:8000/api/')
}),
new HtmlWebpackPlugin({
template: './src/index.html',
favicon: './src/favicon.ico'
})
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader'
},
'eslint-loader'
]
},
{
test: /(\.css)$/,
use: ['style-loader', 'css-loader']
}
]
}
};
Unsure if I need to make changes to my config file or if it's an issue with a package I have installed. Any guidance would be helpful as I am not very familiar with webpack's inner workings.
Versions:
node: v17.0.1
npm: 8.1.2
python: 3.9.6 (pretty sure it's a js/webpack issue)
Django: 3.2.8 (^^^)
eslint-loader is deprecated:
https://www.npmjs.com/package/eslint-loader
You may use eslint-webpack-plugin instead:
https://www.npmjs.com/package/eslint-webpack-plugin
I found an issue https://github.com/webpack-contrib/eslint-loader/issues/331 about this in the eslint-loader github, but I don't know if it will be useful for you.
. It would help to have a git repository to store the code that would be wrong for better testing. :)
"dependencies": {
"axios": "^0.24.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.0.1",
"redux": "^4.1.2",
"redux-thunk": "^2.4.0",
"reselect": "^4.1.1"
},
"devDependencies": {
"#babel/core": "^7.15.0",
"#babel/node": "^7.14.9",
"#babel/preset-env": "^7.15.0",
"#babel/preset-react": "^7.14.5",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"babel-polyfill": "^6.26.0",
"css-loader": "^6.2.0",
"cssnano": "^5.0.7",
"eslint": "^7.32.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.24.0",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"html-webpack-plugin": "^5.3.2",
"mini-css-extract-plugin": "^2.2.0",
"npm-run-all": "^4.1.5",
"postcss-loader": "^6.1.1",
"redux-immutable-state-invariant": "^2.1.0",
"rimraf": "^3.0.2",
"style-loader": "^3.2.1",
"webpack": "^5.50.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^3.11.2"
}
I reverted back to these versions (a past project worked on them) and it is now working properly. I believe it has something to do with eslint and eslint-loader.
eslint-loader has been deprecated now, and i change to use eslint-webpack-plugin which really works now!! I am so greatful, this problem has been troubling me a lot!
It really solve my problem thanks to the top answer, but I cannot comment directly on that answer due to my low reputation.
In addition, this is a plugin rather than loader, so you should add it to plugins and don't forget to "new".enter link description here
Find out that my versions of eslint and eslint-loader were incompatible
those works for me
"eslint": "^7.32.0",
"eslint-loader": "^4.0.2",

the command yarn run build throw errors

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
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',
],
},

Webpack-dev-server stops updating after first file change

Due to some update, my previously working set up no longer operates as expected. When I run yarn start WDS will look for changes to my files and make the right updates the first time, but any other changes to the file will not be send to the browser, even though WDS acknolodges the file change. Here is my current config
const path = require('path');
const merge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackChunkHash = require('webpack-chunk-hash');
require('babel-polyfill');
const TARGET = process.env.npm_lifecycle_event;
const PATHS = {
app: path.join(__dirname, '/Zeus/src'),
build: path.join(__dirname, '/Zeus/dist'),
};
const common = {
entry: {
index: [
'babel-polyfill',
PATHS.app,
],
},
resolve: {
extensions: ['.js', '.jsx', '.scss'],
},
output: {
path: PATHS.build,
publicPath: '/dist/',
filename: '[name].js',
chunkFilename: '[id].[chunkhash].js',
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
include: PATHS.app,
use: {
loader: 'babel-loader',
},
},
{
test: /flickity/,
loader: 'imports-loader?define=>false&this=>window',
}
],
},
plugins: [
new WebpackChunkHash({algorithm: 'md5'}) // 'md5' is default value
],
};
const extractSass = new ExtractTextPlugin({
filename: '[name].css',
disable: process.env.NODE_ENV === 'development',
});
//
// Developmemt configuration
//
if (TARGET === 'start' || !TARGET) {
module.exports = merge(common, {
devtool: 'eval-source-map',
devServer: {
contentBase: path.join(__dirname, '/Zeus'),
historyApiFallback: true,
hot: true,
// hotOnly: true,
clientLogLevel: 'info',
// stats: 'errors-only',
host: '0.0.0.0',
port: 8080,
},
module: {
rules: [{
test: /\.scss$/,
use: extractSass.extract({
use: [{
loader: 'css-loader',
}, {
loader: 'sass-loader',
}],
// use style-loader in development
fallback: 'style-loader',
}),
}],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.ModuleConcatenationPlugin(),
extractSass,
],
});
}
Usually this means I will cancel the process and start it again. Which works, but obviously not very convenient.
[edit]
To include my dir structure, it follows:
/
webpack.config.js
/Zeus
/dist
/src
index.js
I'm using webpack: ^4.29.6.
[edit to include pck file]
{
"name": "zeus",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --progress",
"start": "webpack-dev-server --debug",
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.3.4",
"#babel/preset-env": "^7.3.4",
"#babel/preset-es2015": "^7.0.0-beta.53",
"#babel/preset-react": "^7.0.0",
"#babel/preset-stage-1": "^7.0.0",
"#babel/preset-stage-3": "^7.0.0",
"#babel/register": "^7.0.0",
"autoprefixer-loader": "^3.2.0",
"axios-mock-adapter": "^1.16.0",
"babel-eslint": "10",
"babel-loader": "^8.0.5",
"babel-polyfill": "^6.26.0",
"chai": "^4.2.0",
"chai-jquery": "^2.1.0",
"css-loader": "^2.1.0",
"enhanced-resolve": "^4.1.0",
"enzyme": "^3.9.0",
"es6-promise-promise": "^1.0.0",
"eslint": "5.x",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^3.0.1",
"imports-loader": "^0.8.0",
"install": "^0.12.2",
"istanbul": "1.0.0-alpha.2",
"jquery": "^3.3.1",
"jsdom": "^14.0.0",
"mocha": "^6.0.2",
"mock-local-storage": "^1.1.8",
"nock": "^10.0.6",
"node-sass": "^4.11.0",
"offline-plugin": "^5.0.6",
"phantomjs": "^2.1.7",
"plato": "^1.7.0",
"react-addons-test-utils": "^15.6.2",
"redux-mock-store": "^1.5.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"tapable": "^1.1.1",
"uglifyjs-webpack-plugin": "^2.1.2",
"url-loader": "^1.1.2",
"watchpack": "^1.6.0",
"webpack": "^4.29.6",
"webpack-chunk-hash": "^0.6.0",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.1",
"webpack-merge": "^4.2.1",
"webpack-sources": "^1.3.0"
},
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.3.4",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-syntax-import-meta": "^7.2.0",
"#babel/plugin-transform-react-jsx": "^7.3.0",
"#babel/plugin-transform-runtime": "^7.3.4",
"axios": "^0.18.0",
"babel-preset-stage-1": "^6.24.1",
"enzyme-adapter-react-16": "^1.10.0",
"es6-promise": "^4.2.6",
"flickity": "^2.2.0",
"history": "^4.7.2",
"isomorphic-fetch": "^2.2.1",
"jest": "^24.3.1",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"moxios": "^0.4.0",
"npm-check-updates": "^3.1.7",
"prop-types": "^15.7.2",
"query-string": "^6.2.0",
"react": "^16.8.3",
"react-async-script": "^1.0.0",
"react-async-script-loader": "^0.3.0",
"react-autocomplete": "^1.8.1",
"react-dom": "^16.8.3",
"react-ga": "^2.5.7",
"react-google-login": "^5.0.2",
"react-infinite-scroller": "^1.2.4",
"react-loadable": "^5.5.0",
"react-masonry-component": "^6.2.1",
"react-modal": "^3.8.1",
"react-redux": "^7.0.1",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"react-router-scroll": "^0.4.4",
"react-sticky": "^6.0.3",
"react-waypoint": "^9.0.0",
"redux": "^4.0.1",
"redux-form": "^8.1.0",
"redux-promise": "^0.6.0",
"redux-saga": "^1.0.2",
"redux-storage": "^4.1.2",
"redux-thunk": "^2.3.0"
}
}

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory?

JavaScript head out of memory while I compile using webpack build system. I don't know what is the problem.
Snapshot of error while on npm run build:prod
I'm using:
OS: Ubuntu 16.04,
RAM: 8Gig,
Processor: Inter Core-i5
Node.js, babel-minify-webpack-plugin.
Reactjs 16.2,and Redux
Here is Webpack.config.js file:
var webpack = require('webpack');
var path = require('path');
const env = process.env.NODE_ENV || 'development'
const MinifyPlugin = require("babel-minify-webpack-plugin");
module.exports = {
entry: {
'/js/app': './frontend/app.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'public')
},
module: {
rules: [
{
test: /\.(scss|css|sass)$/i,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
includePaths: [
path.resolve("./node_modules/")
]
}
}]
},
{
test: /\.js$/,
loader: 'babel-loader',
include: path.join(__dirname, "frontend"),
exclude: path.resolve(__dirname, "node_modules"),
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
loader: 'url-loader?limit=4096&name=[name]-[hash].[ext]'
},
{
test: /\.json$/,
loader: 'json-loader'
}
]
},
externals: {
jquery: 'jQuery'
},
node: {
fs: "empty",
net: "empty"
},
plugins: [
new webpack.ProvidePlugin({
'videojs': 'video.js',
'window.videojs': 'video.js'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new MinifyPlugin(true, true)
]
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
Here is my package.json file:
{
"name": "node-ejs",
"version": "1.0.0",
"description": "this is our first app using nodejs on express server with babel",
"main": "server.js",
"proxy": "http://10.1.0.7",
"scripts": {
"start": "nodemon ./server.js --exec babel-node --presets env",
"build:debug": "webpack -d --progress --colors",
"build:prod": "webpack -p --progress --colors",
"build": "webpack --config webpack.config.js"
},
"keywords": [
"nodejs",
"babel",
"express"
],
"watch": true,
"author": "",
"license": "ISC",
"dependencies": {
"#blueprintjs/core": "^1.35.0",
"axios": "^0.17.1",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-minify-builtins": "^0.4.0",
"babel-plugin-minify-flip-comparisons": "^0.4.0",
"babel-preset-es2015": "^6.24.1",
"body-parser": "^1.18.2",
"bootstrap": "^3.3.7",
"ejs": "^2.5.7",
"express": "^4.16.2",
"express-ejs-extend": "0.0.1",
"firebase": "^4.8.2",
"js-file-download": "^0.4.1",
"json-loader": "^0.5.7",
"material-design-icons": "^3.0.1",
"moment": "^2.22.0",
"node-sass": "^4.7.2",
"nodemon": "^1.14.5",
"npm": "^5.8.0",
"npm-install-peers": "^1.2.1",
"pure-render-decorator": "^1.2.1",
"query-string": "^6.0.0",
"re-base": "^3.2.2",
"react-addons-css-transition-group": "^15.6.2",
"react-bootstrap": "^0.31.5",
"react-breadcrumbs-dynamic": "^1.0.12",
"react-dom": "^16.2.0",
"react-file-download": "^0.3.5",
"react-jplayer": "^7.1.2",
"react-notifications": "^1.4.3",
"react-owl-carousel2": "^0.2.1",
"react-pager": "^1.3.3",
"react-placeholder": "^2.0.0",
"react-redux": "^5.0.6",
"react-rev-slider": "^1.0.1",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"react-share": "^1.19.0",
"react-slick": "^0.20.0",
"redux": "^3.7.2",
"redux-promise-middleware": "^5.0.0",
"redux-thunk": "^2.2.0",
"sass-loader": "^6.0.6",
"save-dev": "^2.0.0",
"scss-loader": "0.0.1",
"slick-carousel": "^1.8.1",
"update": "^0.7.4",
"video.js": "^6.6.0",
"videojs-contrib-dash": "^2.9.2",
"videojs-ima": "^1.0.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
},
"devDependencies": {
"#babel/preset-env": "^7.0.0-beta.44",
"babel-cli": "^6.26.0",
"babel-minify": "^0.4.0",
"babel-minify-webpack-plugin": "^0.3.1",
"babel-preset-env": "^1.6.1",
"babel-preset-minify": "^0.4.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"babel-register": "^6.26.0",
"css-loader": "^0.28.7",
"file-loader": "^1.1.6",
"img-loader": "^2.0.0",
"jquery": "^3.2.1",
"lodash": "^4.17.4",
"postcss-loader": "^2.0.10",
"react": "^16.2.0",
"react-dfp": "^0.7.0",
"react-modal": "^3.1.10",
"react-router-bootstrap": "^0.24.4",
"style-loader": "^0.19.1",
"url-loader": "^0.6.2"
}
}
I can pass this error by this code
$ NODE_OPTIONS="--max-old-space-size=1024" yarn test

Trying to bundle first React app - bundle is too big

I have first react app - which is 5.5Mb when using developer mode and devtool: "source-map". Now I tried to write webpack for distribution mode like this:
var webpack = require('webpack');
var path = require('path');
var fs = require('fs')
var BUILD_DIR = path.resolve(__dirname, 'public/javascripts');
var APP_DIR = path.resolve(__dirname, 'frontend');
const babelSettings = JSON.parse(fs.readFileSync(".babelrc"))
var config = {
entry: APP_DIR + '/app.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js',
},
module : {
loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
use : ['babel-loader']
}
,
{
test: /\.css$/,
use: ["style-loader",{
loader: "css-loader",
options: {
minimize: true
}
}],
},
{
test: /\.less$/,
use: ["style-loader,less-loader"]
},
{
test: /\.svg$/,
loaders: [
{
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{
loader: 'react-svg-loader',
query: {
jsx: true
}
}
],
exclude: /node_modules/
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
screw_ie8: true
}
})
]
};
babelSettings.plugins.push("transform-react-inline-elements");
babelSettings.plugins.push("transform-react-constant-elements");
module.exports = config;
I run it with :
webpack --config webpack-dist.config.js -p --progress --production --optimize-minimize
The output is still 2.2Mb which is unacceptable size.What config did I miss?
Edit packages.json looks like this:
{
"name": "project",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-cli": "^6.18.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-stage-3": "^6.22.0",
"babelify": "^7.3.0",
"browserify": "^13.3.0",
"css-loader": "^0.28.0",
"exorcist": "^0.4.0",
"gulp-livereload": "^3.8.1",
"gulp-sourcemaps": "^2.4.0",
"less": "^2.7.2",
"less-loader": "^2.2.3",
"react-edit-inline": "^1.0.8",
"react-image-fallback": "^4.0.1",
"react-scripts": "0.8.5",
"redux-devtools-extension": "^2.13.0",
"remote-redux-devtools": "^0.5.0",
"riek": "^1.0.7",
"style-loader": "^0.13.1",
"svg-react-loader": "^0.4.0-beta.2",
"vinyl-buffer": "^1.0.0",
"watchify": "^3.8.0",
"webpack": "^2.3.2"
},
"dependencies": {
"axios": "^0.16.0",
"barcoder": "^2.0.1",
"escape-string-regexp": "^1.0.5",
"frisbee": "^1.1.7",
"i18next": "^5.0.0",
"i18next-browser-languagedetector": "^1.0.1",
"i18next-xhr-backend": "^1.3.0",
"immutability-helper": "^2.1.1",
"lodash": "^4.17.4",
"qrcode.react": "^0.6.1",
"rc-time-picker": "^2.3.3",
"react": "^15.4.2",
"react-autosuggest": "^8.0.0",
"react-bootstrap": "^0.30.7",
"react-cards": "^0.2.2",
"react-collapse": "^2.3.3",
"react-cookie": "^1.0.4",
"react-dom": "^15.4.2",
"react-dropzone": "^3.10.0",
"react-height": "^2.2.0",
"react-highlight-words": "^0.6.0",
"react-i18next": "^2.0.0",
"react-infinite-scroller": "^1.0.4",
"react-input-autosize": "^1.1.0",
"react-isolated-scroll": "^0.1.0",
"react-loaders": "^2.3.0",
"react-motion": "^0.4.7",
"react-number-input": "^15.0.0-rc2",
"react-numeric-input": "^2.0.7",
"react-popover": "^0.4.4",
"react-preload": "^0.5.0",
"react-redux": "^5.0.2",
"react-redux-form": "^1.5.4",
"react-router-dom": "^4.0.0",
"react-select": "^1.0.0-rc.3",
"react-svg-loader": "^1.1.1",
"react-switch-button": "^2.1.1",
"react-tabs": "^0.8.2",
"react-tagsinput": "^3.14.0",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0",
"simple-react-pdf": "^1.0.6",
"style-it": "^1.5.5",
"throttle-debounce": "^1.0.1",
"validator": "^6.2.1"
},
Use the excellent Webpack Bundle Analyzer to look at what is taking up space in your build.
Also, try setting NODE_ENV=production before you run webpack, it makes a difference.
What decreased bundle size for me (with Webpack 4) is adding
module.exports = {
mode: 'production', // ← this
...
}
(inside webpack.config.js). From almost 1 MB to 158 kB.

Resources