Deprecation warning in my laravel./vuejs app with unused momentjs - vuejs2

In my laravel 5. Vuejs 2, Vuex 3 app I got warning in my console:
Arguments:
[0] _isAMomentObject: true, _isUTC: false, _useUTC: false, _l: undefined, _i: function Vue (options) {
if (!(this instanceof Vue)) {
warn('Vue is a constructor and should be called with the `new` keyword');
}
this._init(options);
}, _f: undefined, _strict: undefined, _locale: [object Object]
Error
at Function.createFromInputFallback (http://local-hostels2.com/js/app.js?dt=1559733588:58205:98)
at configFromInput (http://local-hostels2.com/js/app.js?dt=1559733588:60508:19)
at prepareConfig (http://local-hostels2.com/js/app.js?dt=1559733588:60479:13)
at createFromConfig (http://local-hostels2.com/js/app.js?dt=1559733588:60446:44)
at createLocalOrUTC (http://local-hostels2.com/js/app.js?dt=1559733588:60533:16)
at createLocal (http://local-hostels2.com/js/app.js?dt=1559733588:60537:16)
at hooks (http://local-hostels2.com/js/app.js?dt=1559733588:57897:29)
at Function.Vue.use (http://local-hostels2.com/js/app.js?dt=1559733588:108861:14)
at Module../resources/js/app.js (http://local-hostels2.com/js/app.js?dt=1559733588:117240:44)
at __webpack_require__ (http://local-hostels2.com/js/app.js?dt=1559733588:20:30)
composer.json :
{
"name": "laravel/laravel",
"type": "project",
"description": "The Laravel Framework.",
"keywords": [
"framework",
"laravel"
],
"license": "MIT",
"require": {
"php": "^7.1.3",
"fideloper/proxy": "^4.0",
"fzaninotto/faker": "^1.8",
"intervention/image": "^2.4",
"laracasts/utilities": "^3.0",
"laravel/framework": "5.7.*",
"laravel/tinker": "^1.0",
"orangehill/iseed": "^2.6",
"pusher/pusher-php-server": "^3.4",
"tymon/jwt-auth": "^1.0.0",
"wboyz/laravel-enum": "^0.2.1",
"zizaco/entrust": "^1.9"
},
"require-dev": {
"beyondcode/laravel-dump-server": "^1.0",
"beyondcode/laravel-query-detector": "^1.0",
"filp/whoops": "^2.0",
"mockery/mockery": "^1.0",
"nunomaduro/collision": "^2.0",
"phpunit/phpunit": "^7.0",
"xethron/migrations-generator": "^2.0"
},
"config": {
"optimize-autoloader": true,
"preferred-install": "dist",
"sort-packages": true
},
"extra": {
"laravel": {
"dont-discover": []
}
},
"autoload": {
"psr-4": {
"App\\": "app/"
},
"classmap": [
"database/seeds",
"database/factories"
]
},
"autoload-dev": {
"psr-4": {
"Tests\\": "tests/"
}
},
"minimum-stability": "dev",
"prefer-stable": true,
"scripts": {
"post-autoload-dump": [
"Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
"#php artisan package:discover --ansi"
],
"post-root-package-install": [
"#php -r \"file_exists('.env') || copy('.env.example', '.env');\""
],
"post-create-project-cmd": [
"#php artisan key:generate --ansi"
]
}
}
My package.json :
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"cross-env": "^5.1",
"jquery": "^3.4.0",
"laravel-mix": "^4.0.15",
"lodash": "^4.17.5",
"popper.js": "^1.15.0",
"resolve-url-loader": "^2.3.2",
"sass": "^1.19.0",
"sass-loader": "^7.1.0",
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"font-awesome": "^4.7.0",
"laravel-echo": "^1.5.3",
"marked": "^0.6.2",
"moment": "^2.24.0",
"pusher-js": "^4.4.0",
"vee-validate": "^2.2.5",
"vee-validate-laravel": "^1.1.0",
"vue-carousel": "^0.18.0",
"vue-color": "^2.7.0",
"vue-focus": "^2.1.0",
"vue-form-wizard": "^0.8.4",
"vue-js-modal": "^1.3.28",
"vue-jstree": "^2.1.6",
"vue-moment": "^4.0.0",
"vue-nav-tabs": "^0.5.7",
"vue-notification": "^1.3.16",
"vue-router": "^3.0.6",
"vue-select": "^2.6.4",
"vue-wysiwyg": "^1.7.2",
"vue2-filters": "^0.6.0",
"vuejs-paginate": "^2.1.0",
"vuex": "^3.1.0"
}
}
Actually momentjs is not installed/used in my app, that can be checked in config files above.
It seems not critical now, but I would like to fix it anyway...
Can you please give a hint what could raise this warning and how to fix it?
Thanks!

Well, are you sure you don't use the vue-moment plugin in your code? We can read "vue-moment": "^4.0.0", in your packages.json file. I don't have access to your code but I imagine you're using it somewhere in your code. In your error, we can read arguments that contains _isAMomentObject: true... It should be somewhere a moment object.

Related

How does doing an "npm install" install git hooks?

I am newly(ish) responsible for a git repository. When I clone it and look in the .git/hooks directory, there are only sample hooks.
We use NPM as our package manager for the front end UI. After I run an "npm install", I 'all of a sudden' have real git hooks in .git/hooks. How does this work? What am I looking for?
I figure it is some kind of hook, but I am not sure where to start looking to track it down. In my package.json file I see tslint-react-hooks (TSLint rule that enforces the Rules of Hooks) and react-hook-form (Performant, flexible and extensible forms with easy-to-use validation.), but I think these are red herrings.
I've seen this question Putting Git hooks into a repository which talks about getting hooks in place, but I don't see how it happens for this project.
Here is a copy of my package.json file. Thanks for any insights.
{
"name": "ram",
"version": "1.0.0",
"description": "RAM UI Build Tools",
"scripts": {
"test": "jest --coverage --watchAll",
"testOnce": "jest",
"build": "cross-env NODE_ENV=production node ./Config/prod.js",
"build:dev": "cross-env NODE_ENV=development node ./Config/dev-noserver.js",
"dev": "cross-env NODE_ENV=development nodemon -e js,ts,tsx,json,scss ./Config/dev-noserver.js",
"start": "cross-env NODE_ENV=development node ./Config/dev.js",
"start:full": "webpack-dev-server --progress --config ./Config/dev-noserver-hot.js",
"precommit": "lint-staged"
},
"lint-staged": {
"*.{js,ts,tsx,json,scss}": [
"prettier --write",
"git add"
],
"*.scss": [
"stylelint --fix",
"git add"
],
"*.{ts,tsx}": [
"tslint --fix",
"git add"
]
},
"prettier": {
"singleQuote": true,
"tabWidth": 4,
"printWidth": 120
},
"jest": {
"moduleFileExtensions": [
"ts",
"tsx",
"js"
],
"transform": {
"^.+\\.tsx?$": "ts-jest"
},
"testMatch": [
"**/?(*.)(spec|test).ts?(x)"
],
"modulePaths": [
"<rootDir>/Content"
],
"testPathIgnorePatterns": [
"/node_modules",
"./Config"
],
"collectCoverage": true,
"collectCoverageFrom": [
"**/*.*",
"!**/*.json",
"!**/index.ts"
],
"coveragePathIgnorePatterns": [
"/node_modules/",
"./Config",
"./coverage",
"./Types",
"__snapshots__",
"__tests__",
"index.tsx",
"./Content/Pages",
"./Content/Utils/constants.ts"
],
"coverageReporters": [
"html"
],
"setupFilesAfterEnv": [
"./Config/Test/testFramework.js"
],
"testURL": "http://localhost/"
},
"author": "xxxxxxxxxxxxx",
"license": "UNLICENSED",
"private": true,
"devDependencies": {
"#types/classnames": "2.2.3",
"#types/enzyme": "3.1.10",
"#types/history": "4.6.2",
"#types/jest": "22.2.3",
"#types/jquery": "3.3.1",
"#types/lodash": "4.14.110",
"#types/object-hash": "1.2.0",
"#types/query-string": "6.2.0",
"#types/react-beautiful-dnd": "12.1.2",
"#types/react-bootstrap": "0.32.21",
"#types/react-datepicker": "2.9.5",
"#types/react-dom": "18.0.0",
"#types/react-js-pagination": "3.0.3",
"#types/react-router": "4.0.23",
"#types/react-router-dom": "4.2.6",
"#types/react-test-renderer": "16.0.1",
"#types/react-toggle": "4.0.2",
"#types/styled-components": "5.1.25",
"#types/uuid": "3.4.3",
"#types/webpack-env": "1.13.6",
"#typescript-eslint/eslint-plugin": "5.35.1",
"#typescript-eslint/parser": "5.35.1",
"axios-mock-adapter": "1.15.0",
"cross-env": "5.1.4",
"css-hot-loader": "1.3.9",
"css-loader": "0.28.11",
"ejs-loader": "0.3.1",
"enzyme": "3.11.0",
"enzyme-adapter-react-16": "1.1.1",
"eslint": "8.22.0",
"eslint-config-standard-with-typescript": "22.0.0",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-n": "15.2.5",
"eslint-plugin-promise": "6.0.1",
"eslint-plugin-react": "7.31.0",
"html-webpack-plugin": "3.2.0",
"husky": "0.14.3",
"jest": "26.4.2",
"lint-staged": "13.0.3",
"mini-css-extract-plugin": "0.4.0",
"node-sass": "4.14.0",
"nodemon": "1.17.3",
"postcss-flexbugs-fixes": "3.3.0",
"postcss-loader": "2.1.4",
"prettier": "1.19.1",
"react-test-renderer": "18.2.0",
"sass-loader": "7.0.1",
"style-loader": "0.20.3",
"stylelint": "9.2.0",
"stylelint-config-recommended-scss": "3.2.0",
"stylelint-declaration-strict-value": "1.0.4",
"stylelint-declaration-use-variable": "1.6.1",
"stylelint-formatter-pretty": "1.0.3",
"stylelint-scss": "3.0.0",
"stylelint-webpack-plugin": "0.10.4",
"ts-jest": "26.3.0",
"ts-loader": "8.0.3",
"ts-react": "1.2.1",
"tsconfig-paths-webpack-plugin": "3.0.4",
"tslint": "6.1.3",
"tslint-config-prettier": "1.18.0",
"tslint-loader": "3.5.4",
"tslint-react": "5.0.0",
"tslint-react-hooks": "2.2.2",
"typescript": "4.6.4",
"webpack": "4.46.0",
"webpack-cli": "2.0.14",
"webpack-dev-server": "3.10.3",
"xml2js": "0.4.19"
},
"dependencies": {
"#hapi/cryptiles": "*",
"#types/react-table": "6.7.12",
"axios": "0.27.2",
"babel-loader": "8.2.5",
"bootstrap": "3.3.5",
"chokidar": "3.5.3",
"classnames": "2.2.5",
"core-js": "3.24.1",
"ejs": "3.1.8",
"eslint-config-airbnb": "19.0.4",
"eslint-config-airbnb-base": "15.0.0",
"eslint-config-react-app": "7.0.1",
"eslint-plugin-jsx-a11y": "6.6.1",
"eslint-utils": "3.0.0",
"eventsource": "2.0.2",
"expose-loader": "0.7.5",
"file-loader": "1.1.11",
"font-awesome": "4.7.0",
"highcharts": "10.1.0",
"highcharts-react-official": "3.0.0",
"history": "4.7.2",
"jquery": "2.1.1",
"json-schema": "0.4.0",
"lodash": "4.17.21",
"object-hash": "1.3.1",
"popper": "1.0.1",
"powerbi-client": "2.18.6",
"powerbi-client-react": "1.3.3",
"prop-types": "15.6.1",
"querystring": "0.2.0",
"react": "18.2.0",
"react-beautiful-dnd": "13.0.0",
"react-bootstrap": "0.33.1",
"react-datepicker": "4.8.0",
"react-dev-utils": "12.0.1",
"react-dom": "18.2.0",
"react-filtered-multiselect": "0.5.1",
"react-hook-form": "6.5.3",
"react-input-switch": "2.2.2",
"react-js-pagination": "3.0.3",
"react-promise": "2.0.3",
"react-query": "3.39.0",
"react-router-dom": "4.2.2",
"react-socks": "2.2.0",
"react-string-replace": "0.4.1",
"react-super-select": "1.0.23",
"react-table": "6.8.6",
"react-table-hoc-fixed-columns": "1.0.0-beta.9",
"react-toastify": "5.5.0",
"react-toggle": "4.1.3",
"shell-quote": "1.7.3",
"string-replace-to-array": "1.0.3",
"styled-components": "5.3.5",
"sweetalert": "2.1.2",
"sync-request": "6.0.0",
"tar": "6.1.11",
"ts-node": "10.9.1",
"ts-node-dev": "2.0.0",
"uglify-js": "3.15.5",
"url-parse": "1.5.10",
"uuid": "8.3.2",
"webpack-dev-middleware": "5.3.3"
}
}
Installing devDependency "husky": "0.14.3" is the culprit.

how to add scss file to your vue project

I'm trying to add a package on my project called pretty-checkbox-vue I followed its instruction but it seemed it did not work. The documentation said I need to add the SCSS file so I did
this is my code on vue.config.js
module.exports = {
css: {
loaderOptions: {
scss: {
additionalData: `
#import '~pretty-checkbox/src/pretty-checkbox.scss';
`
}
}
}
};
and this my package.json
{
"name": "janu-form-generator",
"version": "1.0.0",
"description": "",
"main": "dist/janu-form-generator.ssr.js",
"browser": "dist/janu-form-generator.esm.js",
"module": "dist/janu-form-generator.esm.js",
"unpkg": "dist/janu-form-generator.min.js",
"files": [
"dist/*",
"src/**/*.vue"
],
"sideEffects": false,
"scripts": {
"serve": "vue-cli-service serve dev/serve.js",
"prebuild": "rimraf ./dist",
"build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
"build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
"build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
"build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
},
"dependencies": {
"pretty-checkbox-vue": "^1.1.9",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-scss": "^3.0.0",
"sass": "^1.49.8",
"sass-loader": "^10.1.1",
"vuetify": "^2.6.3"
},
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/preset-env": "^7.14.7",
"#rollup/plugin-alias": "^3.1.2",
"#rollup/plugin-babel": "^5.3.0",
"#rollup/plugin-commonjs": "^14.0.0",
"#rollup/plugin-node-resolve": "^9.0.0",
"#rollup/plugin-replace": "^2.4.2",
"#vue/cli-plugin-babel": "^4.5.13",
"#vue/cli-service": "^4.5.13",
"cross-env": "^7.0.3",
"minimist": "^1.2.5",
"rimraf": "^3.0.2",
"rollup": "^2.52.8",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-vue": "^5.1.9",
"vue": "^2.6.14",
"vue-loader": "^17.0.0",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.46.0"
},
"peerDependencies": {
"vue": "^2.6.14"
},
"engines": {
"node": ">=12"
}
}
the problem that I'm experiencing is that the look of the radio input and checkbox did not change

.eslintrc.js file being ignored with create react app and craco

This has been working great for the last couple of years, but we just upgraded a slew of libraries and now eslint, when we run our app, is not referring to our eslintrc file. It's throwing errors for rules that we have either disabled or set to warning. I can type junk into the eslintrc file and nothing errors on build.
The ESLint extension in VSCode does recognize it and running eslint CLI works as expected. When running npm run start or npm run deploy-build, it seems to ignore the eslintrc file.
.eslintrc.js removed many rules for brevity
module.exports = {
"env": {
"browser": true,
"jest": true
},
"extends": "airbnb",
"globals": {
"_satellite": true
},
"parser": "babel-eslint",
"rules": {
"comma-dangle": 0,
"eol-last": 0,
...
"jsx-a11y/anchor-is-valid": [
2,
{
"components": [
"Link"
],
"specialLink": [
"to"
]
}
],
...
"react/jsx-curly-newline": 0, // this is one rule that I'm specifically chasing
...
},
"settings": {
"import/resolver": {
"node": {
"paths": [
"src"
]
}
}
}
}
craco-config.js
const path = require('path');
const { ESLINT_MODES } = require('#craco/craco');
const StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
jest: {
configure: {
setupFiles: [
'jest-localstorage-mock',
'<rootDir>/jest/global_mocks.js',
'<rootDir>/jest/global_variables.js'
],
testResultsProcessor: 'jest-sonar-reporter',
snapshotSerializers: [
'enzyme-to-json/serializer'
],
collectCoverageFrom: [
'src/**/*.js',
'!src/registerServiceWorker.js',
'!src/**/*.stories.js',
'!src/**/*.styles.js'
],
coverageThreshold: {
global: {
branches: 60,
functions: 70,
lines: 80,
statements: 1
}
},
clearMocks: true
}
},
eslint: {
mode: ESLINT_MODES.file
},
webpack: {
plugins: [
new StyleLintPlugin({
configBasedir: __dirname,
context: path.resolve(__dirname, 'src'),
files: ['**/*.scss']
})
]
}
};
local environment
EXTEND_ESLINT=true
REACT_APP_ENV=local
...
package.json
{
"name": "search",
"version": "1.0.0",
"private": true,
"dependencies": {
"#datadog/browser-rum": "^1.12.8",
"#okta/okta-react": "^3.0.4",
"axios": "^0.18.1",
"connected-react-router": "^6.7.0",
"core-js": "^3.6.5",
"debounce": "^1.2.0",
"eslint-plugin-react-hooks": "^4.1.0",
"fast-text-encoding": "^1.0.2",
"focus-within-polyfill": "^5.0.4",
"history": "^4.10.0",
"jshashes": "^1.0.7",
"lodash.groupby": "^4.6.0",
"lodash.sortby": "^4.7.0",
"moment": "^2.24.0",
"moment-timezone": "^0.5.28",
"prop-types": "^15.6.2",
"qs": "^6.5.2",
"react": "^16.13.0",
"react-app-polyfill": "^1.0.6",
"react-click-outside": "^3.0.1",
"react-cursor-position": "^3.0.3",
"react-dom": "^16.13.0",
"react-easy-swipe": "0.0.17",
"react-flexbox-grid": "^2.1.2",
"react-html-parser": "^2.0.2",
"react-inlinesvg": "^1.1.5",
"react-lazyload": "^2.6.2",
"react-number-format": "^4.0.5",
"react-redux": "^7.2.0",
"react-router": "^5.1.0",
"react-router-dom": "^5.1.0",
"react-scripts": "^3.4.1",
"react-slick": "^0.23.1",
"react-sticky-el": "^1.0.20",
"react-toastify": "^4.2.0",
"react-transition-group": "^4.4.0",
"reactjs-popup": "^1.5.0",
"redux": "^4.0.0",
"redux-devtools-extension": "^2.13.8",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"rxjs": "^6.5.5",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.83.0",
"slick-carousel": "^1.8.1",
"smoothscroll-polyfill": "^0.4.3",
"styled-components": "^5.1.1",
"use-clipboard-copy": "^0.1.1",
"uuid": "^7.0.2"
},
"devDependencies": {
"#craco/craco": "^5.6.4",
"#storybook/addon-actions": "^5.0.5",
"#storybook/addon-knobs": "^5.0.6",
"#storybook/addon-links": "^5.0.5",
"#storybook/addons": "^5.0.5",
"#storybook/react": "^5.0.5",
"#testing-library/react": "^10.4.7",
"cross-env": "^7.0.2",
"env-cmd": "^10.1.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"enzyme-to-json": "^3.5.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.6",
"jest-environment-jsdom": "^24.9.0",
"jest-environment-node": "^24.9.0",
"jest-localstorage-mock": "^2.4.0",
"jest-sonar-reporter": "^2.0.0",
"jest-styled-components": "^7.0.2",
"libxmljs": "^0.19.7",
"node-sass-chokidar": "^1.5.0",
"npm-link-shared": "^0.5.6",
"redux-mock-store": "^1.5.3",
"stylelint": "^9.10.1",
"stylelint-config-sass-guidelines": "^5.3.0",
"stylelint-webpack-plugin": "^0.10.5"
},
"scripts": {
"localxf": "cross-env NODE_PATH=src env-cmd -f ./env/localxf craco start",
"test": "cross-env NODE_PATH=src craco test --env=jsdom",
"test:debug": "cross-env NODE_PATH=src craco test --runInBand --no-cache --env=jsdom",
"storybook": "cross-env NODE_PATH=src env-cmd -f ./env/local start-storybook -p 6006",
"build-storybook": "build-storybook",
"deploy-build": "cross-env NODE_PATH=src env-cmd -f ./env/deploy-build craco build",
"start": "cross-env NODE_PATH=src env-cmd -f ./env/local craco start --no-cache"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"ie 11",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie 11"
]
}
}
I suspect there's a library above I have to update but I'm not sure what else to update!
This seems to be a viable workaround:
eslint: {
mode: ESLINT_MODES.extends,
configure: () => {
// Workaround for broken ESLINT_MODES.file mode
return require('./.eslintrc')
}
},

Webpack GZip Compression Creating many bundles/.gz files instead of 1 entire bundle?

I'm playing around with gzip compression for building out my react project (It's a full stack application) when I run the build script with npm I get no errors but in the process it spits me back around 10 bundles with 10 .gz file extensions instead of one and I'm not sure why?
Here is my code:
Production Webpack
const webpack = require("webpack");
const path = require("path");
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
entry: ["babel-polyfill", __dirname + "/src/index.js"],
output: {
path: __dirname + "/public",
filename: "bundle.js",
publicPath: "/"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
query: {
presets: ["react", "env", "stage-0"]
}
}
},
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
}
]
},
plugins: [
new CompressionPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
minRatio: 0.8,
threshold: 10240
}),
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("production")
})
]
};
NPM Build Script
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"client": "webpack-dev-server --port 3312 --progress --color --profile --config webpack.development.config.js --mode development --hot",
"clean": "rm -rf build public/bundle.js",
"server": "nodemon server/main.js",
"sass": "node-sass -w public/assets/scss -o public/assets/css/ --recursive",
"dev": "concurrently \"npm run server\" \"npm run sass\" \"npm run client\"",
"prod": "npm run clean && webpack --config webpack.production.config.js --mode production --progress --colors --profile"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"aws-sdk": "^2.373.0",
"base-64": "^0.1.0",
"body-parser": "^1.18.3",
"cookie-parser": "^1.4.3",
"cors": "^2.8.5",
"data-tip": "0.0.52",
"express": "^4.16.4",
"file-type": "^10.6.0",
"jquery": "^3.3.1",
"moment": "^2.22.2",
"mysql": "^2.16.0",
"nodemailer": "^4.7.0",
"nodemailer-juice": "^1.0.1",
"paypal-rest-sdk": "^1.8.1",
"react": "^16.6.3",
"react-bootstrap": "^0.32.4",
"react-ckeditor-component": "^1.1.0",
"react-confirm-alert": "^2.0.7",
"react-dom": "^16.6.3",
"react-js-pagination": "^3.0.2",
"react-loadable": "^5.5.0",
"react-router-dom": "^4.3.1",
"react-s3-uploader": "^4.8.0",
"read-chunk": "^3.0.0",
"sha256": "^0.2.0"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"browser-sync": "^2.26.3",
"browser-sync-webpack-plugin": "^2.2.2",
"compression-webpack-plugin": "^2.0.0",
"concurrently": "^4.1.0",
"css-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.10.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.27.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}
Screenshot of the output:
This is because you are using Webpack 4, and it comes with automatic code-splitting. You can read how to configure it here:
https://webpack.js.org/guides/code-splitting/

