Importing js objects instead of JSON

[idc77]

I'm migrating from vue-i18n to next-intl.
In vue-i18n there are language files, like

messages
├── de
│   └── index.js
├── en-US
│   └── index.js
└── index.js

messages/index.js

import enUS from './en-US'
import de from "./de";

export default {
  'en-US': enUS,
  'de': de
};

messages/en/index.js excerpt

export default {
  profile: {
    title: 'Profile Settings',
  },
 // ...
}

But next-intl expects JSON.

How do I accomplish that?

I already did

const enUS = {
  profile: {
    title: 'Profile Settings',
  }
}
export default JSON.stringify(enUS)

Can't I simply import all the translation files and return them conditionally?
Sure it's a bit larger memory footprint but nothing significant.

[idc77]

I now have

import {getRequestConfig} from 'next-intl/server';

export default getRequestConfig(async () => {
    // Provide a static locale, fetch a user setting,
    // read from `cookies()`, `headers()`, etc.
    const locale = 'en-US';
    // console.log(messages[locale]);
    const messages = (await import(`@/messages/${locale}/index.js`)).default
    return {
        locale,
        messages: messages
    };
});

But

import {DarkThemeToggle} from "flowbite-react";
import {useTranslations} from 'next-intl';

export default function Home() {
    const t = useTranslations();

    return (
        <main className="flex min-h-screen items-center justify-center gap-2 dark:bg-gray-800">
            <h1 className="text-2xl dark:text-white">{t('index.welcome')}</h1>
            <DarkThemeToggle/>
        </main>
    );
}

locale: en-US
IntlError: MISSING_MESSAGE: Could not resolve `index.welcome` in messages for locale `en-US`.
    at getFallbackFromErrorAndNotify (webpack-internal:///(rsc)/./node_modules/.pnpm/[email protected][email protected]/node_modules/use-intl/dist/development/createFormatter-D2v4ATzl.js:159:19)
    at translateBaseFn (webpack-internal:///(rsc)/./node_modules/.pnpm/[email protected][email protected]/node_modules/use-intl/dist/development/createFormatter-D2v4ATzl.js:184:14)
    at translateFn (webpack-internal:///(rsc)/./node_modules/.pnpm/[email protected][email protected]/node_modules/use-intl/dist/development/createFormatter-D2v4ATzl.js:258:20)
    at Home (webpack-internal:///(rsc)/./app/page.tsx:19:27)
    at ej (/home/darko/WebstormProjects/nextjs/cooksbooks/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:264151)
    at ez (/home/darko/WebstormProjects/nextjs/cooksbooks/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:267802)
    at eH (/home/darko/WebstormProjects/nextjs/cooksbooks/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:268559)
    at Timeout._onTimeout (/home/darko/WebstormProjects/nextjs/cooksbooks/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:265057)
    at listOnTimeout (node:internal/timers:594:17)
    at process.processTimers (node:internal/timers:529:7) {
  code: 'MISSING_MESSAGE',
  originalMessage: 'Could not resolve `index.welcome` in messages for locale `en-US`.'

messages is populated though.

[idc77]

So the solution was to just

export default {
 "index": {
   "welcome": "Welcome to this blah"
 }
}

in en-US/index.js