Laravel 5.4 mix npm run dev error - laravel

So I have a laravel 5.4 project and when I run npm install dev I get the following error
dev: node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
This is my package.json
{
"private": true,
"scripts": {
"dev": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"jquery": "^3.1.1",
"laravel-elixir-webpack-react": "^1.0.1",
"laravel-mix": "^0.8.1",
"lodash": "^4.17.4",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"vue": "^2.1.10"
}
}
Why I get this error ?

run this command :
npm install --global cross-env
and also add "gulp": "^3.9.1" in your package.josn under "devDependencies"
This may help you

I have the same problem and y fix it replacing my package.json with this
{
"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.18",
"bootstrap": "^4.0.0",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"vue": "^2.5.7",
"autoprefixer": "^7.1.2",
"babel-core": "^6.26.3",
"babel-eslint": "^7.1.1",
"babel-loader": "^7.1.1",
"babel-plugin-component": "^1.1.0",
"babel-plugin-istanbul": "^4.1.1",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.6.0",
"babel-polyfill": "^6.26.0",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chai": "^4.1.2",
"chalk": "^2.0.1",
"chromedriver": "^2.27.2",
"compression-webpack-plugin": "^1.0.1",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.1.0",
"cross-env": "^5.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^3.19.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.0.0",
"eslint-plugin-import": "^2.6.1",
"eslint-plugin-node": "^4.2.2",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-standard": "^3.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"function-bind": "^1.1.0",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"inject-loader": "^3.0.0",
"karma": "^1.4.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.2",
"lolex": "^1.5.2",
"marked": "^0.3.6",
"mocha": "^3.2.0",
"nightwatch": "^0.9.12",
"node-sass": "^4.5.3",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"phantomjs-prebuilt": "^2.1.14",
"raw-loader": "^0.5.1",
"sass-loader": "^5.0.1",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"sinon": "^2.1.0",
"sinon-chai": "^2.8.0",
"url-loader": "^0.5.8",
"vue-loader": "^13.0.4",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"vue-test-utils": "^1.0.0-beta.3",
"webpack": "^3.2.0",
"webpack-bundle-analyzer": "^2.2.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0"
},
"dependencies": {
"chartist": "^0.11.0",
"easy-pie-chart": "^2.1.7",
"element-ui": "^2.0.3",
"fullcalendar": "^3.6.2",
"google-maps": "^3.2.1",
"jquery": "^3.2.1",
"jvectormap-next": "^3.0.0",
"perfect-scrollbar": "0.7.1",
"sweetalert2": "^6.11.4",
"vee-validate": "^2.0.0-rc.21",
"vue": "^2.5.2",
"vue-clickaway": "^2.1.0",
"vue-form-wizard": "^0.7.0",
"vue-nav-tabs": "^0.5.4",
"vue-notifyjs": "^0.2.0",
"vue-router": "^3.0.1"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
}
after, i make this things :
rm -rf node_modules
rm package-lock.json yarn.lock
npm cache clear --force
npm install
npm run dev
I hope this can help you.

Because you are trying to install dependencies.
To install devDependencies you could do
npm install --only=dev
To run dev you do
npm run dev

Related

Laravel Mix Critical CSS - criticalCss is not a function

