Memory leak

[Machine-Maker]

Version

nuxt-i18n: 6.18.0
nuxt: 2.14.12

Nuxt configuration

mode:

• universal
• spa

Nuxt-i18n configuration

no configuration (aka whatever the defaults are)

Steps to reproduce

1. yarn create nuxt-app <name>

2. (settings used)
   

3. Added nuxt-i18n to buildModules in nuxt.config.js

4. yarn dev

5. Open whatever resource manager (task manager, system monitor, etc) and find the right node task

6. navigate to localhost:3000 and refresh a bunch and watch the memory go up.

Note: I tried it w/o vuetify and it doesn't happen, and it doesn't happen with just vuetify, only when both are present.

EDIT: Use this repo to reproduce it.

What is Expected?

node shouldn't run out of memory.

What is actually happening?

NodeJS crash

[Machine-Maker]

Ok, so it turns out that vuetify only speeds up the process significantly. I re-did the process w/o vuetify and added another page after project creation, then I just put location.reload() in the mounted() hook and let it run for a while, and the leak was still there.

[Br4x]

Same here

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[divine]

Hello,

Can't reproduce, also it's 404:

EDIT: Use this repo to reproduce it.

Thanks!

[leonardlin]

Update: It seems to happen in combination with vue-i18n in dev-mode. In prod-mode I can't reproduce it either. Still investigating, will report if I can reproduce again.

[leonardlin]

I need to retract my reproduction-post (deleted). It was only reproducible in dev-mode and not in prod-mode.
I found the issue somewhere else.

[Machine-Maker]

Yeah, I knew it only happened in dev mode

[truesteps]

Heya! I'm experiencing a similar issue, where my memory usage spikes when I have defaultLocale defined? I tried what @Abdulrahmanh95 suggested, and it fixed the memory leak issue for me weirdly. I don't understand why this happens, I assume it's something with saving the defaultLocale to the state or something?

My config:

i18n: {
  locales: [
	  { code: 'en', file: 'en.json' },
	  { code: 'cs', file: 'cs.json' },
	  { code: 'fr', file: 'fr.json' }
  ],
  defaultLocale: 'en',
  lazy: true,
  strategy: 'no_prefix',
  langDir: '~/translations/',
  vueI18n: '~/plugins/i18n.ts'
},

When I remove defaultLocale, the memory leak disappears. Disabling lazy-loading doesn't fix the issue tho

// Edit:
I use nuxt version 2.15.8 and 6.28.1 nuxt-i18n

[rchl]

Can't do anything without a repo that reproduces. There are too many variables that are in play here (other packages, contents of the localizations, contents of your pages/components, project setup). Also you haven't specified whether the leak is during development only or also in production.

[truesteps]

I understand... It happens on development and on production as well, altho I see there is a new major version 7.31, i thought that it's only for nuxt 3, so I'm going to try and upgrade and see if that fixes anything :).

Thanks!

// Edit:
if the issue persist, I'll attach a repo to reproduce it

[truesteps]

Unfortunately, the issue persists in 7.3.1 @nuxtjs/i18n, I don't understand why, it only happens if defaultLocale is set. I'll see If I can prepare a demo repo

[alyeldegwy]

i've the same issue

[truesteps]

i've the same issue

@alyeldegwy what modules / plugins are you using outside of nuxt i18n? Maybe if we find a match we can discover what causes the memory leak, I couldn't reproduce it in a new repo for now

[truesteps]

I figured it out in my case.

When I used vue-toastification in conjunction with the defaultLocale in nuxt-i18n.

In the configuration, it required a position key, to change where the toast appears. I imported import { POSITION } from 'vue-toastification'; the position constant like this and set position: POSITION.TOP_RIGHT. It appears, that doing this caused the memory leak. If I just set the position to position: 'TOP_RIGHT' setting the position works, but TypeScript doesn't like it defined as a string, since in the plugin it's defined as a POSITION entry, so I just //@ts-ignore it.

So if you install @nuxtjs/i18n version 7.31 with vue-toastification version 1.7.14. In nuxt config set up i18n as follows:

	i18n: {
		locales: [
			{ code: 'en', file: 'en.json' },
			{ code: 'cs', file: 'cs.json' },
			{ code: 'fr', file: 'fr.json' }
		],
		lazy: true,
		defaultLocale: 'en',
		strategy: 'no_prefix',
		langDir: '~/translations/',
		vueI18n: '~/plugins/i18n.ts'
	},

~/plugins/i18n.ts

import { I18nOptions } from 'vue-i18n';

export default (): I18nOptions => ({
	fallbackLocale: 'en',

	pluralizationRules: {
		cs(choice: number) {
			if (choice === 0) {
				return 0;
			}

			if (choice === 1) {
				return 1;
			}

			if (choice > 1 && choice < 5) {
				return 2;
			}

			return 3;
		}
	}
});

and set VueToastification as such in nuxt config:

import { POSITION } from 'vue-toastification';
...

	toast: {
		position: POSITION.TOP_RIGHT,
		toastClassName: 'example-app-toast',
		timeout: 5000,
		maxToasts: 8,
		closeButton: false,
		newestOnTop: true
	},

You successfully replicate a memory leak.

// Edit
as a fun fact, you don't even need to import vue-toastification into your app, as in actually put the module into the modules array in nuxt config, if you just have the position key in your nuxt config under the toast key, it just memory leaks...

[agracia-foticos]

Same issue #2612

[agracia-foticos]

¡¡VERSION 8.0.1 works fine!!

[BobbieGoede]

Closing due to inactivity (and lack of up to date reproduction), if you're still experiencing this issue please open a new issue with a (minimal) reproduction.