NPM compiles corrupted app.js - laravel

I am using Laravel 5.5 preset vue and every time I run npm install && npm run dev I get app.js with corrupted characters, a full line of *******
Typically this happens at the end of the file app.js
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.17",
"bootstrap-sass": "^3.3.7",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"vue": "^2.1.10",
"vuetify": "1.0.0-alpha.2"
}
assets/js/app.js file
require('./bootstrap');
window.Vue = require('vue');
window.Vuetify = require('vuetify');
Vue.use(Vuetify);
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('example-vuetify', require('./components/ExampleVuetify.vue'));
const app = new Vue({
el: '#app'
});
The only way I manage to resolve this is by running rm -rf node_modules && npm cache clean && npm install && npm run dev but then I have to wait forever every time I make any changes to components

It seems there is no way to solve this at all, the best way I managed to get this fixed is by running:
rm public/mix-manifest.json && rm public/css/app.css && rm public/js/app.js && npm cache clear --force && npm install && npm run dev
I hope this helps someone

Related

SASS dependency not found in Laravel and Vue.js project

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"
}
}

npm run dev is not working in Laravel 7 project

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.

How to remove bootstrap from Laravel 7 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.

mix.react is not a function? Laravel

Attempting to use react in a Laravel project.
I have run npm install
my webpack.mix.js file is mix.react('resources/assets/js/app.js', 'public/js');
and running npm run dev
gives me an error
/Users/jacobchen/www/fusion2/webpack.mix.js:14
mix.react('resources/assets/js/app.js', 'public/js');
^
TypeError: mix.react is not a function
webpack.mix.js
const { mix } = require('laravel-mix');
mix.react('resources/assets/js/app.js', 'public/js');
Anyone had any experience with this?
Best Regards
Jacob
You additionally need to set up laravel-mix in npm script section in package.json.
From Laravel's package.json:
"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"
},
Full example here:
https://github.com/laravel/laravel/blob/master/package.json

Compilation app.js laravel

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

Resources