I have been trying to compile Webpack with laravel-mix, laravel-mix-purgecss, and laravel-mix-criticalcss. But I have been facing issues compiling it with laravel-mix-criticalcss. If I comment the criticalcss in webpack.mix.js, it works fine, but with criticalcss it throws an error. I have upgraded npm and all packages, but whenever I try to compile webpack, it throws this error:
[webpack-cli] TypeError:
mix.js(...).options(...).postCss(...).options(...).sass(...).sass(...).criticalCss
is not a function
I have included laravel-mix-criticalcss in webpack.mix.js
require('laravel-mix-criticalcss');
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"dependencies": {
"intersection-observer": "^0.12.0",
"laravel-vue-pagination": "^3.0.0",
"sass-migrator": "^1.5.4",
"v-lazy-image": "^2.1.1",
"vanilla-lazyload": "^17.6.1",
"vue-clickaway": "^2.2.2",
"vue-slider-component": "^3.2.15",
"vue-sweetalert2": "^5.0.2",
"vuedraggable": "^2.24.3"
},
"devDependencies": {
"autoprefixer": "^10.4.4",
"axios": "^0.26.1",
"bootstrap": "^4.6.0",
"bs-custom-file-input": "^1.3.4",
"cross-env": "^7.0.3",
"jquery": "^3.6.0",
"laravel-mix": "^6.0.43",
"laravel-mix-criticalcss": "^0.1.0",
"laravel-mix-purgecss": "^6.0.0",
"laravel-mix-workbox": "^0.1.4",
"livewire-sortable": "^0.2.2",
"lodash": "^4.17.21",
"popper.js": "^1.16.1",
"postcss": "^8.4.12",
"resolve-url-loader": "^5.0.0",
"sass": "^1.49.9",
"sass-loader": "^12.6.0",
"tailwindcss": "^3.0.23",
"vue": "^3.2.31",
"vue-template-compiler": "^2.6.14",
"workbox-webpack-plugin": "^6.5.1"
}
}
Try using a new version of Laravel Mix Critical.
npm i laravel-mix-criticalcss#latest --save-dev
Or use this package.json and do npm install.
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"dependencies": {
"intersection-observer": "^0.12.0",
"laravel-vue-pagination": "^3.0.0",
"sass-migrator": "^1.5.4",
"v-lazy-image": "^2.1.1",
"vanilla-lazyload": "^17.6.1",
"vue-slider-component": "^3.2.15",
"vue-sweetalert2": "^5.0.2",
"vuedraggable": "^2.24.3"
},
"devDependencies": {
"autoprefixer": "^10.4.4",
"axios": "^0.26.1",
"bootstrap": "^4.6.0",
"bs-custom-file-input": "^1.3.4",
"cross-env": "^7.0.3",
"jquery": "^3.6.0",
"laravel-mix": "^6.0.43",
"laravel-mix-criticalcss": "^1.0.2",
"laravel-mix-purgecss": "^6.0.0",
"laravel-mix-workbox": "^0.1.4",
"livewire-sortable": "^0.2.2",
"lodash": "^4.17.21",
"popper.js": "^1.16.1",
"postcss": "^8.4.12",
"resolve-url-loader": "^5.0.0",
"sass": "^1.49.9",
"sass-loader": "^12.6.0",
"tailwindcss": "^3.0.23",
"vue": "^3.2.31",
"vue-template-compiler": "^2.6.14",
"workbox-webpack-plugin": "^6.5.1"
}
}

npm run production error : "unknown option no-progress"

