SvelteKit | SyntaxError: Named export 'IcuFormatter' not found.

[oskar-gmerek]

Hi there,

Fresh install, followed by guide

During the build I get an error:

import { Tolgee, IcuFormatter, TolgeeConfig } from "@tolgee/core";
                 ^^^^^^^^^^^^
SyntaxError: Named export 'IcuFormatter' not found. The requested module '@tolgee/core' is a CommonJS module, 
which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@tolgee/core';
const { Tolgee, IcuFormatter, TolgeeConfig } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:194:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:409:24)
    at async respond_with_error (file:///Users/wildbee/Desktop/swinggram.com/svelte/.svelte-kit/output/server/index.js:1683:30)
    at async resolve (file:///Users/wildbee/Desktop/swinggram.com/svelte/.svelte-kit/output/server/index.js:2175:18)
    at async respond (file:///Users/wildbee/Desktop/swinggram.com/svelte/.svelte-kit/output/server/index.js:2097:22)
    at async file:///Users/wildbee/Desktop/swinggram.com/svelte/node_modules/@sveltejs/kit/dist/vite.js:2624:5

And I have two extra questions not sure if are more related to Tolgee or SvelteKit:

1. Is it possible to change the HTML lang tag by switching languages?
2. Is it possible to handle different URL paths for languages from app level? like www.example.com/en, www.example.com/cz or/and en.example.com, cz.example.com?

[JanCizmar]

Hello. I am looking into it.

To the questions:

1. It is. You can use get language store method the same way as descibed in https://tolgee.io/docs/web/using_with_svelte/switching_language
2. I am looking into it 😆

[JanCizmar]

I just tried to bootstrap new project and everything seems to be working. However, the Sveltekit we are using in the library and our test app is outdated, so I've updated both. #3022

[oskar-gmerek]

Hello. Thanks, @JanCizmar for looking into it.
As you said it seems everything working for you so I tried it again with the tolgee example to be sure that I do not doing something wrong in my code.

1st step: I firstly clone the @tolgee/svelte-testapp repository

package.json

    "@sveltejs/adapter-static": "1.0.0-next.23",
    "@sveltejs/kit": "1.0.0-next.206",
    "@tolgee/core": "^4.7.0",
    "@tolgee/svelte": "^4.7.1",
    "@tolgee/ui": "^4.7.0",
    "@typescript-eslint/eslint-plugin": "^5.27.0",
    "@typescript-eslint/parser": "^5.27.0",
    "eslint": "^8.16.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-svelte3": "^3.4.1",
    "prettier": "^2.6.2",
    "prettier-plugin-svelte": "^2.7.0",
    "serve": "^12.0.1",
    "svelte": "^3.48.0",
    "svelte-check": "^2.7.1",
    "svelte-preprocess": "^4.10.6",
    "tslib": "^2.4.0",
    "typescript": "^4.7.2"

2nd step: npm install
3rd step: npm run build

The result is exactly the same as in the first post.

I bumped all dDependencies to the latest releases

   "@sveltejs/adapter-static": "1.0.0-next.34",
   "@sveltejs/kit": "1.0.0-next.355",
   "@tolgee/core": "^4.7.0",
   "@tolgee/svelte": "^4.7.1",
   "@tolgee/ui": "^4.7.0",
   "@typescript-eslint/eslint-plugin": "^5.30.0",
   "@typescript-eslint/parser": "^5.30.0",
   "eslint": "^8.18.0",
   "eslint-config-prettier": "^8.5.0",
   "eslint-plugin-svelte3": "^4.0.0",
   "prettier": "^2.7.1",
   "prettier-plugin-svelte": "^2.7.0",
   "serve": "^13.0.2",
   "svelte": "^3.48.0",
   "svelte-check": "^2.8.0",
   "svelte-preprocess": "^4.10.7",
   "tslib": "^2.4.0",
   "typescript": "^4.7.4"

After a few necessary changes to correct code for breaking changes between versions of SvelteKit.
Trying again.

npm install
npm run build

Unfortunately, result is the same:

 Prerendering
file:///Users/oskar/Desktop/projects/svelte/demo/svelte-example/.svelte-kit/output/server/entries/pages/__layout.svelte.js:2
import { Tolgee, IcuFormatter, TolgeeConfig } from "@tolgee/core";
                 ^^^^^^^^^^^^
SyntaxError: Named export 'IcuFormatter' not found. The requested module '@tolgee/core' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@tolgee/core';
const { Tolgee, IcuFormatter, TolgeeConfig } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:194:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:409:24)
    at async Promise.all (index 0)
    at async respond$1 (file:///Users/oskar/Desktop/projects/svelte/demo/svelte-example/.svelte-kit/output/server/index.js:1751:13)
    at async resolve (file:///Users/oskar/Desktop/projects/svelte/demo/svelte-example/.svelte-kit/output/server/index.js:2140:105)
    at async respond (file:///Users/oskar/Desktop/projects/svelte/demo/svelte-example/.svelte-kit/output/server/index.js:2095:22)
    at async visit (file:///Users/oskar/Desktop/projects/svelte/demo/svelte-example/node_modules/@sveltejs/kit/dist/vite.js:1121:20)
SyntaxError: Named export 'IcuFormatter' not found. The requested module '@tolgee/core' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@tolgee/core';
const { Tolgee, IcuFormatter, TolgeeConfig } = pkg;

[vite-plugin-svelte-kit] 500 /
SyntaxError: Named export 'IcuFormatter' not found. The requested module '@tolgee/core' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@tolgee/core';
const { Tolgee, IcuFormatter, TolgeeConfig } = pkg;

> 500 /
    at file:///Users/oskar/Desktop/projects/svelte/demo/svelte-example/node_modules/@sveltejs/kit/dist/vite.js:1020:11
    at save (file:///Users/oskar/Desktop/projects/svelte/demo/svelte-example/node_modules/@sveltejs/kit/dist/vite.js:1239:4)
    at visit (file:///Users/oskar/Desktop/projects/svelte/demo/svelte-example/node_modules/@sveltejs/kit/dist/vite.js:1130:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
oskar@imac27 svelte-example % 

So It's failing for me in both, locked to old versions, and after updating to new versions of all dependencies.
I want to remark that everything works (looks like works) correctly in the development environment. The problem is coming during the build for production.

[JanCizmar]

That's odd. What version of Node.js are you using?

[oskar-gmerek]

v18.3.0
I just swap and check v16.15.0. The same result.

[JanCizmar]

OK, now I am getting the same error. I'll look into that tomorrow. Weird that our e2e tests on production build were passing. Maybe node v16 makes the difference. (We were using v14).

[oskar-gmerek]

Cool. Thank you @JanCizmar

[JanCizmar]

OK, so I found the root cause of this whole issue. There was an issue in TypeScript. microsoft/TypeScript#45813 After updating typescript version in @tolgee/core everything seems to be working. So let me release new version :)

[JanCizmar]

I also created an example with the locale routing (the 2nd question): https://github.com/JanCizmar/tolgee-svelte-locale-routing