Cannot use import statement outside a module

[jnarowski]

Version

• Vue version: 2

Description

I'm using Nuxt with the composition API and trying to get this plugin to work. When I try to load it, I get the above error: Cannot use import statement outside a module

Demo

Please use our JSFiddle template to reproduce the bug. Issues without working reproduction might be ignored.

Here's a gist of the file. Not doing anything special.

[jnarowski]

This is nuxtJS specific. If you want to add a NuxtJS example, here's how I fixed it:

in nuxt.config.js { src: '~/plugins/vue-stack-grid', mode: 'client' }

in plugins/multiselect.js

import Vue from 'vue'
import Multiselect from '@vueform/multiselect/dist/multiselect.vue2.js'
Vue.component('VMultiselect', Multiselect)

In the component

  <client-only>
    <v-multiselect v-model="value" :options="options" />
  </client-only>

[jnarowski]

This didn't end up working in Nuxt. I was getting errors about infinite loops so I had to try and find another plugin. I love what you did though with composition, it's so clean. Any interest in ensuring this works with Nuxt and Vue2?

[adamberecz]

I've created a section with Nuxt.js usage: https://github.com/vueform/multiselect#using-with-nuxtjs

It works on a fresh install with this setup. If it's still not ok on your end please share your nuxt.config.js.

[adamberecz]

Feel free to reopen if you still have issue with this.

[jnarowski]

It's still not working and this seems like the cleanest select plugin out there by far!

Here's my config: https://gist.github.com/jnarowski/a740922bba3d9d1127ae239530773eaa

[jnarowski]

I recreated with a fresh nuxt install.

Here's the code for it: https://drive.google.com/file/d/12_r3SknguGWhaqvb2zwFTobo44wwcq5l/view?usp=sharing

Codesandbox was having issues getting the right Nuxt up and running. I'd love to use this if we can figure out what's going on. Maybe in the rollup settings?

[jnarowski]

Can we re-open this or should I create a new issue since it's still there?.

[stale[bot]]

Hi 👋 this issue has been automatically marked as stale 📌 because it has not had recent activity 😴. It will be closed if no further activity occurs.

[stale[bot]]

Hi again 👋 we would like to inform you that this issue has been automatically closed 🔒 because it had not recent activity during the stale period.

[PixsaOJ]

Can we get this fixed?

[IsraelOrtuno]

I think this should be opened again, bug is still there, no way to make it work with nuxt

[IsraelOrtuno]

I made it work by adding this to the nuxt config:

  build: {
    transpile: [
      '@vueform/multiselect/dist/multiselect.vue2.js',
    ],
  },

[PixsaOJ]

I used Nuxt multiselect

[Grawl]

The same for Quasar Framework. To fix this error, I have to add @vue-form/multiselect to build/transpileDependencies in quasar.conf.js:

module.exports = configure(function (ctx) {
    return {
        // …
        build: {
            // …
            transpileDependencies: [
                '@vueform/multiselect'
            ],
            // …
        },
    // …
}

(Quasar v2 in my case)

[sthuber90]

With vue-cli the recommendation seems to be to adjust the transformIgnorePatterns in your jest.config.js file.

module.exports = {
    // ...
    transformIgnorePatterns: ["/node_modules/(?!@vueform/multiselect)"],
}

This way testing the multiselect with testing-library/vue works.