Cannot use import statement outside a module NuxtJs when activate Server-side rendering

Question

I have encountered an issue while trying to enable server-side rendering (SSR) in my Nuxt 2 application. When I set ssr: true in the nuxt.config.js file, I receive the error message "Cannot use import statement outside a module."

To address this issue, I attempted to replace all the import statements with require(), but due to the project's size and live status, this approach became overly complicated, and I would prefer not to make extensive changes throughout the project.

Although all the components, pages, and plugins are functioning correctly, I suspect that the problem does not lie within the nuxt.config.js file. I created a new Nuxt 2 project with the same configuration in the nuxt.config.js file, and it works perfectly fine.

Could you provide any insights into why this issue is occurring? I appreciate your assistance in advance.

Thank you.

Here is my 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: {},

};

And here is my 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"
 }
 }

Edit: A snap from the error