Error: "Cannot use import statement outside a module" ( Nuxt.js )

[miketromba]

trafficstars

Getting this error when using Nuxt.js.

The component is wrapped in a client-only tag to avoid any SSR issues.

<client-only></client-only>

Error screenshot:

Implementation:

In component

<Stack :monitor-images-loaded="true" :column-min-width="320" :gutter-width="8" :gutter-height="8">
        <StackItem v-for="i in 100" :key="i">
                <img src="https://i.imgur.com/0ui5ltX.jpg" />
        </StackItem>
</Stack>

Component registration

import { Stack, StackItem } from 'vue-stack-grid'
export default {
    components: { Stack, StackItem },
}

[Ben2146053]

Do we have any update on this?

[WouterFlorijn]

I believe Nuxt SSR doesn't handle ES6 modules. I want to make this package transpile to CommonJS, but I'm currently very busy with my day job. If anyone wants to make a PR with Webpack/Babel configuration, I'll definitely look at it.

[DanielAlcaraz]

Maybe is related to this: https://github.com/nuxt/nuxt.js/issues/924#issuecomment-309417199

I don't know if with the transpile option it can work: https://nuxtjs.org/api/configuration-build#transpile

[guastallaigor]

I think I have a workaroud. Instead of importing the Stack and StackItem components directly into your page/layout component, you create a Nuxt.js plugin:

plugins/vue-stack-grid.js

import Vue from 'vue'
import { Stack, StackItem } from 'vue-stack-grid'

Vue.component('Stack', Stack)
Vue.component('StackItem', StackItem)

And then, in your nuxt.config.js you import it, and set the mode: 'client'.

plugins: [
    { src: '~/plugins/vue-stack-grid', mode: 'client' }
  ]

Seems to have worked for me at least.

[shot-codes]

I was able to get the component imported by using @guastallaigor's workaround. However, I am seeing some odd behaviour:

Any ideas of what to take a look at to debug?