Unexpected token error when using babel loader (vue webpack)

[FemkeBuijs]

Describe the bug
I am using webpack for vue (latest) and vue-agile ^1.1.0. When I import VueAgile in one of my components as import { VueAgile } from 'vue-agile'; I receive an error (see screenshot) from the babel loader. Am I doing something wrong?

Screenshots

[lukaszflorczak]

Hey. Is it a new project just created by vue cli?

Could you share your babel settings and version?

[FemkeBuijs]

Yes this is a new project set up by vue cli (vue init webpack).

Babel settings:

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

Those are the default settings that come when initiating webpack.

Babel version(s), also by default:

    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",

[lukaszflorczak]

vue init <template> <project_name> is a command from old Vue CLI 2: https://cli.vuejs.org/guide/creating-a-project.html#pulling-2-x-templates-legacy

Generally, I tested the component with projects created by Vue CLI >= 3 and there shouldn't be a problem and I recommend upgrading your Vue CLI to the latest stable version (and recreate a project) or just try upgrade dev dependencies (it's possible that will help too). But If you really need support for projects created by CLI 2 I will try to fix it – just let me know.

[FemkeBuijs]

@lukaszflorczak no that is fine, I will try it another way. Thanks anyway!

[davidnoh]

I got the same error and wasn't able to get the right packages to run webpack successfully. If you don't mind looking into it, that would be fantastic. Is your vue Component able to be build with babel-core 6 and vue-loader 13 alltogether?

[lukaszflorczak]

@davidnoh Do you use vue cli >= 3? I'll try to build it with a version of babel you mentioned, but generally, I also would like to use modern features of JS.

[davidnoh]

We are not using the Vue cli within the project. It's manually configured with webpack, vue-loader and babel-loader and some more. The "transform-object-rest-spread"-plugin is implemented to. That's the strange thing.

[davidnoh]

Well, the solution is using the babel plugin "transform-object-rest-spread" without excluding node_modules folder... :|