[SvelteKit] Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension

[oskar-gmerek]

Hi there,

When I try to build my app, the process is crashed by this error.

(node:30559) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/Users/Desktop/app/node_modules/@tolgee/ui/dist/tolgee-ui.esm.js:86101
export { UI };

The same error crashing svelte-example app as well, but not in the build process. In svelte-example build is successful, but after yarn preview and loading the app in the browser, the crash comes out with the same error.

Tested with:
node 16.15.1
yarn 1.22.19
sveltekit 1.0.0-next.443
@tolgee/svelte 4.8.2
svelte: 3.49.0
on macOS/Safari|Brave Browser

##########################################

2. Is there any chance to add localized routes to the example app? something like this: example.com/translation-methods - for English example.com/cz/metody-prekladu - for Czech example.com/de/ubersetzungsmethoden - for Deutsch

Ideally, the localized path will be for all languages except the default language.

[JanCizmar]

Seems like the error can be reproduced with adapter-node / adapter-auto.

[oskar-gmerek]

With adapter-static the same output

[JanCizmar]

Thats weird, because we are using adapter static for testing with the example app. Does it also happen to you with the example app?

[oskar-gmerek]

I checked it. It's going to be ever weirder.

1. With adapter-static on example app build going well.
2. Preview instance (yarn preview) is go up correctly
3. I visit the app in the safari browser and everything looks good.
4. When visiting via Brave Browser (Version 1.42.97 Chromium: 104.0.5112.102](https://brave.com/latest/)) app crashed with this specific error. I still can see the app and it is interactive, but the server is down.

[JanCizmar]

Please try it with @tolgee/sevelte:4.8.3. (when it's released)

[oskar-gmerek]

@JanCizmar Sorry, I didn't have access to a mac yesterday.

with @tolgee/sevelte:4.8.3:

adapter-static (example app)

build: OK preview: OK visit in Safari: OK visit in Brave: crash

adapter-node (example app)

build: OK preview: OK visit in Safari: crash visit in Brave: crash

adapter-static (my app)

build: crash preview: n/a visit in Safari: n/a visit in Brave: n/a

adapter-node (my app)

build: crash preview: n/a visit in Safari: n/a visit in Brave: n/a

Every crash is ending with the same error:

(node:81814) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/Users/Oskar/Desktop/github/test/node_modules/@tolgee/ui/dist/tolgee-ui.esm.js:86101
export { UI };
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)

crash during build includes extra info (my app, not example app):

[vite-plugin-svelte-kit] Prerendering failed with code 1
error during build:
Error: Prerendering failed with code 1
    at ChildProcess.<anonymous> (file:///Users/Oskar/Desktop/github/test/node_modules/@sveltejs/kit/src/exports/vite/index.js:426:14)
    at ChildProcess.emit (node:events:527:28)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)

[JanCizmar]

OK. Sorry. It seems like for some reason the errors disappeared when I linked the local @tolgee/svelte into the app where I was trying to reproduced it. Anyway, I think I found solution.

[JanCizmar]

I've created a pre-release @tolgee/svelte:4.8.3-rc.a861236.0. Can you please try it with this version?

[oskar-gmerek]

I'm not sure if I know how to test it.

What I have done:

1. I downloaded https://github.com/tolgee/tolgee-js/releases/tag/v4.8.3-rc.a861236.0
2. Removed @tolgee/svelte | core | ui from a package.json in the example app
3. Added "@tolgee/svelte": "file:./tolgee/packages/svelte",
4. yarn install
5. yarn build

This is ending with error during build:

[commonjs--resolver] Failed to resolve entry for package "@tolgee/svelte". The package may have incorrect main/module/exports specified in its package.json.
error during build:
Error: Failed to resolve entry for package "@tolgee/svelte". The package may have incorrect main/module/exports specified in its package.json.

I'm not sure if I have done everything correctly to install the pre-release version

[JanCizmar]

Just replace the version in your package.json:

    "dependencies": {
        "@tolgee/svelte": "4.8.3-rc.a861236.0"
    }

Sorry for not being clear.

[oskar-gmerek]

@JanCizmar thanks

So, the example app looks good now. Both adapter-static, and adapter-auto work correctly in Safari and Brave without any crashes.

I can't check it in my app yet because it is trying to build pages for undefined language and I'm not sure why. If I will sort It out, I will update you. But at least is starting to build pages so I believe there will be no similar problems in that environment as well.

[JanCizmar]

Glad it's working. I am going to release so it should be working in next version of @tolgee/svelte.

Have you find some way how to do the localized routing? I found some solutions, but each is not super universal serving all the use cases. There is an issue about this in sveltekit repo https://github.com/sveltejs/kit/issues/553

If you cannot find a way I can provide some example for you.

[oskar-gmerek]

I currently doing a few things for it:

1. under routes I have [lang=lang]. But I really want to have an English version under root path / So I redirect everything during the language switch to the correct path like /czor /pland I do nothing if the base path is /. This way I have root site / under the English language, and all other English pages are under /en. This is not too good but is better for me than having the main English page under /en. But this also makes a problem, as the root page can't be translated via tolgee, because on this level tolgee context is still undefined.
2. I simply translated the rest of the path via tolgee with the getTranslate method. Unfortunately for this, I need hardcoding route params for each translation or making the deep path to avoid collisions. The deep paths approach is much worse for me, so I just stick to hardcoding route params for now.
3. Language is changed based on route param [lang], or if that is undefined then is changed to English.

Unfortunately, during changing the language on a path other than the root, something goes wrong. Url is correctly redirecting, new content is loaded, but the old content is stuck to the new page. So it ends with two contents in two different languages. To be honest... I have no idea why is that. I looking in the code for a few days and can't see anything related to this bug. It's why I will be happy to see someone's other solution to do this (and that for sure will be more elegant). And I also think that is good to include that in the demo. When I was looking for the i18n/l10n library I find it hard, as demos usually didn't show what I needed, just simple translations.

I hope they will add native support for i18n and l10n soon, at least something what is in nextJS

[JanCizmar]

Yes. The Next.js solution is great since it allows third party libraries to easily interact with it. There is a solution using sveltekit hooks, which looks promissing. I will try to provide an example for you.

[JanCizmar]

https://github.com/JanCizmar/svelte-i18n-routing

Here you go.

• The SSR is working fine
• It's routing with /[lang] prefix
• Requests for urls, which doesn't start with lang are redirected to /defaultLang/thePath

[oskar-gmerek]

Thank you