i18n: Not work SPA (`ssr: false`)

Environment

  • Operating System: Linux
  • Node Version: v16.14.2
  • Nuxt Version: 3.4.2
  • Nitro Version: 2.3.3
  • Package Manager: yarn@1.22.19
  • Builder: vite
  • User Config: srcDir, ssr, typescript, hooks, build, css, vite, modules, i18n
  • Runtime Modules: @nuxtjs/i18n@8.0.0-beta.11
  • Build Modules: -

Reproduction

https://stackblitz.com/edit/github-xhfdq1-de15an

Describe the bug

Run “yarn build”. Then browse to “.nuxt/dist/client/_nuxt/i18n.options.*.js”. It’s content will look like this:

import { _ as r, s as index } from './entry.075876a4.js';
async function _(n) {
  const e = await r(() => import('./i18n.config.15578b8d.js'), [], import.meta.url).then(
      (t) => t.default || t,
    ),
    a = index.isFunction(e) ? await e(n) : index.isObject(e) ? e : {};
  {
    let t = null;
    try {
      const o = '/i18n-config-5fcc7ca7.js';   // <---------------------------- This file is not created
      t = await r(() => import(o), [], import.meta.url).then((s) => s.default || s);
    } catch (error) {
      console.error(format(error.message));
    }

    return (a.messages = t || {}), a;
  }
}

export { _ as default };

Imported file " ‘/i18n-config-5fcc7ca7.js’;" (with the dashes) is not created at all, therefore it breaks.

Additional context

I already opened a issue in the nuxt tracker (https://github.com/nuxt/nuxt/issues/20518) but now i am wondering if it is rather related to the module. If not it can be closed here.

Logs

No response

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 4
  • Comments: 34

Commits related to this issue

Most upvoted comments

1 set package.json

"type": "module",

2 install @nuxtjs/i18n-edge

pnpm add @nuxtjs/i18n-edge -D

3 and change nuxt.config.ts to

modules: ["@nuxtjs/i18n-edge"]

works for me.

nuxt 3.5.2 ssr:false, beta-12

+10
terwer on Jun 16, 2023

Same here ✋ nuxt 3.5.0 ssr:false, beta-12

Downgrading to beta-11 fixes it for me as well

+7
gbyesiltas on May 17, 2023

I got a different error now:


@aps-services/render:build:  ERROR  Plugin error - Unable to get file name for unknown file "381c911f".
@aps-services/render:build: 
@aps-services/render:build:   at error (/mnt/share/dev/code/poc-ts-boilerplate/node_modules/rollup/dist/es/shared/node-entry.js:2125:30)
@aps-services/render:build:   at Object.FileEmitter.getFileName (/mnt/share/dev/code/poc-ts-boilerplate/node_modules/rollup/dist/es/shared/node-entry.js:24128:24)
@aps-services/render:build:   at /mnt/share/dev/code/poc-ts-boilerplate/node_modules/@nuxtjs/i18n/dist/module.mjs:1216:50
@aps-services/render:build:   at Array.reduce (<anonymous>)
@aps-services/render:build:   at Object.generateBundle (/mnt/share/dev/code/poc-ts-boilerplate/node_modules/@nuxtjs/i18n/dist/module.mjs:1215:44)
@aps-services/render:build:   at /mnt/share/dev/code/poc-ts-boilerplate/node_modules/rollup/dist/es/shared/node-entry.js:24551:40
@aps-services/render:build:   at processTicksAndRejections (node:internal/process/task_queues:96:5)
@aps-services/render:build: 
@aps-services/render:build: ERROR: command finished with error: command (/mnt/share/dev/code/poc-ts-boilerplate/apps/render) yarn run build exited (1)
+5
apss-pohl on May 8, 2023

After many hours of trying different combinations this one worked for me:

  1. Install latest beta version 8.0.0-beta.12-28113576.7bc33c3
"devDependencies": {
    ...
    "@nuxtjs/i18n-edge": "8.0.0-beta.12-28113576.7bc33c3",
    ...
}
  1. Set module in nuxt.config.ts
modules: [
        ....
        '@nuxtjs/i18n-edge',
        ....
]
  1. Rename i18n.config.ts to nuxt.i18n.config.ts

Works for:

  • nuxt 3.5.3
  • nitro 2.4.1
  • ssr: false
  • i18n: 8.0.0-beta.12-28113576.7bc33c3
+4
valentiniljaz on Jun 20, 2023

thanks to gbyesiltas I could also solve the problem, but I had to make a small change. Installing the @nuxtjs/i18n-edge isn’t enough, you should also register it as module.

So this is wrong (for now): modules: [["@nuxtjs/i18n", i18nConfig]],

Instead do this: modules: ['@nuxtjs/i18n-edge'],

and put your config like this:

  i18n: {
    vueI18n: './i18n.config.ts'
  },

I think this will be unnecessary after bug fix goes in to the next (main) branch.

+4
serdarde on May 26, 2023

@kazupon thank you for your effort. I appreciate it. Unfortunately, it still throws error. This time different error on compile time

For me the working combo was: 1- Update to @nuxtjs/i18n-edge (I had to also delete package-lock) 2- Add "type": "module" to package.json 3- Did not use i18n.config.ts as the config file name. Rather used nuxt.i18n.config.ts but the exact name doesn’t matter. I did it to avoid auto-importing of the configuration 4- On nuxt.config.ts used the object way of providing module options instead of the array syntax:

// causes errors
modules: [["@nuxtjs/i18n", i18nConfig]],

// works
modules: ["@nuxtjs/i18n"],
i18n: i18nConfig,
+4
gbyesiltas on May 26, 2023

related issue https://github.com/nuxt-modules/i18n/issues/2156

When the same locale file (.js or .ts) as common logics on langDir option, nuxt i18n module doesn’t work for ssr: false. it’s acknowledged that there is a bug.

+3
kazupon on Jun 16, 2023

Thanks @gbyesiltas I deleted the “package.lock.json” or “yarn.lock” file and redid a “yarn install”. I used @nuxtjs/i18n-edge and added “type”: “module” in package.json. Great work. image I think it can help others too

Thank you

+2
0fatihyildiz on Jun 20, 2023

Thanks @gbyesiltas I deleted the “package.lock.json” or “yarn.lock” file and redid a “yarn install”. I used @nuxtjs/i18n-edge and added “type”: “module” in package.json. Great work. image I think it can help others too

+2
ainajh on Jun 16, 2023

Just found out that adding "type": "module" now is required to use this package 😊 #2052 - so it’s working for me 😎👍🎉

Mine was already with type module, and it does not work

+2
CavalcanteLeo on May 30, 2023

Not sure if this is the right issue … I’m getting an error like the one reported in https://github.com/nuxt-modules/i18n/issues/2077 but I cannot see the import e82347ba stated as missing in the error message ( ERROR [nuxtjs:i18n-resource-dynamic] Plugin error - Unable to get file name for unknown file "e82347ba".) being used anywhere in the code, so I don’t know if I’m right when adding my story here…

When I try following this procedure here, and I get somewhere closer to the goal. When replacing @nuxtjs/i18n version 8.0.0-beta.12 by @nuxtjs/i18n-edge version 8.0.0-beta.12-28090693.c8406ad, I’m faced with a new error when trying to build:

 ERROR  (node:52982) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.                        5:47:04 PM
(Use node --trace-warnings ... to show where the warning was created)


 ERROR  [nuxt] [request error] [unhandled] [500] Unexpected token 'export'                                                                     5:47:04 PM
  at internalCompileFunction (node:internal/vm:73:18)  
  at wrapSafe (node:internal/modules/cjs/loader:1149:20)  
  at Module._compile (node:internal/modules/cjs/loader:1190:27)  
  at Module._extensions..js (node:internal/modules/cjs/loader:1280:10)  
  at Module.load (node:internal/modules/cjs/loader:1089:32)  
  at Module._load (node:internal/modules/cjs/loader:930:12)  
  at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)  
  at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

  ├─ /__i18n__/prerender/46b58757.js (111ms) (Error: [500] )                                                                             nitro 5:47:04 PM

