Bulma style overrides aren't working; Using Laravel 7.25.0 - laravel

I've been using Bulma as a CSS framework for a site I'm building using Laravel, and for some reason, none of the overrides I've been writing have actually been taking place. In fact, if I remove everything from my app.scss file (including the line to import Bulma), nothing changes. I tried following the docs given for node-sass, and when i try to execute the npm css-build command, I get the following error:
> # css-build /Users/userName/Sites/siteName
> node-sass --omit-source-map-url sass/app.scss css/app.css
An output directory must be specified when compiling a directory
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # css-build: `node-sass --omit-source-map-url sass/app.scss css/app.css`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # css-build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
I know this is probably a terribly worded question, but I'd appreciate if anyone could point me in the right direction. I'm just genuinely lost.
app.scss:
#charset "utf-8";
#import url("https://fonts.googleapis.com/icon?family=Material+Icons");
// Variables
#import "_variables";
// Font Awesome
#import "font-awesome/scss/font-awesome";
// Bulma
#import "bulma/bulma";
// Bulma Vue Modules
#import "buefy/src/scss/buefy";
// Other SCSS Files
#import "overrides";
#import "helpers";
#import "manage";
#import "styles";
scripts portion of 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 --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",
"css-build": "node-sass --omit-source-map-url sass/app.scss css/app.css",
"css-watch": "npm run css-build -- --watch",
"start": "npm run css-watch"
},

Related

Laravel getting error in install vue and npm run dev

I want to install Vue in laravel,
I run these commands and it all ok:
composer require laravel/ui:^2.4
php artisan ui vue
php artisan ui vue --auth
npm install
npm run dev
npm run dev is giving me this error and i don't know what to do
at Object.<anonymous> (/home/alikhani97/domains/imalikhani.me/public_html/node_modules/cross-
env/src/bin/cross-env.js:3:18)
npm ERR! Linux 3.10.0-1127.10.1.el7.x86_64
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "run" "development"
npm ERR! node v6.17.1
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! # development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --
config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # development script 'cross-env NODE_ENV=development
node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-
mix/setup/webpack.config.js'.
SyntaxError: Unexpected token )
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:549:28)
at Object.Module._extensions..js (module.js:586:10)
at Module.load (module.js:494:32)
at tryModuleLoad (module.js:453:12)
at Function.Module._load (module.js:445:3)
at Module.require (module.js:504:17)
at require (internal/module.js:20:19)
at Object.<anonymous>
First check if cross-env module is installed. If not, run:
npm install cross-env
After that you need to go to the node_modules folder. Then find cross-env folder. Go inside and find cross-env.js.
In my case it was node_modules/cross-env/dist/bin/cross-env.js
You need to change path to cross-env.js in scripts section in your package.json file.
{
"private": true,
"scripts": {
"dev": "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_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",
"hot": "node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "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"
},
........
}
If the above changes are already up to date then remove the directory
node_modules
and file
package-lock.json
update your node version to 8 and then
run command npm install and then npm run dev

when I run npm run dev I am getting error

this is 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": "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",
"serve": "node --version",
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node your-script.js"
},
"devDependencies": {
"axios": "^0.19",
"core-js": "^2.6.5",
"cross-env": "^7.0.2",
"laravel-mix": "^0.10.0np",
"lodash": "^4.17.19",
"resolve-url-loader": "^3.1.0",
"webpack": "^2.1.0-beta.22"
}
}
and the error is
$ npm run dev
# dev C:\xampp\htdocs\laspp
npm run development
# development C:\xampp\htdocs\laspp
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
95% emitting
ERROR Failed to compile with 3 errors 5:48:21 PM
These dependencies were not found:
* jquery in ./resources/assets/js/bootstrap.js
* bootstrap-sass in ./resources/assets/js/bootstrap.js
* vue in ./resources/assets/js/bootstrap.js
To install them, you can run: npm install --save jquery bootstrap-sass vue
Asset Size Chunks Chunk Names
/js/app.js 603 kB 0 [emitted] [big] /js/app
mix-manifest.json 32 bytes [emitted]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Natty\AppData\Roaming\npm-cache\_logs\2020-10-13T00_48_22_038Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # dev: `npm run development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Natty\AppData\Roaming\npm-cache\_logs\2020-10-13T00_48_22_141Z-debug.log
finally, I tried this
rm -rf node-modules
rm packageson-lock.json
npm cache clean --force
npm install
but it does not work
Looking your error and your package.json, this error tell you this :
To install them, you can run: npm install --save jquery bootstrap-sass vue
Can you do this and restart your npm run development ?

Laravel with vuejs unit test mocha-webpack script error

I am going to test vue components in Laravel application environment.
My package.json "scripts" are following:
"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",
"test": "mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/Vue/setup.js tests/Vue/**/*.spec.js"
},
When I ran "npm run test" it shows a callstack with following error. Did I do anything wrong?
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # test: `mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/Vue/setup.js tests/Vue/**/*.spec.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
I think you have to setup laravel-mix webpackConfig.
Ex.
resolve: {
alias: {
'#': path.resolve(__dirname, 'resources/assets/'),
},
},

Vue.js components in a Laravel 5.4 project work locally but not on Heroku

Issue:
I have a Laravel 5.4 project with Vue.js and use Heroku for deployment. Everything has been running fine until today when I noticed the changes I made in the Vue component file were working fine locally, but not being reflected on Heroku.
In the past this happened when I forgot to run npm run build, but when I executed npm run build this time I got the following error:
npm ERR! Linux 4.10.0-42-generic
npm ERR! argv "/home/caseydemo/.nvm/versions/node/v6.11.4/bin/node" "/home/caseydemo/.nvm/versions/node/v6.11.4/bin/npm" "run" "build"
npm ERR! node v6.11.4
npm ERR! npm v3.10.10
npm ERR! missing script: build
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>
npm ERR! Please include the following file with any support request:
npm ERR! /home/caseydemo/Documents/gotcha/npm-debug.log
I wasn’t sure what to make of this so I tried removing my node modules and re-installing them with the following commands:
rm -rf node_modules
npm install
I got the following error after npm install ran:
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#^1.0.0 (node_modules/webpack-dev-server/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
I am currently running Ubuntu 16.04 Xenial. Not really sure what to do next, any help is appreciated.
here is 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": "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.16.2",
"bootstrap-sass": "^3.3.7",
"cross-env": "^5.0.1",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"vue": "^2.1.10"
},
"dependencies": {
"hover.css": "^2.2.1"
}
}
You don't have a method build defined in your scripts, you're looking for prod or production:
npm run production
The error message you received tells you as much:
npm ERR! missing script: build
And if you look in the scripts definition in package.json, you'll see there is no build defined for sure.

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