I am trying to run the command npm run dev or npm run production. But none of them are successful. Once I run the command I am getting an error like in image :
error after running npm run prod
My package.json file is like below :
{
"private": true,
"scripts": {
"dev": "npm run development",
"dev:all": "concurrently \"npm run dev --section=js && npm run build:lang\" \"npm run dev --section=css\" \"npm run dev --section=server\" --kill-others-on-fail",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"build:lang": "cross-env babel-node ./lang.script.js",
"clear:babel-cache": "rimraf -rf ./node_modules/.cache/babel-loader/*",
"clear:messages": "rimraf -rf ./resources/messages/*",
"watch": "npm run development -- --watch",
"watch:all": "concurrently \"npm run watch --section=js\" \"npm run watch --section=css\" \"npm run watch --section=server\" --kill-others-on-fail",
"watch-poll": "npm run watch -- --watch-poll",
"watch-poll:all": "concurrently \"npm run watch-poll --section=js\" \"npm run watch-poll --section=css\" \"npm run watch-poll --section=server\" --kill-others-on-fail",
"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",
"hot:all": "concurrently \"npm run hot --section=js\" --kill-others-on-fail",
"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",
"prod:all": "concurrently \"npm run prod --section=js && npm run build:lang\" \"npm run prod --section=css\" \"npm run prod --section=server\" --kill-others-on-fail",
"ide": "php artisan ide-helper:generate && php artisan ide-helper:meta && php artisan ide-helper:models -N"
},
"devDependencies": {
"#ant-design/icons": "^4.4.0",
"#babel/node": "^7.12.10",
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#babel/plugin-proposal-object-rest-spread": "^7.12.1",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/preset-react": "^7.12.10",
"#hot-loader/react-dom": "^17.0.1",
"#loadable/component": "^5.14.1",
"#ungap/url-search-params": "^0.2.2",
"antd": "^4.11.2",
"autoprefixer": "^10.2.3",
"axios": "^0.21",
"babel-plugin-import": "^1.13.3",
"babel-plugin-react-intl": "^3.2.1",
"babel-plugin-recharts": "^1.2.1",
"clean-webpack-plugin": "^3.0.0",
"cross-env": "^7.0.3",
"css-loader": "^5.0.1",
"echarts": "^5.0.1",
"echarts-for-react": "^2.0.16",
"fast-deep-equal": "^3.1.3",
"file-loader": "^6.2.0",
"flag-icon-css": "^3.5.0",
"fs": "0.0.1-security",
"glob": "^7.1.6",
"history": "^5.0.0",
"install": "^0.13.0",
"laravel-echo": "^1.10.0",
"laravel-mix": "^6.0.11",
"less": "4.1.0",
"less-vars-to-js": "^1.3.0",
"line-awesome": "github:icons8/line-awesome",
"line-height": "^0.3.1",
"lodash": "^4.17.20",
"lodash-webpack-plugin": "^0.11.6",
"mkdirp": "^1.0.4",
"moment": "^2.29.1",
"node-sass": "^5.0.0",
"nprogress": "^0.2.0",
"postcss-less": "^4.0.0",
"prop-types": "^15.7.2",
"pusher-js": "^7.0.3",
"react-dnd": "^11.1.3",
"react-google-recaptcha": "^2.1.0",
"react-hot-loader": "^4.13.0",
"react-intl": "^5.10.19",
"react-motion": "^0.5.2",
"react-redux": "^7.2.2",
"react-router-redux": "^5.0.0-alpha.9",
"react-scrollbar": "^0.5.6",
"react-slick": "^0.28.0",
"recharts": "^2.0.4",
"redux": "^4.0.5",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"resolve-url-loader": "^3.1.2",
"rfs": "^9.0.3",
"sass": "^1.32.5",
"sass-loader": "^10.1.1",
"socket.io-client": "^3.1.0",
"style-loader": "^2.0.0",
"url-search-params": "^1.1.0",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.19.0",
"webpack-bundle-analyzer": "^4.4.0"
},
"browserslist": [
"since 2015"
],
"dependencies": {
"#ant-design/dark-theme": "^2.0.2",
"#tinymce/tinymce-react": "^3.9.0",
"animate.css": "^4.1.1",
"concurrently": "^5.3.0",
"connected-react-router": "^6.8.0",
"cropperjs": "^1.5.9",
"cryptocoins-icons": "^2.9.0",
"dompurify": "^2.2.6",
"husky": "^4.3.8",
"intl-tel-input": "^17.0.8",
"laravel-echo-server": "^1.6.2",
"laravel-mix-merge-manifest": "^1.0.1",
"less-loader": "^7.3.0",
"memfs": "^3.2.0",
"qrcode.react": "^1.0.1",
"raw-loader": "^4.0.2",
"rc-color-picker": "^1.2.6",
"react": "^17.0.1",
"react-bottom-scroll-listener": "^5.0.0",
"react-cryptocoins": "^1.0.11",
"react-dom": "^17.0.1",
"react-full-screen": "^0.3.1",
"react-grid-layout": "^1.2.0",
"react-helmet": "^6.1.0",
"react-idle-timer": "^4.5.2",
"react-infinite-scroller": "^1.2.4",
"react-phone-input-2": "^2.13.9",
"react-phone-number-input": "^3.1.10",
"react-quill": "^1.3.5",
"react-router-dom": "^5.2.0",
"rimraf": "^3.0.2",
"simplebar-react": "^2.3.0",
"tinymce": "^5.6.2"
},
"husky": {
"hooks": {
"pre-commit": "npm run clear:babel-cache && npm run clear:messages && npm run prod:all && git add ."
}
}
}
My webpack.mix.js file is like below:
const rimraf = require('rimraf');
if(['js', 'css'].includes(process.env.npm_config_section)){
rimraf.sync('./public/mix-manifest.json');
}
if(['server'].includes(process.env.npm_config_section)){
rimraf.sync('./public/server/mix-manifest.json');
}
if (['js', 'css', 'server'].includes(process.env.npm_config_section)) {
require(`${__dirname}/webpack.${process.env.npm_config_section}.mix.js`)
} else {
throw new Error('Invalid section argument!')
}
webpack folder is inside of node_modules in the directory where I have installed my laravel. (/home/coins/coins).
I am using the latest version of webpack and latest version of npm. Node version is : v14.15.4
It took my 1 week and still I am not able to figure it out. I am not able to run anything related to npm run ... .
P.S: There are some packages and dependencies were outdated and I have used npm update in order to update the packages which is mentioned in original package.json. So I am putting original package.json before I made an update maybe this is the reason why I am getting this error :
{
"private": true,
"scripts": {
"dev": "npm run development",
"dev:all": "concurrently \"npm run dev --section=js && npm run build:lang\" \"npm run dev --section=css\" \"npm run dev --section=server\" --kill-others-on-fail",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"build:lang": "cross-env babel-node ./lang.script.js",
"clear:babel-cache": "rimraf -rf ./node_modules/.cache/babel-loader/*",
"clear:messages": "rimraf -rf ./resources/messages/*",
"watch": "npm run development -- --watch",
"watch:all": "concurrently \"npm run watch --section=js\" \"npm run watch --section=css\" \"npm run watch --section=server\" --kill-others-on-fail",
"watch-poll": "npm run watch -- --watch-poll",
"watch-poll:all": "concurrently \"npm run watch-poll --section=js\" \"npm run watch-poll --section=css\" \"npm run watch-poll --section=server\" --kill-others-on-fail",
"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",
"hot:all": "concurrently \"npm run hot --section=js\" --kill-others-on-fail",
"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",
"prod:all": "concurrently \"npm run prod --section=js && npm run build:lang\" \"npm run prod --section=css\" \"npm run prod --section=server\" --kill-others-on-fail",
"ide": "php artisan ide-helper:generate && php artisan ide-helper:meta && php artisan ide-helper:models -N"
},
"devDependencies": {
"#ant-design/icons": "^2.1.0",
"#babel/node": "^7.4.5",
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-proposal-object-rest-spread": "^7.8.3",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-react": "^7.0.0",
"#hot-loader/react-dom": "^16.8.6",
"#loadable/component": "^5.10.1",
"#ungap/url-search-params": "^0.1.2",
"antd": "^3.23.1",
"autoprefixer": "^9.6.1",
"axios": "^0.18",
"babel-plugin-import": "^1.11.2",
"babel-plugin-react-intl": "^3.2.1",
"babel-plugin-recharts": "^1.2.0",
"clean-webpack-plugin": "^3.0.0",
"cross-env": "^5.1",
"css-loader": "^3.2.0",
"echarts": "^4.2.1",
"echarts-for-react": "^2.0.15-beta.0",
"fast-deep-equal": "^2.0.1",
"file-loader": "^4.2.0",
"flag-icon-css": "^3.3.0",
"fs": "0.0.1-security",
"glob": "^7.1.4",
"history": "^4.9.0",
"install": "^0.12.2",
"laravel-echo": "^1.5.4",
"laravel-mix": "^4.0.7",
"less": "2.7.3",
"less-vars-to-js": "^1.3.0",
"line-awesome": "github:icons8/line-awesome",
"line-height": "^0.3.1",
"lodash": "^4.17.11",
"lodash-webpack-plugin": "^0.11.5",
"mkdirp": "^0.5.1",
"moment": "^2.24.0",
"node-sass": "^4.13.0",
"nprogress": "^0.2.0",
"postcss-less": "^3.1.4",
"prop-types": "^15.7.2",
"pusher-js": "^4.4.0",
"react-dnd": "^5.0.0",
"react-google-recaptcha": "^1.0.5",
"react-hot-loader": "^4.11.1",
"react-intl": "^3.0.0-beta-8",
"react-motion": "^0.5.2",
"react-redux": "^7.1.0",
"react-router-redux": "^5.0.0-alpha.9",
"react-scrollbar": "^0.5.6",
"react-slick": "^0.23.1",
"recharts": "^1.8.5",
"redux": "^4.0.0",
"redux-saga": "^0.16.0",
"redux-thunk": "^2.3.0",
"resolve-url-loader": "^2.3.1",
"rfs": "^8.0.4",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"socket.io-client": "^2.2.0",
"style-loader": "^0.23.1",
"url-search-params": "^1.1.0",
"vue-template-compiler": "^2.6.10",
"webpack-bundle-analyzer": "^3.3.2"
},
"browserslist": [
"since 2015"
],
"dependencies": {
"#ant-design/dark-theme": "^0.2.2",
"#tinymce/tinymce-react": "^3.3.2",
"animate.css": "^3.7.2",
"concurrently": "^5.0.0",
"connected-react-router": "^6.5.2",
"cropperjs": "^1.5.5",
"cryptocoins-icons": "^2.9.0",
"dompurify": "^2.0.7",
"husky": "^3.0.8",
"intl-tel-input": "^16.0.3",
"laravel-mix-merge-manifest": "^0.1.2",
"less-loader": "^5.0.0",
"memfs": "^2.15.5",
"qrcode.react": "^0.9.3",
"raw-loader": "^3.1.0",
"rc-color-picker": "^1.2.6",
"react": "^16.8.6",
"react-bottom-scroll-listener": "^3.0.0",
"react-cryptocoins": "^1.0.11",
"react-dom": "^16.9.0",
"react-full-screen": "^0.2.4",
"react-grid-layout": "^0.17.1",
"react-helmet": "^5.2.1",
"react-idle-timer": "^4.2.9",
"react-infinite-scroller": "^1.2.4",
"react-phone-input-2": "^2.9.5",
"react-phone-number-input": "^2.3.21",
"react-quill": "^1.3.3",
"react-router-dom": "^5.0.1",
"rimraf": "^3.0.0",
"simplebar-react": "^1.2.3",
"tinymce": "^4.9.6"
},
"husky": {
"hooks": {
"pre-commit": "npm run clear:babel-cache && npm run clear:messages && npm run prod:all && git add ."
}
}
}
Any help would be highly appreciated.
Laravel Mix 6 removes a number of options from the CLI. You will need to update the scripts section of your package.json file accordingly.
See Update Your NPM Scripts
https://laravel-mix.com/docs/6.0/upgrade#update-your-npm-scripts
Before:
"scripts": {
"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 --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"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"
}
After:
"scripts": {
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"production": "mix --production"
}
Or consider reverting to a previous version of Mix.
Edit: If you choose to keep Mix 6, you will want to read the entire upgrade guide, as there are most likely additional changes to webpack.mix.js required to make things work.
I had the same issue after upgrading mix so I just reverted mix back to v5 specifically v5.0.5 running npm install laravel-mix#5.0.5 in the app root

