'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