[5:47:04 PM]  WARN  HTML content not prerendered because ssr: false was set. You can read more in https://nuxt.com/docs/getting-started/deployment#static-hosting.

I’ve tried to set it (which requires my prettier config to be renamed to prettier.config.cjs) and it works 😃 🎉 , but I’d like to avoid having to set "type": "module" in my package.json file. 😅

EDIT: Renaming the config file was not required - it works for me having the config file named i18n.config.ts.

+2
SimonSimCity on May 30, 2023

I am having a different error now:

image

+2
apss-pohl on May 23, 2023

Hi,

Yes the solution of @gbyesiltas is work but we have [nuxt] error caught during app initialization ReferenceError: format is not defined error when downgroad to beta-11 ahaha

+2
gunter423 on May 23, 2023

hmm 🤔 when we are set ssr: false on nuxt.config.ts, we can meet your error.

+2
kazupon on May 9, 2023

Does putting the package version in edge is a kind of downgrade ? I applied this solution (edge) to solve my build and it worked for me (after rolling my head on the keyboard for an hour). What are the pros and cons ?

+1
aburii on Jun 15, 2023

Just found out that adding "type": "module" now is required to use this package 😊 https://github.com/nuxt-modules/i18n/pull/2052 - so it’s working for me 😎👍🎉

+1
SimonSimCity on May 30, 2023

that didn’t work for me @serdarde =(

+1
CavalcanteLeo on May 30, 2023
Read more comments on GitHub
← i18n: [NEXT] Crashes on rc.9 and rc.10 `Only file and data URLs are supported by the default ESM loader`
i18n: Page transition broken with nuxt-i18n →