Cannot use import statement outside a module

[jbrooksuk]

When using vue-multiselect="^3.0.0-alpha.2" I get this error when running with SSR:

/Users/james/Code/laravel/forge/node_modules/vue-multiselect/dist/vue-multiselect.esm.js:1
import { openBlock, createBlock, withKeys, withModifiers, renderSlot, createVNode, withDirectives, Fragment, renderList, toDisplayString, vShow, createCommentVNode, Transition, withCtx, createTextVNode } from 'vue';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1026:15)
    at Module._compile (node:internal/modules/cjs/loader:1061:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1151:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.5484 (/Users/james/Code/laravel/forge/public/js/ssr.js:1:1540400)
    at o (/Users/james/Code/laravel/forge/public/js/ssr.js:1:1540654)

[jbrooksuk]

Has anyone managed to resolve this at all? I'm building with Laravel Mix and I've tried transpiling during compilation with no luck.

[raimund-schluessler]

I got the same error when running tests with Jest and this transformIgnorePatterns helped:

"transformIgnorePatterns": [
	"/node_modules/(?!(.*vue-multiselect))"
],

[mattelen]

Hi @jbrooksuk. Thanks for opening up an issue around this. I'm unfamiliar with SSR, so are you able to create a reproducible repo so I can figure out how best we can fix this?

[davimug]

@jbrooksuk did you manage to find a fix?

[paul-jolimoi]

I came up with the same problem using vue3 and Jest v28. After digging I found out Jest is actually trying to load vue-multiselect from this file vue-multiselect/dist/vue-multiselect.esm.js instead of this file vue-multiselect/dist/vue3-multiselect.common.js.

So one solution is the following, put this in your jest.config.js file :

moduleNameMapper: {
    '^vue-multiselect$': 'vue-multiselect/dist/vue3-multiselect.common.js'
},

N.B : Using a transformIgnorePatterns wasn't a solution in my case, and it seems logical since it's not looking at the good file...

Hope this can help some coming this way.

[phlegx]

Hi! I have the same problem using 3.0.0-beta.2 and Vite 4.x with `import Multiselect from 'vue-multiselect'.

For me it works by adding "type": "module", to vue-multiselect package.json.

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

[gustawdaniel]

@paul-jolimoi in my case

'^vue-multiselect$': 'vue-multiselect/dist/vue-multiselect.common.js',

with vue-multiselect instead of vue3-multiselect.

[Seeman13]

If in an App where use vue-multiselect ^3.0.0-beta.2 witch SSR You use Vite, then you need to explicitly specify in vite.config.js in the build section the target option in 'esnext', which will add when building support for dynamic imports.

Example config for Laravel + InertiaJS + Vite application:

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  build: {
    target: 'esnext', // <---
    sourcemap: true
  },
  plugins: [
    laravel({
      input: 'resources/js/app.js',
      ssr: 'resources/js/ssr.js',
      refresh: true
    }),
    vue({
      template: {
        compilerOptions: { // ts config
          isCustomElement: (tag) => tag.startsWith('swiper-') // <--- use swipper slider
        },
        transformAssetUrls: {
          base: null,
          includeAbsolute: false
        }
      }
    })
  ]
})

Problem discussion on Stackoverflow

Documentation: https://vitejs.dev/config/build-options.html#build-target

[phlegx]

@Seeman13 thx! But what if you dont want to use esnext and work with legacy plugin?

[Seeman13]

@Seeman13 thx! But what if you dont want to use esnext and work with legacy plugin?

Well then, if you work with a deprecated plugin, then use Vue 2 or even better Vue 1 - and work with everything outdated! If you use the new, and then need work with the new!

[jet4419]

Hi! I have the same problem using 3.0.0-beta.2 and Vite 4.x with `import Multiselect from 'vue-multiselect'.

For me it works by adding "type": "module", to vue-multiselect package.json.

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

Thanks a lot, man! Managed to sort out that same issue on my end using this workaround.