Im using webpack to run a watch on .js files being changed, but I need to use wildcards instead of specific file names for my project. I'm currently using the commands below and it works fine and compiles all the expected files when I run npm run watch, but it will never run again after I make a change directly in any of the files. I have to stop watching and re-run the same command again and again. Is there something I am missing?
const mix = require('laravel-mix');
mix.scripts([
'resources/js/vendor/**/*.js',
'resources/js/modules/**/*.js',
'resources/js/plugins/**/*.js'
], 'public/js/site.js');
Package file:
{
"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": {
"autoprefixer": "^9.7.6",
"bulma": "^0.9.0",
"cross-env": "^5.1",
"laravel-mix": "^4.0",
"laravel-mix-purgecss": "^4.1.0",
"node-sass": "^4.14.1",
"postcss-import": "^12.0.1",
"postcss-nested": "^4.2.1",
"postcss-preset-env": "^6.7.0",
"resolve-url-loader": "^3.1.0",
"sass": "^1.26.10",
"sass-loader": "^7.1.0",
"tailwindcss": "^1.3.5",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.44.1"
},
"dependencies": {}
}
Edit your package.json file - change this:
"watch": "npm run development -- --watch",
To this:
"watch": "node_modules/.bin/webpack --watch --watch-poll --config=node_modules/laravel-mix/setup/webpack.config.js",
Related
I inherited a Laravel project that uses Vue.js as the front end. However, I can't seem to get things to work.
Here are the commands I executed:
john#mail:~/$ cd ~/html/app
john#mail:~/html/app$ composer install
john#mail:~/html/app$ php artisan migrate ---> at this point the website is viewable, so i guess all the npm resources were already compiled with the project
john#mail:~/html/app$ npm install
john#mail:~/html/app$ npm run watch
But the last command yielded the results below.
# watch /var/www/html/app cross-env NODE_ENV=development
node_modules/webpack/bin/webpack.js --watch --progress --hide-modules
--config=node_modules/laravel-mix/setup/webpack.config.js
10% building modules 1/1 modules 0 active Webpack is watching the
files…
95% emitting ERROR Failed to compile
with 14 errors
7:16:18 PM
This dependency was not found:
/var/www/html/app/resources/assets/sass/app.scss in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
To install it, you can run: npm install --save
/var/www/html/app/resources/assets/sass/app.scss
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": {
"axios": "^0.17",
"bootstrap-sass": "^3.3.7",
"cross-env": "^5.1.3",
"jquery": "^3.2",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"node-sass": "^6.0.1",
"sass": "^1.35.1",
"sass-loader": "^12.1.0",
"vue": "^2.5.7"
},
"dependencies": {
"foundation": "^4.2.1-1",
"jquery-ui": "^1.12.1",
"lang.js": "^1.1.14",
"slick-carousel": "^1.8.1"
}
}
Any ideas how I can resolve this issue? To me, the instruction to npm install --save /var/www/html/app/resources/assets/sass/app.scss doesn't seem right.
You have eight outdated packages in your package.json. You may want to start there and see what errors if any, come next.
axios ^0.17 → ^0.21
bootstrap-sass ^3.3.7 → ^3.4.1
cross-env ^5.1.3 → ^7.0.3
jquery ^3.2 → ^3.6
laravel-mix ^1.0 → ^6.0
lodash ^4.17.4 → ^4.17.21
sass ^1.35.1 → ^1.35.2
vue ^2.5.7 → ^2.6.14
Update your package.json with the following and then run npm run prod.
{
"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"
},
"devDependencies": {
"axios": "^0.21",
"bootstrap-sass": "^3.4.1",
"cross-env": "^7.0.3",
"foundation": "^4.2.1-1",
"jquery": "^3.6",
"jquery-ui": "^1.12.1",
"lang.js": "^1.1.14",
"laravel-mix": "^6.0",
"lodash": "^4.17.21",
"node-sass": "^6.0.1",
"resolve-url-loader": "^4.0.0",
"sass": "^1.35.2",
"sass-loader": "^12.1.0",
"slick-carousel": "^1.8.1",
"vue": "^2.6.14"
}
}
I am working with Laravel 7, installed auth bootstrap and ran npm install command as well. After I ran npm run dev command the following error messages occurred:
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
[webpack-cli] Error: Unknown option '--hide-modules'
[webpack-cli] Run 'webpack --help' to see available commands and options
How could I fix this problem?
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 --disable-host-check --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.21.1",
"bootstrap": "^4.0.0",
"cross-env": "^7.0",
"jquery": "^3.2",
"laravel-mix": "^6.0.25",
"lodash": "^4.17.19",
"popper.js": "^1.12",
"resolve-url-loader": "^3.1.0",
"webpack": "^5.23.0"
}
}
I had the same problem and I solved it with below steps:
add "webpack": "^5.23.0" in package.json
run commands:
npm uninstall sass
npm uninstall sass-loader
rm -rf node_modules
rm package-lock.json yarn.lock
npm cache clear --force
npm install
after that npm run dev worked properly.
This is my first time I'm using Laravel. When laravel new <project> is executed, it automatically contains:
bootstrap folder
bootstrap.js
require('./bootstrap'); in app.js
My package.json file
{
"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 --disable-host-check --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",
"cross-env": "^7.0",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"resolve-url-loader": "^3.1.0",
"sass": "^1.15.2",
"sass-loader": "^8.0.0"
}
}
How do I remove/uninstall it? I don't need Bootstrap since I already have Tailwind to deal with CSS. I don't want unused file laying around in my project. Thanks.
When I run npm run watch or npm run dev I get the following error:
# watch /Applications/MAMP/htdocs/stock
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js 10% building modules 1/1 modules 0 active. Webpack is watching the files…
10% building modules 6/8 modules 2 active
…/stock/resources/assets/js/bootstrap.jsTypeError:
dep.getResourceIdentifier is not a function
at addDependency (/Applications/MAMP/htdocs/stock/node_modules/webpack/lib/Compilation.js:402:30)
at iterationOfArrayCallback (/Applications/MAMP/htdocs/stock/node_modules/webpack/lib/Compilation.js:88:3)
at addDependenciesBlock (/Applications/MAMP/htdocs/stock/node_modules/webpack/lib/Compilation.js:422:5)
at Compilation.processModuleDependencies (/Applications/MAMP/htdocs/stock/node_modules/webpack/lib/Compilation.js:433:4)
at afterBuild (/Applications/MAMP/htdocs/stock/node_modules/webpack/lib/Compilation.js:560:16)
at _this.buildModule.err (/Applications/MAMP/htdocs/stock/node_modules/webpack/lib/Compilation.js:606:11)
at callback (/Applications/MAMP/htdocs/stock/node_modules/webpack/lib/Compilation.js:357:35)
at module.build.error (/Applications/MAMP/htdocs/stock/node_modules/webpack/lib/Compilation.js:393:12)
at handleParseResult (/Applications/MAMP/htdocs/stock/node_modules/webpack/lib/NormalModule.js:369:12)
at doBuild.err (/Applications/MAMP/htdocs/stock/node_modules/webpack/lib/NormalModule.js:391:6)
at runLoaders (/Applications/MAMP/htdocs/stock/node_modules/webpack/lib/NormalModule.js:270:12)
at /Applications/MAMP/htdocs/stock/node_modules/loader-runner/lib/LoaderRunner.js:370:3
at iterateNormalLoaders (/Applications/MAMP/htdocs/stock/node_modules/loader-runner/lib/LoaderRunner.js:211:10)
at Array. (/Applications/MAMP/htdocs/stock/node_modules/loader-runner/lib/LoaderRunner.js:202:4)
at Storage.finished (/Applications/MAMP/htdocs/stock/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
at provider (/Applications/MAMP/htdocs/stock/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9)
at /Applications/MAMP/htdocs/stock/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:532:3) ^C%
I’ve tried to reinstall npm and tried to switch back to a lower npm/webpack version but that didn’t help.
Deleted the node_modules and did npm cache clean --force + npm install but that didn't work as well.
The last thing I did before this error came up was install sass loader, to fix an error with sass.
When I delete the sass loader I still getting this error.
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": "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": {
"axios": "^0.18",
"cross-env": "^5.1.4",
"file-loader": "^1.1.11",
"laravel-mix": "^2.1.1",
"node-sass": "^4.8.3",
"popper.js": "^1.14.3",
"sass-loader": "^6.0.7",
"vue": "^2.5.16",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14"
},
"dependencies": {
"bootstrap": "^4.0.0-beta",
"bootstrap-sass": "^3.3.7",
"bootstrap-vue": "^2.0.0-rc.6",
"css-loader": "^0.28.11",
"font-awesome": "^4.7.0",
"ionicons": "^3.0.0",
"iview": "^2.12.0",
"jquery": "^3.3.1",
"js-cookie": "^2.2.0",
"less": "^3.0.1",
"less-loader": "^4.1.0",
"npm-watch": "^0.3.0",
"vue-i18n": "^7.6.0",
"vue-resource": "^1.5.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
}
}
My webpack.mix.js:
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Node version: v9.8.0
Npm version: 5.8.0
OS: MacOS Sierra 10.12.5
Laravel framework: 5.4.36
I'm having a problem with laravel 5.4 I'm trying to put a personal js library and I'm not getting it
I'm also not able to remove the vue.js
I think it's in the compilation of the lavender mix
my files
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 --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.3",
"jquery": "^3.1.1",
"laravel-mix": "0.*",
"lodash": "^4.17.4"
}
}
assests/js/app.js
require('./bootstrap');
webpack.mix.js
const { mix } = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
.js('resources/assets/js/cidades-estados-1-4.js', 'public/js');
I tried an npm update and then an npm run dev or prod but it does not update, it is still with the vue.js that I removed
My app.js is giant