svelte-intl-precompile: Sveltekit + Windows = ERR_REQUIRE_ESM

I would like to add some information I gathered. I’m not sure if my issue is directly related to this, but the error is quiet similar.

I’ve a setup with rollup and included svelte-intl-precompile in order to compile the translations beforehand. The issue on my specific use case was that during SSR svelte-intl-precompile gets loaded in esm mode, initialized by "type": "module" in the projects package.json. By the looks of it svelte-intl-precompile or to better name it precompile-intl-runtime is not able to run in esm mode without an external bundler.

There are two missing parts:

• There exists no main entrypoint in the package.json of precompile-intl-runtime.
• precompile-intln-runtime is not a valid es module as it does not have file endings in it’s compiled module imports.

The second point is derived from the nodejs documentation which states:

Relative specifiers like ‘./startup.js’ or ‘…/config.mjs’. They refer to a path relative to the location of the importing file. The file extension is always necessary for these.

The typescript compiler does not issue such output and therefore does not produce valid es modules. See microsoft/TypeScript/issues/42151 and microsoft/TypeScript/pull/42184. The recommended way is to ad the js extension already in the typescript files. Which is IMHO kind of confusing, but it works.

Maybe the svelte/vite/node handling on windows is minimal different on windows than on other OS and therefore produces this issues (only a wild guess). Could be that addressing the invalid esm module issues solves this issue as a side effect.

I’ve created a fork and applied the needed fixes, it’s over here for reference.

@cibernox I’ve gotten it to work by using the full path to import
import { init, getLocaleFromNavigator, addMessages } from '../../node_modules/svelte-intl-precompile';

whereas import { init, getLocaleFromNavigator, addMessages } from 'svelte-intl-precompile'; throws the same error @vish01 is getting

@civile I not longer have this issue. I think it was due to using old extensions provided Code Server. I think switching to the VSX Registry or using the Microsoft Store and then updating all of your extensions will resolve this for you.

I think this is a SvelteKit bug.

After doing an “rm -rf node_modules”, deleting the package-lock.json and reinstalled all modules, the svelte-intl-precompile was indeed installed. However the error changed to:

`

Using @sveltejs/adapter-node Cannot find package ‘/Users/thor/Dev/www/AF/node_modules/precompile-intl-runtime/’ imported from /Users/thor/Dev/www/AF/.svelte-kit/output/server/app.js Error [ERR_MODULE_NOT_FOUND]: Cannot find package ‘/Users/thor/Dev/www/AF/node_modules/precompile-intl-runtime/’ imported from /Users/thor/Dev/www/AF/.svelte-kit/output/server/app.js at new NodeError (node:internal/errors:363:5) at legacyMainResolve (node:internal/modules/esm/resolve:256:9) at packageResolve (node:internal/modules/esm/resolve:691:14) at moduleResolve (node:internal/modules/esm/resolve:739:18) at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:853:11) at Loader.resolve (node:internal/modules/esm/loader:89:40) at Loader.getModuleJob (node:internal/modules/esm/loader:242:28) at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:73:40) at link (node:internal/modules/esm/module_job:72:36)

`

Looks like the modules entry point cannot be resolved.

@cibernox I use SvelteKit 1.0.0-next.115 and 0.3.2 of the library.

I followed the installation guide here on GitHub. I just changed the library from devDependency to normal dependency. The error disappeared but now it throws:

> Cannot find package '/Users/thor/Dev/www/AF/node_modules/precompile-intl-runtime/' imported from /Users/thor/Dev/www/AF/node_modules/svelte-intl-precompile/index.js Error [ERR_MODULE_NOT_FOUND]: Cannot find package '/Users/thor/Dev/www/AF/node_modules/precompile-intl-runtime/' imported from /Users/thor/Dev/www/AF/node_modules/svelte-intl-precompile/index.js

I wonder why that dependency was not installed as it mentioned in the libraries package.json.

sadly it’s not possible at the moment, for now I can just show how I use that

package.json fragment

 "devDependencies": {
    "@sveltejs/adapter-static": "^1.0.0-next.11",
    "@sveltejs/kit": "1.0.0-next.110",
    "autoprefixer": "^10.2.5",
    "cssnano": "^5.0.1",
    "postcss": "^8.2.10",
    "postcss-load-config": "^3.0.1",
    "precompile-intl-runtime": "github:tobiaskohlbau/precompile-intl-runtime#47dcf767f0b496b663ae13ca87fcf9d9c75c82b3",
    "svelte-intl-precompile": "^0.3.3",
    "prettier": "~2.2.1",
    "prettier-plugin-svelte": "^2.2.0",
    "svelte": "^3.34.0",
    "svelte-preprocess": "^4.7.1",
    "tailwindcss": "^2.1.1",
    "vite-imagetools": "^3.6.7",
    "vite-plugin-svelte-svg": "^1.0.0"
  },

svelte.config.js

import precompileIntl from "svelte-intl-precompile/sveltekit-plugin.js"

const config = {
	preprocess: [
		preprocess({
			postcss: true
		})
	],
	kit: {
		// hydrate the <div id="svelte"> element in src/app.html
		adapter: adapter({}),
		target: '#svelte',
		vite: defineConfig({
			plugins: [
				imagetools(),
				svelteSVG({}),
				precompileIntl('locales')
			],
			resolve: {
				alias: {
					$assets: path.resolve('./src/assets')
				}
			}
		})
	}
};

export default config;

Component.svelte

<script>
	import { t } from '../../node_modules/svelte-intl-precompile' //as suggested by one of the comments
<script>

				<div class="w-fit-content mx-auto sm:float-left py-16 lg:py-0 lg:float-right lg:pr-12 xl:pr-14 2xl:pr-16">
					<h3 class="text-accent text-30 py-4">
						{$t("title")} }
					</h3>
					<h1 class="text-50 text-primary font-bold">
						{$t("description")} }
					</h1>
				</div>

@cibernox Any updates on this? Were you able to get a virtual machine to test this out?

@cibernox I was able to find a workaround to this, if I change index.js files inside the packages to index.cjs, it works. So this could be something related to Common JS module imports. Can you publish an update or rather a branch making that change so we can test, if it works, you can publish it. Screenshots below for all the steps that resolves this issue:

I’ll have to get a virtual machine because I have no clue why it would work on mac/linux but not on windows.