Compilation app.js laravel - 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

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

Laravel mix scripts not watching changes

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

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.

NPM compiles corrupted app.js

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

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

Resources