webpack.js is not found in laravel vue app?

i am using vue in laravel and trying run npm run dev but it is giving me this error
code: 'MODULE_NOT_FOUND',
requireStack: [
'G:\\laravel-vuetify-spa-starter\\node_modules\\webpack-cli\\bin\\utils\\convert-argv.js',
'G:\\laravel-vuetify-spa-starter\\node_modules\\webpack-cli\\bin\\cli.js',
'G:\\laravel-vuetify-spa-starter\\node_modules\\webpack\\bin\\webpack.js'
]
npm ERR! # development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpa
ck.config.js`
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": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"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": {
"#babel/core": "^7.11.1",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/preset-env": "^7.11.0",
"#babel/preset-react": "^7.0.0",
"and": "0.0.3",
"babel-cli": "^6.26.0",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"eslint": "^5.9.0",
"install": "^0.12.2",
"jest": "^23.6.0",
"npm": "^6.4.1",
"sass": "^1.26.10",
"sass-loader": "^7.3.1",
"vue": "^2.6.11",
"vue-router": "^3.4.3",
"vue-template-compiler": "^2.6.11",
"vuetify": "^2.3.9",
"vuetify-loader": "^1.4.3",
"vuetify-toast-snackbar": "^0.6.1",
"vuex": "^3.5.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"cross-env": "^7.0.2",
"css-loader": "^1.0.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.11.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"resolve-url-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"webpack-dev-server": "^3.1.10"
}
}
How i can solve this issue ?
The development script in your package.json is attempting to load the webpack config from laravel-mix and you don't have it installed
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules
--config=node_modules/laravel-mix/setup/webpack.config.js",
Just install laravel-mix or create your own webpack config
npm i laravel-mix
And make sure that you have webpack.mix.js on the root directory if you decide to use the mix wrapper
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');

Laravel + Vue: Bundle size is too large but can't tell why

I am using Vue for a small part of a laravel app. I'm not using it for images so it's just the js and css inside of the Vue components. It's 256kb and even after minifying it, it's somehow 256kb as well. I just posted my package.json file below. Is there any package that looks like a duplicate? Or any other ways to reduce the bundle size?
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "cross-env NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.2",
"laravel-mix": "^4.0.14",
"lodash": "^4.16.2",
"resolve-url-loader": "^2.3.1",
"sass": "^1.17.2",
"sass-loader": "^7.1.0",
"vue": "^2.0.1",
"vue-loader": "^15.7.0",
"vue-resource": "^1.0.3",
"vue-template-compiler": "^2.6.8"
},
"dependencies": {
"axios": "^0.18.0",
"cross-env": "^5.2.0"
}
}```

