'Using lingui macro in sveltekit, how to configure babel in svelte.config?
I'm hoping I'm on the right track. I've installed @lingui/core and @lingui/macro,
in my svelte app i have a LanguageProvider
import { i18n } from '@lingui/core'
import {
detect,
fromUrl,
fromStorage,
fromNavigator,
} from '@lingui/detect-locale'
import { en, zh, ru, tr, es, pt, fr } from 'make-plural/plurals'
import * as defaultLocale from '../../locales/en/messages'
import { SUPPORTED_LOCALES, DEFAULT_LOCALE } from '$constants/locale'
// load plural configs
i18n.loadLocaleData({
en: { plurals: en },
zh: { plurals: zh },
ru: { plurals: ru },
tr: { plurals: tr },
pt: { plurals: pt },
es: { plurals: es },
fr: { plurals: fr },
})
const getLocale = (): string => {
let locale =
detect(fromUrl('lang'), fromStorage('lang'), fromNavigator()) ??
DEFAULT_LOCALE
if (!SUPPORTED_LOCALES.includes(locale)) {
locale = DEFAULT_LOCALE
}
return locale
}
const activateDefaultLocale = () => {
const { messages } = defaultLocale
i18n.load(DEFAULT_LOCALE, messages)
i18n.activate(DEFAULT_LOCALE)
}
const dynamicActivate = async (locale: string) => {
try {
const { messages } = await import(`../locales/${locale}/messages`)
i18n.load(locale, messages)
i18n.activate(locale)
} catch (e) {
console.error(`Error loading locale "${locale}:"`, e)
// fall back to default locale
activateDefaultLocale()
}
}
export function loadLocale() {
const locale = getLocale()
if (locale === DEFAULT_LOCALE) {
return activateDefaultLocale()
}
dynamicActivate(locale)
}
At the top of one of my components I call getLocale, although when I then try to use t from
import { t } from "@lingui/macro";, I get the error message:
process is not defined
ReferenceError: process is not defined
at node_modules/path-parse/index.js (http://localhost:5000/node_modules/.vite/deps/@lingui_macro.js?v=624a68bb:226:21)
at __require2 (http://localhost:5000/node_modules/.vite/deps/chunk-5537U2Q2.js?v=624a68bb:47:50)
at node_modules/resolve/lib/node-modules-paths.js (http://localhost:5000/node_modules/.vite/deps/@lingui_macro.js?v=624a68bb:282:33)
at __require2 (http://localhost:5000/node_modules/.vite/deps/chunk-5537U2Q2.js?v=624a68bb:47:50)
at node_modules/resolve/lib/async.js (http://localhost:5000/node_modules/.vite/deps/@lingui_macro.js?v=624a68bb:615:28)
at __require2 (http://localhost:5000/node_modules/.vite/deps/chunk-5537U2Q2.js?v=624a68bb:47:50)
at node_modules/resolve/index.js (http://localhost:5000/node_modules/.vite/deps/@lingui_macro.js?v=624a68bb:1362:17)
at __require2 (http://localhost:5000/node_modules/.vite/deps/chunk-5537U2Q2.js?v=624a68bb:47:50)
at node_modules/babel-plugin-macros/dist/index.js (http://localhost:5000/node_modules/.vite/deps/@lingui_macro.js?v=624a68bb:12291:21)
at __require2 (http://localhost:5000/node_modules/.vite/deps/chunk-5537U2Q2.js?v=624a68bb:47:50)
I've googled and looked at the docs, and I think the issue is that I need to add plugin macro to babel...
Which, I thought would be something like this (having read: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md#babel):
// svelte.config.js
import preprocess, { babel } from 'svelte-preprocess';
...
preprocess: [preprocess(), babel({plugins: ["macros"]})],
Alas, I get the message "Named export "babel" not found".
So - my question is two-fold, is my actual issue even related to the babel plugin, and if so; how do I add a plugin to babel?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
