0

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 enter image description here

N.M
  • 11
  • 4
  • Are you sure is about the ssr? Because nuxt is SSR and like i thinks, the default mode of nuxt is SSR, https://v2.nuxt.com/fr/docs/configuration-glossary/configuration-ssr/ – Raphael Rlt May 22 '23 at 16:12
  • Well, I tested the same configuration on a brand new Nuxt project it works fine, I don't think the problem is from SSR, but why it gives me this error since everything working on the client side? I also tested my pages and components those are also working with ssr:false – N.M May 23 '23 at 05:40
  • In your current project that doesn't work with ssr set to ```true```. The project works, if ssr is set to ```false```? And if you remove the property ssr? – Raphael Rlt May 23 '23 at 07:13
  • Yes if I remove the `ssr` that will give me the same `error` as I set it to `true` – N.M May 23 '23 at 07:43
  • Well, i have a better understand, so it's really the activate ssr. If you have a full error link to "Cannot use import statement outside a module.", add it to the post. Follow this https://stackoverflow.com/questions/64132293/cannot-use-import-statement-outside-a-module-using-nuxtjs, it seems some packages need to be add like that, and you use vue package like apollo, gtag, maybe you can try to remove it from package and remove the import (vue use) and try to build, do not care if the project is broke. You can do it fast and see if it's the problem. – Raphael Rlt May 23 '23 at 07:54
  • I've tried everything you mentioned, including the post you mentioned and `vue-agile` documentation but unfortunately, none of them work for me. – N.M May 23 '23 at 09:21
  • Well, i don't have other insight. You need to remove some package/code, obviously something related to the import is wrong. The best lead you can find, is identify the exact line when this problem occured. – Raphael Rlt May 23 '23 at 13:24
  • Thank you @RaphaelRlt for your help anyway, I finally resolve this issue by replacing `import axios` to `fetch` wherever it is used. Only for `axios` not other packages, I still don't exactly know why but this is resolved somehow. – N.M May 30 '23 at 07:01
  • Nice if you solve your problem. Try to add a answer and provide the code you update, this will help the next! – Raphael Rlt May 30 '23 at 08:02

0 Answers0