nuxt.config.js cannot use import statement outside a module, import colors from 'vuetify/es5/util/colors'

Question

I'm trying to deploy function only to firebase, here is the error:

+  functions: required API cloudfunctions.googleapis.com is enabled

Error: Error occurred while parsing your function triggers.

C:\Users\User\Documents\someapps\functions\nuxt.config.js:1
import colors from 'vuetify/es5/util/colors'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1025:15)
    at Module._compile (node:internal/modules/cjs/loader:1059:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:816:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:93:18)

The main error is: SyntaxError: Cannot use import statement outside a module.

Important part of the nuxt.config.js:

import colors from 'vuetify/es5/util/colors'

export default {
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,
      themes: {
        light: {
          info: colors.teal.lighten1,
          warning: colors.amber.base,
        }
      }
    }
  }
}

The colors used by vuetify config among others, how to refactor import colors without error?

I've tried:

Transpile like the documentation suggest :

build: {
    transpile: ['vuetify/es5/util/colors'],
}

The error changed to ReferenceError: colors is not defined since I dunno where/how to define the colors without the import.

Do you need to add `"type": "module"` to your `package.json`? — Andy, Sep 11 '21 at 08:18
@Andy I don't think editing ```package.json``` can alleviate the error. — M.Pribadi, Sep 11 '21 at 08:52
It was just a thought as I had the same issue (although not Vue-related) come up a couple of days ago. — Andy, Sep 11 '21 at 08:53
Can you follow [this StackOverFlow answer](https://stackoverflow.com/a/59399717) and [this github issue comment](https://github.com/nuxt-community/vuetify-module/issues/101#issuecomment-568258910) to see if it works for you? Also can you run `npm update vuetify` to upgrade vuetify and see if it resolves the error? — Prabir, Sep 14 '21 at 15:34
Tried [that StackOverFlow](https://stackoverflow.com/a/59399717) the `"type": "module"`, not working. In my case the module is not missing, so I skip the github issue comment link. For now I settle without the `import` line and declare all the value needed inside the `export default`, and move on :) — M.Pribadi, Sep 19 '21 at 04:57

nuxt.config.js cannot use import statement outside a module, import colors from 'vuetify/es5/util/colors'

I've tried:

0 Answers0