Module not found: Error: Can't resolve 'flag-icon-css' in

I am going to install this admin panel https://coreui.io/ (free version) in my laravel project. It contains a package.json file with the following dependencies:
"dependencies": {
"#coreui/coreui": "^2.1.5",
"#coreui/coreui-plugin-chartjs-custom-tooltips": "1.2.0",
"#coreui/icons": "0.3.0",
"bootstrap": "^4.2.1",
"chart.js": "2.7.3",
"core-js": "^2.6.1",
"flag-icon-css": "^3.2.1",
"font-awesome": "4.7.0",
"jquery": "3.3.1",
"pace-progress": "1.0.2",
"perfect-scrollbar": "^1.4.0",
"popper.js": "^1.14.6",
"simple-line-icons": "2.4.1"
},
So I am just going to put these dependencies in my package.json and run
npm install and npm run dev. My project's packaje.json is
{
"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"
},
"dependencies": {
"#coreui/coreui": "^2.1.6",
"#coreui/coreui-plugin-chartjs-custom-tooltips": "1.2.0",
"#coreui/icons": "0.3.0",
"bootstrap": "^4.2.1",
"chart.js": "2.7.3",
"core-js": "^2.6.1",
"flag-icon-css": "^3.2.1",
"font-awesome": "^4.7.0",
"jquery": "3.3.1",
"node-sass": "^4.11.0",
"pace": "*",
"pace-progress": "1.0.2",
"perfect-scrollbar": "^1.4.0",
"popper.js": "^1.14.6",
"simple-line-icons": "^2.4.1"
},
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"css-loader": "^2.1.0",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.3"
}
}
But as result I see the following:
So, how I can fix it? What is wrong?
First of all ensure you have installed all packages successfully. I personally recommend you delete your node_modules then run npm install.
I think the problem is that your project doesn't found it's CSS/SASS dependencies.
Ensure to import all CSS/SASS files into your app.scss file.
For example for Simple Line Icons package you should do something like this.
#import "~simple-line-icons/scss/simple-line-icons";
Also double check all js. components
For example in your app.js
import 'coreui';

Resources