Vue-strap with Laravel: Module build failed - laravel

I'm not sure if Vue-strap works with 2.0 so I want to try using its Navbar component.
I add this in app.js.
Vue.component('navbar', require('../../../node_modules/vue-strap/src/Navbar.vue'));
gulp watch throws this error.
ERROR in ./~/vue-strap/src/utils/NodeList.js
Module build failed: Error
at ForOfStatement.initialise (/var/www/web_redeem/node_modules/buble/dist/buble.umd.js:2004:65)
at /var/www/web_redeem/node_modules/buble/dist/buble.umd.js:9381:56
at Array.forEach (native)
at BlockStatement.initialise (/var/www/web_redeem/node_modules/buble/dist/buble.umd.js:9381:15)
at FunctionDeclaration.initialise (/var/www/web_redeem/node_modules/buble/dist/buble.umd.js:858:12)
at FunctionDeclaration.initialise (/var/www/web_redeem/node_modules/buble/dist/buble.umd.js:2071:31)
at /var/www/web_redeem/node_modules/buble/dist/buble.umd.js:9381:56
at Array.forEach (native)
at BlockStatement.initialise (/var/www/web_redeem/node_modules/buble/dist/buble.umd.js:9381:15)
# ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-strap/src/Navbar.vue 33:0-35
# ./~/vue-strap/src/Navbar.vue
# ./resources/assets/js/app.js

Elixir compiles js with Bublé that does not support for ... of statements yet. Consider switching to babel instead.
If you are you using https://github.com/vuejs/laravel-elixir-vue-2 change to https://github.com/JeffreyWay/laravel-elixir-vue

Related

TypeError: node.getIterator is not a function when using VuePress

I'm following https://v1.vuepress.vuejs.org/guide/getting-started.html#quick-start to generate a new VuePress site.
I did the following (I'm using Node 15.4.0):
npx create-vuepress-site
cd docs
npm install
npm run build
I'm getting:
TypeError: node.getIterator is not a function
at LazyResult.visitTick (/home/marcin/tmp/vuepress-testing/docs/node_modules/optimize-css-assets-webpack-plugin/node_modules/postcss/lib/lazy-result.js:528:33)
at LazyResult.runAsync (/home/marcin/tmp/vuepress-testing/docs/node_modules/optimize-css-assets-webpack-plugin/node_modules/postcss/lib/lazy-result.js:408:30)
at LazyResult.async (/home/marcin/tmp/vuepress-testing/docs/node_modules/optimize-css-assets-webpack-plugin/node_modules/postcss/lib/lazy-result.js:221:30)
at LazyResult.then (/home/marcin/tmp/vuepress-testing/docs/node_modules/optimize-css-assets-webpack-plugin/node_modules/postcss/lib/lazy-result.js:206:17)
at OptimizeCssAssetsWebpackPlugin.processCss (/home/marcin/tmp/vuepress-testing/docs/node_modules/optimize-css-assets-webpack-plugin/src/index.js:81:8)
at Object.processor (/home/marcin/tmp/vuepress-testing/docs/node_modules/optimize-css-assets-webpack-plugin/src/index.js:20:18)
at /home/marcin/tmp/vuepress-testing/docs/node_modules/last-call-webpack-plugin/src/index.js:150:10
at arrayEach (/home/marcin/tmp/vuepress-testing/docs/node_modules/lodash/_arrayEach.js:15:9)
at forEach (/home/marcin/tmp/vuepress-testing/docs/node_modules/lodash/forEach.js:38:10)
at OptimizeCssAssetsWebpackPlugin.process (/home/marcin/tmp/vuepress-testing/docs/node_modules/last-call-webpack-plugin/src/index.js:147:5)
at /home/marcin/tmp/vuepress-testing/docs/node_modules/last-call-webpack-plugin/src/index.js:178:28
at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/marcin/tmp/vuepress-testing/docs/node_modules/tapable/lib/HookCodeFactory.js:33:10), :25:17)
at AsyncSeriesHook.lazyCompileHook (/home/marcin/tmp/vuepress-testing/docs/node_modules/tapable/lib/Hook.js:154:20)
at /home/marcin/tmp/vuepress-testing/docs/node_modules/webpack/lib/Compilation.js:1409:36
at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/marcin/tmp/vuepress-testing/docs/node_modules/tapable/lib/HookCodeFactory.js:33:10), :9:1)
at AsyncSeriesHook.lazyCompileHook (/home/marcin/tmp/vuepress-testing/docs/node_modules/tapable/lib/Hook.js:154:20)
I also noticed that the same error started to appear on my existing VuePress site, which worked without issues before (I think even yesterday).
What is the problem? Am I able to get around it somehow?
Same here.
I locked vuepress to version 1.8.1, and build seems fine... until bug fix.

mocha-webpack ignores my webpack.config.js?

