I'm running a Laravel project, and I have some vue files which I need to change (for example, erasing some stuff), but the thing is I erase them from the vue file, but they are still appearing on the website. If I modify anything else, like a welcome.blade or whatsoever, it does work, but not with this vue files.
Only time I got it to work was stopping the project, running npm run dev, npm run watch --poll and starting the server again with php artisan serve, but when I tried doing it again, it didn't work.
I don't know if I am missing something obvious here. Please help my out :) and also, if I'm missing some information here please tell me so I can post it so someone can help me. Thanks!
This is my package.json that is on my root folder.
{
"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",
"bootstrap": "^4.1.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.11"
}
}
Well your file need to be compile so you need to run when editing npm run watch and you'll see live changement on reload and possibly some error discarding on the terminal you are running it from.
This is explicitly specify in the "tips" of Laravel documentation about Vue.
Related
I'm having an error running npm run watch with laravel 8 when running I get this error:
Previously I got this error "cross-env" is not recognized as an internal or external command and run these commands:
npm uninstall cross-env npm install cross-env --no-bin-links npm run watch
this would be more my package.json configuration
"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": {
"#tailwindcss/forms": "^0.2.1",
"alpinejs": "^2.8.2",
"autoprefixer": "^10.1.0",
"axios": "^0.19",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"postcss": "^8.2.1",
"postcss-import": "^12.0.1",
"resolve-url-loader": "^3.1.0",
"tailwindcss": "^2.0.2",
"vue-template-compiler": "^2.6.14"
},
"dependencies": {
"#tailwindcss/forms": "^0.3.3",
"cross-env": "^7.0.3",
"node-sass": "^6.0.1"
}
when executing npm run watch it does not compile and the following appears
ERROR Failed to compile with 2 errors 10:22:41
error in ./resources/css/app.css
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
at Processor.normalize (c:\laragon\www\projet1\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:153:15)
at new Processor (c:\laragon\www\projet1\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:56:25)
at postcss (c:\laragon\www\projet1\node_modules\postcss-loader\node_modules\postcss\lib\postcss.js:55:10)
at c:\laragon\www\projet1\node_modules\postcss-loader\src\index.js:140:12
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at c:\laragon\www\projet1\node_modules\webpack\lib\NormalModule.js:316:20
at c:\laragon\www\projet1\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at c:\laragon\www\projet1\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (c:\laragon\www\projet1\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at c:\laragon\www\projet1\node_modules\postcss-loader\src\index.js:208:9
at processTicksAndRejections (internal/process/task_queues.js:97:5)
I'm in the process of moving a Vue.js app into a new repository, extracting it from it's old host.
At this point I have literally copied the app from one folder to another but it won't build. It builds fine in the first folder but not in the second.
As soon as I type npm run build / npm run build-app-only (or anything else for that matter) I get this...
npm ERR! missing script: vue-cli-service
or
node-sass is not recognised as an internal or external command
Here's the scrips part of my package.json....
"scripts": {
"serve-vstudio": "npm run messaging-css && vue-cli-service serve",
"serve": "npm run messaging-css && vue-cli-service serve --port 8080",
"build": "npm run messaging-css && vue-cli-service build",
"build-app-only": "npm run vue-cli-service build",
"build-debug": "npm run messaging-css && vue-cli-service build --mode staging",
"test": "vue-cli-service test:unit \"\\.*\\.spec\\.js$\" --testPathIgnorePatterns=\"\\long/.*\\.spec\\.js$\"",
"test-all": "cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" vue-cli-service test:unit \"\\.*\\.spec\\.js$\"",
"test-long": "cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" vue-cli-service test:unit \"\\long/.*\\.spec\\.js$\"",
"test-ci": "vue-cli-service test:unit \"\\.*\\.spec\\.js$\" --testPathIgnorePatterns=\"\\long/.*\\.spec\\.js$\"",
"test-clear": "jest --clearCache",
"test-watch": "vue-cli-service test:unit \"\\.*\\.spec\\.js$\" --testPathIgnorePatterns=\"\\long/.*\\.spec\\.js$\" --watch",
"test-watch-all": "cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" vue-cli-service test:unit \"\\.*\\.spec\\.js$\" --watch",
"test-watch-long": "cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" vue-cli-service test:unit \"\\long/.*\\.spec\\.js$\" --watch",
"lint": "vue-cli-service lint",
"dev": "vue-cli-service serve",
"test:unit": "vue-cli-service test:unit",
"view-cfg": "vue inspect > standard.config.js",
"watch": "vue-cli-service build --mode development --watch",
"messaging-css-ecofurb": "node-sass src/scss/schemes/messaging/ecofurb.scss -o public/schemes/ecofurb/css --output-style compressed & node-sass src/scss/schemes/messaging/ecofurb.scss -o ../plan-builder/schemes/ecofurb/css --output-style compressed",
"messaging-css-oxfordshire": "node-sass src/scss/schemes/messaging/oxfordshire.scss -o public/schemes/oxfordshire/css --output-style compressed && node-sass src/scss/schemes/messaging/oxfordshire.scss -o ../plan-builder/schemes/oxfordshire/css --output-style compressed",
"messaging-css-parity": "node-sass src/scss/schemes/messaging/parity.scss -o public/schemes/parity/css --output-style compressed && node-sass src/scss/schemes/messaging/parity.scss -o ../plan-builder/schemes/parity/css --output-style compressed",
"messaging-css-radbot": "node-sass src/scss/schemes/messaging/radbot.scss -o public/schemes/radbot/css --output-style compressed & node-sass src/scss/schemes/messaging/radbot.scss -o ../plan-builder/schemes/radbot/css --output-style compressed",
"messaging-css-warmersussex": "node-sass src/scss/schemes/messaging/warmersussex.scss -o public/schemes/warmersussex/css --output-style compressed && node-sass src/scss/schemes/messaging/warmersussex.scss -o ../plan-builder/schemes/warmersussex/css --output-style compressed",
"messaging-css": "npm run messaging-css-ecofurb && npm run messaging-css-oxfordshire && npm run messaging-css-parity && npm run messaging-css-radbot && npm run messaging-css-warmersussex"
},
,
"dependencies": {
"ajv": "^5.0.0",
"arg-guard": "^1.0.3",
"axios": "^0.18.0",
"breakpoint-sass": "^2.7.1",
"core-js": "^2.6.5",
"delay": "^4.3.0",
"localforage": "^1.7.3",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"onload-function-stack": "^1.2.0",
"susy": "^3.0.5",
"uri-path-manager": "^1.0.4",
"uuid": "^3.3.2",
"vee-validate": "^2.1.3",
"vue": "2.6.7",
"vue-analytics": "^5.17.2",
"vue-recaptcha": "^1.1.1",
"vue-router": "3.0.1",
"vuedraggable": "^2.20.0",
"vuex": "^3.0.1",
"window-wrapper": "^1.2.0"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.7.2",
"#vue/cli-plugin-babel": "^3.2.0",
"#vue/cli-plugin-eslint": "^3.2.0",
"#vue/cli-plugin-unit-jest": "^3.10.0",
"#vue/cli-service": "^3.5.2",
"#vue/eslint-config-airbnb": "^4.0.0",
"#vue/server-test-utils": "1.0.0-beta.29",
"#vue/test-utils": "1.0.0-beta.29",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"browserslist": "^4.12.0",
"caniuse-lite": "^1.0.30001059",
"cheerio": "^1.0.0-rc.3",
"cross-env": "^7.0.2",
"eslint": "^5.8.0",
"eslint-config-prettier": "^3.3.0",
"eslint-plugin-vue": "^5.0.0-0",
"flush-promises": "^1.0.2",
"happy-dom": "^0.14.1",
"imagemin-webpack-plugin": "^2.4.2",
"jest-junit-reporter": "^1.1.0",
"lint-staged": "^7.2.2",
"node-sass": "^4.10.0",
"normalize-scss": "^7.0.1",
"postcss-import": "^12.0.1",
"postcss-url": "^8.0.0",
"sass-loader": "^7.0.1",
"vue-server-renderer": "2.6.7",
"vue-template-compiler": "2.6.7"
}
I am running from the root folder, where package.json is located.
I have tried making another copy in a different folder (that breaks too).
I've tried manually running npm i again (even though I copied all of the files over).
I've scoured the internet but all solutions on this seem to revolve around the script not being found being a custom script but that's not the case - My defined scripts are being found fine but the calls out from the scripts themselves don't seem to work anymore since the move.
It's not about scripts section, but about dependencies.
Install it globaly as shown here:
npm install -g #vue/cli
# OR
yarn global add #vue/cli
if still doesn't work add dev dependency:
npm i #vue/cli-service -D
# OR
yarn add #vue/cli-service -D
I am trying explore Tailwindcss and want to add it to a new Wordpress project. I am using Laravel Mix for compiling assets.
After setting up everything and running "npm run dev", i get the following error:
ERROR in ./assets/src/main.css Module build failed (from
./node_modules/css-loader/index.js): ModuleNotFoundError: Module not
found: Error: Can't resolve './node_modules/tailwindcss/base.css' in
...
My current settings are based on this article:
https://paulund.co.uk/using-tailwind-css-in-your-wordpress-theme
Here's code for my package.json
{
"name": "tailwind-wordpress",
"version": "1.0.0",
"description": "WP Theme with Tailwind CSS",
"dependencies": {
"cross-env": "^6.0.3",
"laravel-mix": "^5.0.0",
"postcss-import": "^12.0.1",
"tailwindcss": "^1.1.2"
},
"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"
}
}
And this is contents of webpack.mix.js
const mix = require('laravel-mix');
mix.postCss('./assets/src/main.css', './assets/dist/main.css', [
require('tailwindcss'),
])
And main.css:
#import 'node_modules/tailwindcss/base.css';
#import 'node_modules/tailwindcss/components.css';
#import 'node_modules/tailwindcss/utilities.css';
Any ideas how to solve this issue? All help is highly appreciated.
if you're using webpack and all that jazz you should use
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
I have an existing Laravel app and for part of the app, I'm using Laravel Mix. I have 6 single file components with the CSS inside the Vue file. My largest Vue file is 41KB, but the rest are 10-17kb each.
I'm using Laravel Mix to bundle the js inside webpack.mix.js : mix .js('resources/assets/js/app.js', 'dist/js'). My development app size is 767kb and my production bundle size is 265kb. Im trying to reduce the production app size, since it's just handling my vue files (js/CSS) so I'm not sure why it's so large.
package.json:
{
"private": true,
"scripts": {
"dev": "NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18.0",
"bootstrap-sass": "^3.3.7",
"jquery": "^3.1.0",
"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.6.10",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.29.6"
},
"dependencies": { }
}
Do you have any ideas? 260kb feels like a lot for this.
I have the following package.json
{
"private": true,
"scripts": {
"dev": "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": "cross-env 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": "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",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"installreact": "npm install react react-dom --save",
"installbabel": "npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev",
"installwebpack": "npm install webpack webpack-dev-server --save-dev",
"build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234"
},
"devDependencies": {
"axios": "^0.16.2",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"bootstrap-sass": "^3.3.7",
"cross-env": "^5.1.4",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"vue": "^2.1.10",
"webpack": "^3.11.0",
"webpack-cli": "^2.0.12",
"webpack-dev-server": "^2.11.1"
},
"dependencies": {
"material-ui": "^1.0.0-beta.38",
"material-ui-icons": "^1.0.0-beta.36",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-redux": "^4.0.8",
"redux": "^3.7.2"
}
}
When I run npm install, cross-env directory is not created in node_modules and there is no error. Only message: up to date in 1.337s.
I tried to uninstall and install the package again, but nothing changes.
Install it globally like I said above or run it using the path. However, npm should set everything in bin folder in the path when running npm script.
"dev": "./node_modules/.bin/cross-env ..."
If the cross-env executable is not within the bin folder. Make sure about 3 things:
You have cross-env as a dependency in your package.json
Delete the folders cross-env and cross-spawn from node_modules folder.
Make sure you haven't got a .npmrc file with bin-links options set to false.
Run npm install again.
Should create the executable in .bin folder within node_modules folder
my issue resolved with
1:You have cross-env as a dependency in your package.json
2:Delete the folders cross-env and cross-spawn from node_modules folder.
3:Make sure you haven't got a .npmrc file with bin-links options set to
false.
(Running npm config ls -l will show you all the implicit settings for
npm, including what it thinks is the right place to put the .npmrc.
But if you have never logged in (using npm login) it will be empty.
Simply log in to create it.)
4:Run npm install again.
First, run:
rm -rf node_modules
rm package-lock.json yarn.lock
npm cache clear --force
Then run the command
npm install cross-env
npm install
and then you can run