Webpack Dev Server: Unknown argument: NODE_ENV

I have setup my angular js project with webpack. I am getting below error whenever I try to run in development mode:
"Unknown argument: NODE_ENV".
Below is my package.json. I am already using latest version of webpack-dev-server. Please let me know what went wrong here.
Package.json:
{
"name": "My project",
"version": "0.0.1",
"description": "",
"main": "/",
"author": "",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --config webpack/webpack.dev.js --watch --NODE_ENV=dev",
"test": "karma start --NODE_ENV=test",
"build": "webpack --config webpack/webpack.build.js --NODE_ENV=production"
},
"dependencies": {
"angular": "1.6.3",
"angular-datepicker": "^1.0.5",
"angular-file-upload": "^2.2.0",
"angular-flash-alert": "^2.2.4",
"angular-messages": "^1.5.0",
"angular-repository": "^0.1.8",
"angular-resource": "^1.5.0",
"angular-sanitize": "^1.5.5",
"angular-symfony-acl": "^1.0.9",
"angular-symfony-form": "^3.0.0",
"angular-translate": "^2.11.0",
"angular-ui-bootstrap": "^1.3.2",
"angular-ui-router": "^0.2.18",
"angular-voauth2": "^0.1.16",
"angular-youtube-embed": "^1.2.0",
"angularjs-datepicker": "^2.1.3",
"bootstrap": "^3.3.6",
"bootstrap-sass": "3.3.6",
"dotenv": "^4.0.0",
"font-awesome": "4.5.0",
"jquery": "2.2.0",
"lodash": "^4.0.1",
"moment": "^2.12.0",
"ng-file-upload": "^12.0.4",
"ng-infinite-scroll": "^1.2.1",
"postcss-loader": "^0.9.1",
"ui-select": "^0.19.4"
},
"devDependencies": {
"angular-mocks": "1.5.0-rc.2",
"angular-module-mocks": "1.2.19",
"babel-core": "^6.4.5",
"babel-istanbul": "0.6.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.3.13",
"compression-webpack-plugin": "0.3.0",
"connect-history-api-fallback": "^1.2.0",
"css-loader": "^0.18.0",
"file-loader": "0.8.5",
"html-webpack-plugin": "2.7.2",
"webpack-dev-server": "2.4.2",
"istanbul": "0.4.2",
"istanbul-instrumenter-loader": "0.1.3",
"jasmine": "2.4.1",
"karma": "0.13.19",
"karma-coverage": "0.5.3",
"karma-jasmine": "0.3.6",
"karma-phantomjs-launcher": "1.0.0",
"karma-sourcemap-loader": "0.3.7",
"karma-spec-reporter": "0.0.23",
"karma-typescript-preprocessor": "0.0.21",
"karma-webpack": "1.7.0",
"lodash": "4.0.1",
"node-sass": "3.4.2",
"phantomjs-polyfill": "0.0.1",
"phantomjs-prebuilt": "2.1.3",
"raw-loader": "0.5.1",
"sass-loader": "3.1.2",
"style-loader": "0.13.0",
"url-loader": "0.5.7",
"webpack": "1.12.12"
}
}
webpack.dev.js:
var loaders = require("./loaders");
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
build: './src/app.js',
vendors: ['angular', 'bootstrap', 'angular-ui-router', 'ng-file-upload']
},
output: {
filename: '[name].min.js',
path: 'dist'
},
resolve: {
root: __dirname,
extensions: ['', '.js', '.json']
},
resolveLoader: {
modulesDirectories: ["node_modules"]
},
devtool: "source-map",
devServer: {
port: 8080,
historyApiFallback: true
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
inject: 'body',
hash: true
}),
new webpack.ProvidePlugin({
moment: 'moment',
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.jquery': 'jquery'
})
],
module:{
loaders: loaders
}
};
In addition to what #Emre has provided, I had to change the npm start command in package.json to run application in DEV MODE. Then only it worked for me. My package.json now looks as below:
"scripts": {
"start": "NODE_ENV=dev webpack-dev-server --config ./webpack/webpack.dev.js --",
"test": "karma start --NODE_ENV=test",
"build": "webpack --config webpack/webpack.build.js --NODE_ENV=production"
},
Thanks.
You need to define your NODE_ENV in your wepack configuration. This should work:
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'production') // default value if not specified
}
})
]