Laravel 5.4 error in compiling npm run dev with bulma and buefy

Question

I was trying to compile all the components that I import on the node modules when I tried to run run the npm dev in the terminal. here is the code:

App.scss located in resources assets folder

// Variables
@import "variables";

// Font Awesome
@import "node_modules/font-awesome/scss/font-awesome";

// Bulma
@import "node_modules/bulma/bulma";

// Bulma Vue Modules
@import "node_modules/buefy/src/scss/buefy";

Here is the App.js located in the assets folder too.:

require('./bootstrap');



window.Vue = require('vue');



import Buefy from 'buefy';



Vue.use(Buefy);

and here is the error in the terminal but I had installed my node.js because I use to create projects in ionic 2 using node js and cordova:

ERROR  Failed to compile with 2 errors                              11:03:38 AM

 error  in ./resources/assets/sass/app.scss

Module build failed: 
                        background: $table-row-active url(checkmark($table-row-active-background)) no-repeat center center;
                                   ^
      Undefined variable: "$table-row-active".
      in /home/jayzdevera/Documents/DevMarketer/node_modules/buefy/src/scss/components/_table.scss (line 61, column 37)

 @ ./resources/assets/sass/app.scss 4:14-266
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

 error  in ./resources/assets/sass/app.scss

Module build failed: ModuleBuildError: Module build failed: 
                        background: $table-row-active url(checkmark($table-row-active-background)) no-repeat center center;
                                   ^
      Undefined variable: "$table-row-active".
      in /home/jayzdevera/Documents/DevMarketer/node_modules/buefy/src/scss/components/_table.scss (line 61, column 37)
    at runLoaders (/home/jayzdevera/Documents/DevMarketer/node_modules/webpack/lib/NormalModule.js:194:19)
    at /home/jayzdevera/Documents/DevMarketer/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /home/jayzdevera/Documents/DevMarketer/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/home/jayzdevera/Documents/DevMarketer/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.asyncSassJobQueue.push [as callback] (/home/jayzdevera/Documents/DevMarketer/node_modules/sass-loader/lib/loader.js:55:13)
    at Object.<anonymous> (/home/jayzdevera/Documents/DevMarketer/node_modules/async/dist/async.js:2244:31)
    at Object.callback (/home/jayzdevera/Documents/DevMarketer/node_modules/async/dist/async.js:906:16)
    at options.error (/home/jayzdevera/Documents/DevMarketer/node_modules/node-sass/lib/index.js:294:32)

     Asset     Size  Chunks                    Chunk Names
/js/app.js  1.27 MB       0  [emitted]  [big]  /js/app

npm ERR! Linux 4.10.0-28-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "development"
npm ERR! node v6.11.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 --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 '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! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     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! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/jayzdevera/Documents/DevMarketer/npm-debug.log

npm ERR! Linux 4.10.0-28-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "dev"
npm ERR! node v6.11.1
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ dev script 'npm run development'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run development
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/jayzdevera/Documents/DevMarketer/npm-debug.log

and this is the display that the laravel mix said I don't know how this happen here is the image:

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.16.2",
    "cross-env": "^5.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  }
}

Answer 1

That's because Buefy does not support bulma v5 yet what you can do is uninstall bulma v5 then install bulma v4 check the issue:

npm uninstall bulma@0.5.0

then

npm install bulma@0.4.3