question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Spread operator broke the build

See original GitHub issue

I can’t do a success build when a run npm run dev because the operator spread ... is not compatible.

I try do the next:

  1. Change presets to es2015
  2. Install babel-plugin-transform-object-rest-spread and then include in plugins on babelrc file.

Nothing of this work fine for me.

My package.json

{
  "name": "bootstrap-vue",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "Marcelo <marceloaldo@gmail.com>",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js"
  },
  "dependencies": {
    "bootstrap-vue": "^0.18.0",
    "vue": "^2.3.3"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.11.1",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "opn": "^4.0.2",
    "optimize-css-assets-webpack-plugin": "^1.3.0",
    "ora": "^1.2.0",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "url-loader": "^0.5.8",
    "vue-loader": "^12.1.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-bundle-analyzer": "^2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.18.0",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

My .babelrc file

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime", "transform-object-rest-spread"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul"]
    }
  }
}

The npm run dev error


 ERROR  Failed to compile with 1 errors                                 20:59:34

 error  in ./~/bootstrap-vue/lib/mixins/dropdown.js

Module parse failed: /home/marcelo/Documentos/www/gh/bootstrap-vue/node_modules/bootstrap-vue/lib/mixins/dropdown.js Unexpected token (101:8)
You may need an appropriate loader to handle this file type.
|     },

My node and npm versions

$ node -v
v7.2.0
$ npm -v
v4.0.2

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:21 (12 by maintainers)

github_iconTop GitHub Comments

2reactions
mosinvecommented, Aug 9, 2017

and you should add node_modules\bootstrap-vue\lib\ folder to babel include at webpack.config.js

            {
                test: /\.js$/,
                loader: 'babel-loader',
                // For using direct BootstrapVue *.vue components
                include: [resolve('src'), resolve('test'), **resolve('node_modules/bootstrap-vue/lib')**],
            },

because by default node_modules/* excluded from babel transilation

2reactions
More4evercommented, Jul 20, 2017

I reproduce this bug when tried to use only dropdown component. What to do if I don’t want to use full package but only some components?

<template>
  <header>
    <b-dropdown text="TOOLS"></b-dropdown>
    <router-link to="/">Home</router-link>
    <router-link :to="{name: 'auth.login'}">Login</router-link>
  </header>
</template>
<script>

  import {bDropdown} from 'bootstrap-vue/lib/components'
  export default {
    name: 'AppHeader',
    components: {
      bDropdown,
    },
  };
</script>

this code leeds to error, but in my files I use spread operator without any error:

ERROR in ./~/bootstrap-vue/lib/mixins/dropdown.js
Module parse failed: xxx\node_modules\bootstrap-vue\lib\mixins\dropdown.js Unexpected token (101:8)
You may need an appropriate loader to handle this file type.
|     },
|     methods: {
|         ...clickOut.methods,
|         noop() {
|             // Do nothing event handler (used in visible watch)

Dependencies part of package.json:

  "dependencies": {
    "axios": "^0.16.2",
    "bootstrap": "^4.0.0-alpha.6",
    "bootstrap-vue": "^0.18.0",
    "dotenv": "^4.0.0",
    "pdfjs-dist": "^1.8.525",
    "vue": "^2.3.3",
    "vue-router": "^2.3.1",
    "vuedraggable": "^2.14.1"
  },
Read more comments on GitHub >

github_iconTop Results From Across the Web

Spread syntax (...) - JavaScript - MDN Web Docs - Mozilla
In an object literal, the spread syntax enumerates the properties of an object and adds the key-value pairs to the object being created....
Read more >
Spread operator working in console.log and not working when ...
There is no spread operator! So, it's bit "broken" as much as "it can never work, nor has it ever been intended to...
Read more >
Breaking Down ES6: Spread Operator - DEV Community ‍ ‍
Copying an Array​​ With the spread operator, this issue is eliminated. You can safely alter the new array without changing the original array....
Read more >
A few neat things you can do with the vanilla JS spread syntax ...
The spread syntax operator (...) takes an array or object (or other iterable) and expands its items into their own individual values. let ......
Read more >
The JavaScript Spread Operator (…) — A Basic Guide
Basically, the spread operator is a very useful feature. It is a huge time saver as it reduces the number of lines required...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found