Vue-multiselect: Webpack Syntax Error

[ThomasRalee]

Hi,

I am facing problem using multiselect beta version with webpack.
More information:

ERROR in ./~/vue-multiselect/lib/vue-multiselect.min.js
Module build failed: SyntaxError: 'with' in strict mode (1:29119)
    at Parser.pp$4.raise (/Users/ralee/Public/projects/helixtap/node_modules/buble/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp$1.parseWithStatement (/Users/ralee/Public/projects/helixtap/node_modules/buble/node_modules/acorn/dist/acorn.js:932:27)
    at Parser.pp$1.parseStatement (/Users/ralee/Public/projects/helixtap/node_modules/buble/node_modules/acorn/dist/acorn.js:708:32)
    at Parser.pp$1.parseBlock (/Users/ralee/Public/projects/helixtap/node_modules/buble/node_modules/acorn/dist/acorn.js:981:25)
    at Parser.pp$3.parseFunctionBody (/Users/ralee/Public/projects/helixtap/node_modules/buble/node_modules/acorn/dist/acorn.js:2105:24)
    at Parser.pp$1.parseFunction (/Users/ralee/Public/projects/helixtap/node_modules/buble/node_modules/acorn/dist/acorn.js:1065:10)
    at Parser.pp$3.parseExprAtom (/Users/ralee/Public/projects/helixtap/node_modules/buble/node_modules/acorn/dist/acorn.js:1810:19)
    at Parser.parseExprAtom (/Users/ralee/Public/projects/helixtap/node_modules/buble/dist/buble.umd.js:656:26)
    at Parser.pp$3.parseExprSubscripts (/Users/ralee/Public/projects/helixtap/node_modules/buble/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/Users/ralee/Public/projects/helixtap/node_modules/buble/node_modules/acorn/dist/acorn.js:1692:19)
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/settings/account.vue 129:0-41
 @ ./resources/assets/js/components/settings/account.vue
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/setting-base.vue
 @ ./resources/assets/js/components/setting-base.vue
 @ ./resources/assets/js/setting.js

Is there a work around for this? Please advice.

[SirLamer]

I have the same problem. I have spent hours investigating this.

I think it's important to note that in my case I am working with Laravel and using Elixir 6. Laravel recently updated the base package to distribute with Vue 2.0. Gulp compile works if I remove all references to Multiselect.

[shentao]

@ThomasRalee @SirLamer This is a weird bug, coming from Babel I guess. Sadly the transpilation of render functions results in with statements, which are forbidden in strict mode.
A workaround here would be importing the source file:

import Multiselect from 'vue-multiselect/lib/Multiselect.vue`

[SirLamer]

I agree, your workaround works for me.

[byteofsilicon]

I have experienced the same issue with Buble. The workaround @shentao Posted has worked, though I would like to see this issue fixed.

[ThomasRalee]

The work around, works for me too. As mention by @ryanstelmat a fix to this would be great. None the less awesome library, really.

[SirLamer]

Why close this issue? It is not resolved. If the dev says "this is all we can do" then okay.

[shentao]

I will try to find a solution for this, but sadly I can't promise anything, as this might be a problem with how Babel works. It might be, that I am missing something (like a magic Babel config option that would make the output strict mode friendly). Dunno.
I'm glad the workaround works though.

[byteofsilicon]

I wouldn't close this issue as there are numerous other vuejs libraries that do not experience this issue. I appreciate the library though and will continue to use it via the workaround above.

[SirLamer]

Yeah I agree, if it's a huge rework to correct then that's fine however this is the only package I have with this is issue. Importantly, it does not happen with vue-multiselect v1.1.4 + Vue 1.0.x

[shentao]

If you look into the vue-multiselect.min.js file, you will notice that the with statement happens next to the render function, which is something that was introduced with Vue 2.0.
There is nothing wrong with the library code itself I think.
I have tried changing the output type (from UMD to other library types) and looked for some additional configuration options that would fix the problem, but to no avail. Maybe it’s a problem with Babel itself, but it is really hard to say exactly.

[SirLamer]

okay perhaps ill put it up as an Elixir issue and link here

[shentao]

The weird thing is, even if I add the "use strict" rule at the top of the main.js file (where I start my app) I don't get the error. :/ But I'm using a pure npm/webpack based build system.

[talvbansal]

Any update on this guys?

[shentao]

@talvbansal Not yet. Please use the workaround:
import Multiselect from 'vue-multiselect/lib/Multiselect.vue'

[LinusBorg]

Just as a note that might help:

Webpack 2 can parse ES6 modules (import...), so Babel does not have to convert them to require statements. And by definition of the standard, ES6 modules are executed in strict mode by default.

That might have something to do with it. Does it also happen when you use require instead of import?

[rny]

i found this problem is gone today( updated to 2.0.0beta10). don't know why.

[SirLamer]

I don't see a beta 10 release available, can you clarify?

[rny]

@SirLamer After i did a npm update

npm update --no-bin-links --save-dev 

the package.json shows

    "vue-multiselect": "^2.0.0-beta.10",

[shentao]

Just created the beta 10 release on GitHub. This was just a small update to fix the CSS syntax error, that caused problems for some people.

Anyway, in the 10th beta the with is keyword still there in the min.js file. :(
Will try migrating to Webpack 2. Thanks @LinusBorg

[LinusBorg]

@shento I was not proposing webpack 2 as a solution. I was asking weither this errror _only_ happens with webpack 2 & import because of its automatic strict mode for modules.

[shentao]

No idea. As far as I know, it happens around the render function, that’s why I guess this might be related to how babel transpiles it. But this also might be because of webpack.

[LinusBorg]

Vue uses with for its own render functions. It was a design decision.

If that turns out to be a problem with e.g. ES6 modules in webpack 2, we might have to find some solution for this part of the codebase.

But as I'm not sure yet weithet this is is the case, please continue to investigate in your own as well.

[shentao]

This has been fixed in the recent vue-loader update. Will publish a new bundle soon, hopefully without the with keyword :)