I am using the npm 5.2.0 with mocha-webpack to run my tests. However, my webpack.config.js seem to be ignored as I get all kind of errors of Aliases not being used in my webpack.config.js file.
My package.json command:
"test:mocha": "mocha-webpack",
My mocha-webpack.opts:
--webpack-config webpack.config.js
--colors
--require ignore-styles
--require babel-core/register
--require jsdom-global/register
**/tests/*.test.js
My mocha-webpack.opts is being used as the error output is in red.
I also tried with a
--webpack-config webpack.config-test.js
That contains only the required webpack stuff: babel en aliases, but the same errors appear.
Some of the errors:
Module not found: Error: Can't resolve 'Redux/actions' in '/CodeRepo/checklist/src/js'
resolve 'Redux/actions' in '/CodeRepo/checklist/src/js'
Parsed request is a module
Module parse failed: /CodeRepo/buttons/iconTextButton.js Unexpected token (16:12)
You may need an appropriate loader to handle this file type.
Any idea how to solve this? (I followed the example on the net, and the npm mocha-webpack page, but couldn't get it solved).

gulp watch in laravel elixir not working globule.js undefined indexof

I have a Laravel project in Ubuntu 16.04.
It is an existing project where the gulpfile.js is working properly on another system.
My problem is the gulp watch is not working at only this error is showing up:
TypeError: Cannot read property 'indexOf' of undefined
at /usr/lib/node_modules/gulp/node_modules/globule/lib/globule.js:25:16
at Array.reduce (native)
at processPatterns (/usr/lib/node_modules/gulp/node_modules/globule/lib/globule.js:24:30)
at Object.globule.find (/usr/lib/node_modules/gulp/node_modules/globule/lib/globule.js:76:17)
at Gaze.add (/usr/lib/node_modules/gulp/node_modules/gaze/lib/gaze.js:174:19)
at new Gaze (/usr/lib/node_modules/gulp/node_modules/gaze/lib/gaze.js:74:10)
at gaze (/usr/lib/node_modules/gulp/node_modules/gaze/lib/gaze.js:86:10)
at Object.module.exports [as watch] (/usr/lib/node_modules/gulp/node_modules/glob-watcher/index.js:12:17)
at Gulp.watch (/usr/lib/node_modules/gulp/index.js:40:14)
at /home/vagrant/votingmp/node_modules/laravel-elixir/dist/tasks/recipes/watch.js:26:18
Has anybody ever had the same problem? I can't seem to find any solution regarding this
Cannot read property 'indexOf' of undefined
at /usr/lib/node_modules/gulp/node_modules/globule/lib/globule.js:25:16
Any helps appreciated!
I have same problem with you, then I realize that one of my script files gen errors, so just remove it from mix.scripts([]) array, unless please check your gulp.js content.

Is it possible to include Vue Admin (Bulma) into Laravel?

I am pretty new to Vue.js and Js in general. I am using the Bulma.io CSS Framework and found the Vue-Admin Package which provides Vue Components in Bulma Styles.
I would like to use it but I am not sure how to require it. I tried to require a single Component like:
javascript
// resource/assets/js/app.js
Vue.component('sidebar', require('../../../node_modules/vue-admin/client/components/layout/Sidebar.vue'));
This throws the following Error in my Console:
ERROR in ./~/vue-admin/client/components/layout/Sidebar.vue
Module not found: Error: Can't resolve 'scss-loader' in '/Volumes/Data/Entwicklung/Workspace/Private/TheNewSumoAndPanda/node_modules/vue-admin/client/components/layout'
# ./~/vue-admin/client/components/layout/Sidebar.vue 5:0-169
# ./resources/assets/js/app.js
ERROR in ./~/vue-bulma-expanding/src/Expanding.vue
Module not found: Error: Can't resolve 'scss-loader' in '/Volumes/Data/Entwicklung/Workspace/Private/TheNewSumoAndPanda/node_modules/vue-bulma-expanding/src'
# ./~/vue-bulma-expanding/src/Expanding.vue 5:0-183
# ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-admin/client/components/layout/Sidebar.vue
# ./~/vue-admin/client/components/layout/Sidebar.vue
# ./resources/assets/js/app.js
I also tried to include some kind of an Autoloader and tried the following:
// resource/assets/js/app.js
require('../../../node_modules/vue-admin/client/app');
This throwed the following:
ERROR in ./~/vue-admin/client/app.js
Module parse failed: /Volumes/Data/Entwicklung/Workspace/Private/TheNewSumoAndPanda/node_modules/vue-admin/client/app.js Unexpected token (38:2)
You may need an appropriate loader to handle this file type.
| store,
| nprogress,
| ...App
| })
|
# ./resources/assets/js/app.js 9:0-53
This is the link to the Vue-Admin Package on GIthub:
https://github.com/vue-bulma/vue-admin
I hope you guys can help me?
Thanks David
I created an integration without laravel-mix: https://github.com/gazben/laravel-vue-admin
This solution uses the original build script, and the npm commands are wrapped by artisan commands. The output is symlinked to the appropriate directories.

Babel 6, export .. from './file', syntax error

I'm getting a syntax error on link: this line, but I don't understand why it's failing.
> mocha-webpack --webpack-config webpack-test.config.js --growl --colors --require source-map-support/register --watch ./test/*.js
ERROR in ./src/index.js
Module build failed: SyntaxError: /Users/h/dev/haf/logary/vendor/logary-js/src/index.js: Unexpected token (5:7)
};
export Identity from './identity';
at Parser.pp.raise (/Users/h/dev/haf/logary/vendor/logary-js/node_modules/babylon/index.js:1378:13)
at Parser.pp.unexpected (/Users/h/dev/haf/logary/vendor/logary-js/node_modules/babylon/index.js:2817:8)
at Parser.pp.expect (/Users/h/dev/haf/logary/vendor/logary-js/node_modules/babylon/index.js:2811:33)
I'm probably missing something. Babel preset is es2015. It's a pure lib, so no react preset needed. Removing this line makes it all work fine. Except of course that I'm not able to compose the lib in that case.
According to the link you provided, it seems you wanted to do:
export { default as Identity } from './identity';

Resources