Unexpected character '@' when using 0.2.0 with Svelte 4.x

Hello, Following #14 I upgraded to 0.2.0 in a Svelte 4.x project and replaced all Ts with LegacyT but I get an error:

$ npm run dev

> myapp@0.0.1 dev
> vite dev

Re-optimizing dependencies because lockfile has changed

  VITE v5.4.11  ready in 1649 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
✘ [ERROR] /home/baptiste/mydir/myapp/node_modules/svelte-i18n-lingui/dist/T.svelte:61:19 Unexpected character '@' [plugin vite-plugin-svelte:optimize-svelte]

    node_modules/svelte-i18n-lingui/dist/T.svelte:61:19:
      61 │ strings[0] ?? ''}{@render children?.()}{strings[1] ?? ''}{@render second?....
         ╵                    ^

  The plugin "vite-plugin-svelte:optimize-svelte" was triggered by this import

    node_modules/svelte-i18n-lingui/dist/index.js:177:29:
      177 │ export { default as T } from './T.svelte';
          ╵                              ~~~~~~~~~~~~

✘ [ERROR] Missing "./legacy" specifier in "svelte" package [plugin vite:dep-pre-bundle]

    node_modules/svelte-i18n-lingui/dist/LegacyT.svelte:27:20:
      27 │ import { run } from 'svelte/legacy';
         ╵                     ~~~~~~~~~~~~~~~

  This error came from the "onResolve" callback registered here:

    node_modules/vite/node_modules/esbuild/lib/main.js:1150:20:
      1150 │       let promise = setup({
           ╵                     ^

    at setup (file:///home/baptiste/mydir/myapp/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:46934:13)
    at handlePlugins (/home/baptiste/mydir/myapp/node_modules/vite/node_modules/esbuild/lib/main.js:1150:21)
    at buildOrContextImpl (/home/baptiste/mydir/myapp/node_modules/vite/node_modules/esbuild/lib/main.js:873:5)
    at Object.buildOrContext (/home/baptiste/mydir/myapp/node_modules/vite/node_modules/esbuild/lib/main.js:699:5)
    at /home/baptiste/mydir/myapp/node_modules/vite/node_modules/esbuild/lib/main.js:2032:68
    at new Promise (<anonymous>)
    at Object.context (/home/baptiste/mydir/myapp/node_modules/vite/node_modules/esbuild/lib/main.js:2032:27)
    at Object.context (/home/baptiste/mydir/myapp/node_modules/vite/node_modules/esbuild/lib/main.js:1874:58)
    at prepareEsbuildOptimizerRun (file:///home/baptiste/mydir/myapp/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:50924:33)

$ node --version
v22.11.0

$ npm ls
myapp@0.0.1 /home/baptiste/mydir/myapp
├── @eslint/eslintrc@3.2.0
├── @eslint/js@9.15.0
├── @lingui/cli@4.14.0
├── @lingui/core@4.14.0
├── @sveltejs/adapter-node@5.2.9
├── @sveltejs/kit@2.8.1
├── @sveltejs/vite-plugin-svelte@3.1.2
├── @testing-library/svelte@5.2.6
├── @types/node@20.17.6
├── @typescript-eslint/eslint-plugin@8.15.0
├── @typescript-eslint/parser@8.15.0
├── @vitest/coverage-v8@2.1.5
├── eslint-config-prettier@9.1.0
├── eslint-plugin-svelte@2.46.0
├── eslint@9.15.0
├── globals@15.12.0
├── jsdom@25.0.1
├── msw@2.6.5
├── prettier-plugin-svelte@3.2.8
├── prettier@3.3.3
├── svelte-check@4.0.9
├── svelte-i18n-lingui@0.2.0
├── svelte-preprocess@6.0.3
├── svelte@4.2.19
├── tslib@2.8.1
├── typescript@5.6.3
├── vite@5.4.11
└── vitest@2.1.5

The error comes from vite-plugin-svelte but I’m using the latest version before 4.0.0, which dropped support for Svelte 4.x. Any idea?

Thanks for the report! The two errors in you encounter seems to be related to new Svelte 5 syntax not being recognized by Svelte 4. For the first one, I was surprised that the <T> component is parsed even though it is not imported. It seems that Vite is trying to optimize deps, which include the new <T> component.

For that one, adding the path to the library to optimizeDeps.exclude in the vite config might solve the issue. However with the second one, it seems to be related to Svelte 5's compatibility code for Svelte 4 syntax (the run function to replace $). Looking at the error made me realize that to make it work with Svelte 4, I'll need to prepare a separate component specifically for Svelte 4 that uses the $ symbol instead of the run function, which I'm not sure is worth the complexity.

Now I'm thinking it's better to keep using the older v0.1.x instead for Svelte 4 and only migrate to v0.2.0 when migrating to Svelte 5. There is also no feature difference between the two at the moment, other than Svelte 5 support. Any thoughts?

HenryLie / svelte-i18n-lingui

Unexpected character '@' when using 0.2.0 with Svelte 4.x #15