Cannot use import statement outside a module using nuxtjs

Question

I am trying to use vue-agile carousel, I can install and get it to run without any issues right after i install it, i am using NUXT, but after restarting my server i keep getting this error and can not find any solution for it

<template>
  <div>
    <agile>
      <div class="slide">
        <img src="/img/img2.jpg" alt="" />
      </div>
      <div class="slide">
        <img src="/img/img1.jpg" alt="" />
      </div>
    </agile>
  </div>
</template>
<script >
import { VueAgile } from "vue-agile";
export default {
  name: "",
  layout: "",
  middleware: [],
  data() {
    return {};
  },
  components: {
    agile: VueAgile,
  },
  
};
</script>

Did you ever find a solution to this?

Ricky Barnett
– Ricky Barnett

2021-01-05 18:56:57 +00:00
Commented Jan 5, 2021 at 18:56 — Ricky Barnett
– Ricky Barnett, Commented Jan 5, 2021 at 18:56

Sergio Cerrutti · Accepted Answer · 2021-07-30 08:09:41Z

6

Did you checked the documentation about how to use this plugin in Nuxt instead of a regular Vue?

plugins/vue-agile.js

import Vue from 'vue'
import VueAgile from 'vue-agile'

Vue.use(VueAgile)

nuxt.config.js

export default {
    plugins: ['~/plugins/vue-agile', mode: 'client']
}

To use component without SSR use the client-only component:

<client-only placeholder="Loading...">
    <agile>...</agile>
</client-only>

EDIT: Add Shreerang's suggestion (comment below).

edited Jul 30, 2021 at 8:09

answered Sep 30, 2020 at 10:44

Sergio Cerrutti

4042 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

CYBERSIX Over a year ago

I get the same error message. and added a new pic to my question

Sergio Cerrutti Over a year ago

That warning in the new screenshot is because you are using Typescript, and that node_module is not ready for I guess, but I don't think that is a problem. I found a possible solution, other people reported that maybe this can happen when you update the Node version but you don't update your node_modules after that, so maybe you can try this:rm -rf node_modules && npm install in your Nuxt root folder. Let me know if it helps, it sounds like magical I know haha.

CYBERSIX Over a year ago

Nope, still the same, and it s not just this modules, even the one I use to used before giving me the same error

Jovylle Over a year ago

can also be used here right? inside if(process.client) {...}

Muhammad Ichsan · Accepted Answer · 2022-07-31 23:03:41Z

4

from official Nuxt.js docs, they said.

If you get an Cannot use import statement outside a module error, you may need to add your package to the build > transpile option in nuxt.config.js for webpack loader to make your plugin available.

Example

module.exports = {
  build: {
    transpile: ['vue-agile']
  }
}

answered Jul 31, 2022 at 23:03

Muhammad Ichsan

4655 silver badges7 bronze badges

Comments

Dharman · Accepted Answer · 2021-05-14 15:51:07Z

3

Sergio's answer above is mostly accurate, but needs a small tweek.

The nuxt.config.json config needs the following update. No build config is required.

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

edited May 14, 2021 at 15:51

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered May 14, 2021 at 15:45

Shreerang

3871 gold badge4 silver badges15 bronze badges

1 Comment

Sergio Cerrutti Over a year ago

Sure, the error seems to be in the server side, I changed my answer to include this. Thanks!

Boussadjra Brahim · Accepted Answer · 2021-11-14 08:39:36Z

2

You need to mark vue-agile to be transpiled in order to work on the server part (SSR).

nuxt.config.js :

...
  build: {
    transpile: [/vue-agile/]

  }
...

answered Nov 14, 2021 at 8:39

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Comments

Ankit · Accepted Answer · 2020-09-30 11:16:53Z

0

Add type="module" in your script tag

<script type="module">
import { VueAgile } from "vue-agile";
export default {
  name: "",
  layout: "",
  middleware: [],
  data() {
    return {};
  },
  components: {
    agile: VueAgile,
  },
  
};
</script>

answered Sep 30, 2020 at 11:16

Ankit

6327 silver badges13 bronze badges

1 Comment

CYBERSIX Over a year ago

Same error , i think I tried that before. this is very frustrating.

Collectives™ on Stack Overflow

Cannot use import statement outside a module using nuxtjs

5 Answers 5

4 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related