svelte-i18n
svelte-i18n copied to clipboard
kaisermann
sveltejs/kit beta: "expected to be of type CommonJS, which does not support named exports" on production build
Describe the bug
When building the app for production (it loads completely fine when running npm run dev), the build fails as it apparently expects a CommonJS module.
Logs See stack trace below (unless I'm confused between the stacktrace and the log)
To Reproduce Check out the repo here: https://github.com/jakobbouchard/sveltekit-i18n-fail-example
N.B. It also has a broken npm run dev branch, which I explain later.
Expected behavior The build should not fail.
Stack trace
> Using @sveltejs/adapter-netlify
> The requested module 'svelte-i18n' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'svelte-i18n';
const {register, init: init$1, getLocaleFromNavigator} = pkg;
file:///home/jakob/Documents/Web/link-the-webpage/.svelte/output/server/app.js:8
import pkg, {register, init as init$1, getLocaleFromNavigator} from "svelte-i18n";
^^^^
SyntaxError: The requested module 'svelte-i18n' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'svelte-i18n';
const {register, init: init$1, getLocaleFromNavigator} = pkg;
at ModuleJob._instantiate (internal/modules/esm/module_job.js:97:21)
at async ModuleJob.run (internal/modules/esm/module_job.js:143:20)
at async Loader.import (internal/modules/esm/loader.js:182:24)
at async prerender (file:///home/jakob/Documents/Web/link-the-webpage/node_modules/@sveltejs/kit/dist/chunks/index5.js:511:14)
at async Builder.prerender (file:///home/jakob/Documents/Web/link-the-webpage/node_modules/@sveltejs/kit/dist/chunks/index5.js:743:4)
at async adapt (/home/jakob/Documents/Web/link-the-webpage/node_modules/@sveltejs/adapter-netlify/index.js:58:4)
at async adapt (file:///home/jakob/Documents/Web/link-the-webpage/node_modules/@sveltejs/kit/dist/chunks/index5.js:765:2)
at async file:///home/jakob/Documents/Web/link-the-webpage/node_modules/@sveltejs/kit/dist/cli.js:604:5
Information about your project:
-
Your browser and the version: Firefox 87.0
-
Your operating system: Ubuntu 20.04 on WSL 2
-
svelte-i18n3.3.9 -
SvelteKit using
adapter-netlify -
Vite
Additional context
Using the suggested solution, which is importing the default export and using const to then destructure it works if I add 'main' as a resolve.mainFields option in the Vite config. However, when using this solution, the dev server fails with this stacktrace. So basically, I'm stuck with a broken dev server if I want it to work in the production build.
Stack trace
(node:19722) ExperimentalWarning: The ESM module loader is experimental.
> Listening on http://localhost:3000
10:36:35 PM [vite] Error when evaluating SSR module /src/lib/i18n.svelte:
TypeError: Cannot read property 'register' of undefined
at i18n.svelte:6:25
at instantiateModule (/home/jakob/Documents/Web/link-the-webpage/node_modules/vite/dist/node/chunks/dep-66eb515d.js:69030:166)
(node:19722) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'register' of undefined
at i18n.svelte:6:25
at instantiateModule (/home/jakob/Documents/Web/link-the-webpage/node_modules/vite/dist/node/chunks/dep-66eb515d.js:69030:166)
(node:19722) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:19722) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Hey, @jakobbouchard 👋 Thanks for the repro project. I still need to check how to use the library with svelte-kit, but I didn't have the time to do it just yet. I had a similar error when I tried to use the firebase lib with svelte-kit and I remember working around it by explicitly importing the cjs version:
import { init } from 'svelte-i18n/dist/runtime.cjs.js'
Any insight/help here would be extremely helpful as I'm not able to look very deeply into this right now
I'll be sure to check if it works, but considering the fact that adding the main field (which has the cjs version) works, it'll probably work. I'll try that later today!
Little update, the results stay the same whether I explicitly import the cjs version or not.
However, after digging a little bit, it might have been caused by using an older Node version. Updating to 14.16.0 (or anything equal or beyond 14.13.0 for that matter) fixed the issue, since it now supports named exports for CommonJS modules!
Interestingly, almost everything works now, however, when deploying on Netlify (again, can't reproduce the issue locally whether on dev or build version), accessing any routes other than the root-level ones (e.g. anything that's in a subfolder, and interestingly the error page) throws this error:
{"errorType":"Error","errorMessage":"Cannot find package 'svelte-i18n' imported from /var/task/src/app.mjs","trace":["Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'svelte-i18n' imported from /var/task/src/app.mjs"," at packageResolve (internal/modules/esm/resolve.js:650:9)"," at moduleResolve (internal/modules/esm/resolve.js:691:18)"," at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:784:11)"," at Loader.resolve (internal/modules/esm/loader.js:100:40)"," at Loader.getModuleJob (internal/modules/esm/loader.js:246:28)"," at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:47:40)"," at link (internal/modules/esm/module_job.js:46:36)"]}
This seems to have been fixed at some point, either with a SvelteKit update or one from this package :)