Nuxt 2开启SSR时报错：Cannot use import statement outside a module

问题描述 #

在Nuxt 2应用中启用SSR（设置ssr: true）后，触发错误提示Cannot use import statement outside a module。尝试将所有import替换为require()但因项目规模大且处于线上状态，不想大范围修改。所有组件、页面、插件运行正常，且用相同配置新建的Nuxt 2项目可正常运行，求问题原因。

配置文件 #

nuxt.config.js #

import axios from "axios";

export default {
ssr: true,

target: "server",

head: {
    titleTemplate: "",
    title: "",
    htmlAttrs: {
     lang: "en",
    },
   meta: [],
   script: [
  {
    type: "application/ld+json",
    json: {
      "@context": "",
      "@graph": [],
    },
  },
  ],
 link: [ ],
 },
 css: ["~assets/style/app.css"],

plugins: [
{ src: "~/plugins/vuetify.js" },
{ src: "~/plugins/analytics.js" },
{ src: "~/plugins/gsap.js", mode: "client", ssr: false },
],


components: {
dirs: ["~/components", "~/components/svgs"],
},
buildModules: ["@nuxtjs/vuetify"],

modules: [
"@nuxt/image",
"nuxt-font-loader",
"@nuxtjs/axios",
"@nuxtjs/redirect-module",
"@nuxtjs/sitemap",
"nuxt-gsap-module",
],


 build: {},

 gsap: {

extraPlugins: {
  scrollTo: true,
  scrollTrigger: true,
},

extraEases: {
  expoScaleEase: true,
},
},

vuetify: {
customVariables: ["~/assets/variables.scss"],
treeShake: true,
defaultAssets: false,
theme: {
  themes: {
    light: { },
    dark: {},
  },
},
},

fontLoader: {
url: {
  google:
    "",
},
},

axios: {
credentials: true,
https: true,
baseURL: "/",
},

proxy: {
"/api/createLead": {
  target: "",
  changeOrigin: true,
},
"/api/subscribe": {
  target: "",
  changeOrigin: true,
},
},

speedkit: {
detection: {
  performance: true,
  browserSupport: true,
},

performanceMetrics: {
  device: {
    hardwareConcurrency: { min: 2, max: 48 },
    deviceMemory: { min: 2 },
  },
  timing: {
    fcp: 800,
    dcl: 1200,
  },
},

targetFormats: ["webp", "avif", "jpg|jpeg|png|gif"],

lazyOffset: {
  component: "0%",
  asset: "0%",
},
},

image: { },

redirect: [],

sitemap: {
hostname: "",
gzip: true,
routes: async () => {},
},

publicRuntimeConfig: {},

};

package.json #

{
  "name": "Project Name",
  "version": "1.0.0",
  "private": true,
  "scripts": {
 "dev": "nuxt",
 "build": "nuxt build",
 "start": "nuxt start",
 "generate": "nuxt generate"
  },
 "dependencies": {
 "@mdi/font": "^7.1.96",
 "@nuxtjs/axios": "^5.13.6",
 "@nuxtjs/google-analytics": "^2.4.0",
 "@nuxtjs/redirect-module": "^0.3.1",
 "@nuxtjs/sitemap": "^2.4.0",
 "apollo-boost": "^0.4.9",
 "axios": "^1.3.2",
 "core-js": "^3.25.3",
 "cors": "^2.8.5",
 "express": "^4.18.2",
 "graphql": "^15.8.0",
 "isomorphic-fetch": "^3.0.0",
 "node-mautic": "^1.2.7",
 "nuxt": "^2.15.8",
 "nuxt-speedkit": "^2.1.3",
 "vue": "^2.7.10",
 "vue-apollo": "^3.1.0",
 "vue-gtag": "^1.16.1",
 "vue-server-renderer": "^2.7.10",
 "vue-template-compiler": "^2.7.10"
 },
 "devDependencies": {
"@nuxt/content": "^1.15.1",
"@nuxt/image": "^0.7.1",
"@nuxtjs/vuetify": "^1.12.3",
"@types/isomorphic-fetch": "^0.0.36",
"nuxt-font-loader": "^1.1.5",
"nuxt-gsap-module": "^1.7.3",
"sass": "~1.32",
"sass-loader": "^10.1.1"
 }
 }

错误截图 #

问题原因分析 #

1. 项目缓存干扰 #

旧项目的.nuxt构建缓存、node_modules缓存可能存在残留的ES模块代码，导致SSR启动时无法识别import语法。新项目无缓存，所以正常运行。

排查步骤：

• 删除.nuxt目录、node_modules目录和package-lock.json/yarn.lock
• 重新执行npm install和nuxt build

2. 未被转译的第三方依赖 #

部分第三方依赖（比如nuxt-speedkit或node-mautic）可能以ES模块格式发布，但Nuxt 2默认不会转译所有依赖。当SSR启动时，Node.js直接执行这些未转译的代码，就会抛出import语法错误。

排查步骤：

• 在nuxt.config.js的build配置中添加transpile字段，将可疑依赖加入转译列表：

build: {
  transpile: ['nuxt-speedkit', 'node-mautic'] // 根据实际情况调整
}

3. 自定义服务器/Server Middleware问题 #

如果项目中存在自定义Express服务器文件（比如server/index.js）或Server Middleware脚本，且这些文件使用了import语法但未被Babel转译，就会触发错误。新项目没有这些自定义文件，所以正常。

排查步骤：

• 检查项目根目录下的server文件夹或serverMiddleware配置的文件，将其中的import替换为require()，或者配置Babel转译这些文件。

4. Node.js版本兼容性 #

Nuxt 2.15.8要求Node.js版本至少为12.x，但如果旧项目使用的Node.js版本过低（比如v10及以下），Node.js本身不支持在CommonJS模块中使用import语法，就会报错。新项目使用的Node.js版本符合要求，所以正常。

排查步骤：

• 执行node -v查看版本，确保版本≥12.x，推荐使用LTS版本（比如14.x或16.x）。

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