Bootstrap-vue with vue-meteor

[antoinecsk]

Hello, i'm trying to add bootstrap-vue to my vue-meteor project. But i keep getting this error : `W20170513-13:55:36.436(2)? (STDERR) C:\Users\HKTPLSM\WebstormProjects\meteor-cdc.meteor\local\build\programs\server\packages\modules.js:4362

W20170513-13:55:36.437(2)? (STDERR) export default { W20170513-13:55:36.437(2)? (STDERR) ^^^^^^

W20170513-13:55:36.437(2)? (STDERR) W20170513-13:55:36.437(2)? (STDERR) SyntaxError: Unexpected reserved word

W20170513-13:55:36.437(2)? (STDERR) at Object.exports.runInThisContext (vm.js:53:16) W20170513-13:55:36.438(2)? (STDERR) at C:\Users\HKTPLSM\WebstormProjects\meteor-cdc.meteor\local\build\programs\server\boot.js:297:30 W20170513-13:55:36.438(2)? (STDERR) at Array.forEach (native) W20170513-13:55:36.438(2)? (STDERR) at Function..each..forEach (C:\Users\HKTPLSM\AppData\Local.meteor\packages\meteor-tool\1.4.4_2\mt-os.windows.x86_32\dev_bundle\server-lib\node_modules\underscore\underscore.js:79:11) W20170513-13:55:36.438(2)? (STDERR) at C:\Users\HKTPLSM\WebstormProjects\meteor-cdc.meteor\local\build\programs\server\boot.js:128:5 W20170513-13:55:36.439(2)? (STDERR) at C:\Users\HKTPLSM\WebstormProjects\meteor-cdc.meteor\local\build\programs\server\boot.js:352:5 W20170513-13:55:36.439(2)? (STDERR) at Function.run (C:\Users\HKTPLSM\WebstormProjects\meteor-cdc.meteor\local\build\programs\server\profile.js:510:12) W20170513-13:55:36.439(2)? (STDERR) at C:\Users\HKTPLSM\WebstormProjects\meteor-cdc.meteor\local\build\programs\server\boot.js:351:11 `

What could it be ?

[leopiccionia]

The syntax error is probably caused by compiler not knowing ES6(?) syntax (export keyword).

You could try one of Bootstrap's official Meteor packages (twbs:bootstrap or twbs:bootstrap-noglyph), that works like a charm, but, unfortunately, have jQuery as a dependency. I've used it before with akryum:vue-meteor.

Alternatively, you can try one ES6 transpiler. There seems to be an official Babel package maintained by Meteor team, but I've never tried it. Please let me know if it works.

[Herteby]

@leopiccionia Using the general Bootstrap with Vue is a bad idea I think. You'd lose so much of the vue magic. I would highly recommend Element btw, it's the most popular Vue framework.

[leopiccionia]

Bootstrap is just a CSS "framework", that needs some JS to get some fancy behavior. The original implementation uses jQuery (definitely not a fan), but it was ported to vanilla JS, Angular, Vue, etc.

BootstrapVue is an excellent port of Bootstrap, having rewritten many Bootstrap classes as Vue components, encapsulating behavior and appearance on an elegant and Vue-aware way. I'd love to try it again with Meteor anytime.

I've never used Element because its navs look awful on mobile IMHO, what's a no-no for a Meteor project for me.

[Akryum]

@antoinecsk How are you using bootstrap? I would recommend something like this (not using bootstrap myself though):

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

[Herteby]

@leopiccionia Yes if you can get BootstrapVue working I'm sure it's good. What I meant was you'd be missing out on a lot of things if you used the css-only version, and the jQuery version with Vue would be truly counterproductive I think.

[antoinecsk]

All these answers are a bit confusing. I'm trying to include "bootstrap-vue" (https://github.com/bootstrap-vue/bootstrap-vue) not the original library, and meteor is returning me an ecmascript syntax error. That's weird, because i already did install "meteor add ecmascript".

[GeoffreyBooth]

@Akryum This is a real bug, and it’s with vue-component. Loading the Bootstrap official JavaScript isn’t a solution, as that JS depends on jQuery and will cause chaos with Vue’s management of the DOM. Steps to reproduce:

meteor create vue-component-bootstrap-bug
cd vue-component-bootstrap-bug
meteor npm install
meteor npm install --save bootstrap-vue
meteor add akryum:vue-component
meteor

Output:

[[[[[ /private/tmp/vue-component-bootstrap-bug ]]]]]

=> Started proxy.
=> Started MongoDB.
   [HMR] Dev server listening on port 3003
W20170627-12:02:22.546(-7)? (STDERR) /private/tmp/vue-component-bootstrap-bug/.meteor/local/build/programs/server/packages/modules.js:4479
W20170627-12:02:22.584(-7)? (STDERR) export default {
W20170627-12:02:22.585(-7)? (STDERR) ^^^^^^
W20170627-12:02:22.586(-7)? (STDERR)
W20170627-12:02:22.586(-7)? (STDERR) SyntaxError: Unexpected reserved word
W20170627-12:02:22.587(-7)? (STDERR)     at Object.exports.runInThisContext (vm.js:53:16)
W20170627-12:02:22.587(-7)? (STDERR)     at /private/tmp/vue-component-bootstrap-bug/.meteor/local/build/programs/server/boot.js:331:30
W20170627-12:02:22.588(-7)? (STDERR)     at Array.forEach (native)
W20170627-12:02:22.588(-7)? (STDERR)     at Function._.each._.forEach (/Users/bootg003/.meteor/packages/meteor-tool/.1.5.0.a2nv2w++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
W20170627-12:02:22.589(-7)? (STDERR)     at /private/tmp/vue-component-bootstrap-bug/.meteor/local/build/programs/server/boot.js:158:5
W20170627-12:02:22.589(-7)? (STDERR)     at /private/tmp/vue-component-bootstrap-bug/.meteor/local/build/programs/server/boot.js:387:5
W20170627-12:02:22.590(-7)? (STDERR)     at Function.run (/private/tmp/vue-component-bootstrap-bug/.meteor/local/build/programs/server/profile.js:510:12)
W20170627-12:02:22.591(-7)? (STDERR)     at /private/tmp/vue-component-bootstrap-bug/.meteor/local/build/programs/server/boot.js:386:11
=> Exited with code: 1

Possibly related to https://github.com/Akryum/vue-meteor/issues/165

[Akryum]

Did you try import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.js' and setting up .vueignore?

[piniondna]

Adding a .vueignore file for node_modules/ and importing the dist library worked for me. I was able to register the component globally from main.coffee following the guidelines on this page: https://bootstrap-vue.github.io/docs/setup/

Should the meteor build ignore the node_modules directory by default? Or is there some other way that this could be handled more gracefully?