部署Nuxt到Firebase时nuxt.config.js无法使用import报错如何解决

错误根因 #

Node.js默认将.js文件识别为CommonJS模块，不支持ES模块的import/export语法，Firebase Cloud Functions运行环境默认也采用CommonJS规范，因此加载nuxt.config.js时遇到import语句直接抛出语法错误。你之前添加的transpile规则是Nuxt构建阶段的转译配置，不影响Node.js直接加载配置文件的逻辑，所以移除import后会出现colors is not defined报错。

解决方案 #

方案1：改用CommonJS语法（改造成本最低，推荐）

直接将nuxt.config.js的ES模块写法替换为CommonJS写法即可，代码如下：

// 将import改为require引入，注意末尾加.default取默认导出内容
const colors = require('vuetify/es5/util/colors').default

module.exports = {
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,
      themes: {
        light: {
          info: colors.teal.lighten1,
          warning: colors.amber.base,
        }
      }
    }
  },
  // 其余原有配置保留即可，无需保留之前新增的vuetify相关transpile规则
}

方案2：声明使用ES模块规范

如果需要保留import/export的写法，可在functions目录下的package.json文件中新增配置项：

{
  "type": "module"
}

该配置会告知Node.js将该目录下所有.js文件按ES模块规范解析，原有nuxt.config.js的代码无需修改即可正常运行。注意采用该方案后，functions目录下的所有Node.js代码都需要符合ES模块规范，不可再使用require、module.exports等CommonJS语法。

内容的提问来源于stack exchange，提问作者M.Pribadi