esm module throws error when running as a preview after successful build with @sveltejs/kit

[bhvngt]

• Framework7 version: [e.g. 3.0.0] 6.1.0-beta.6
• Svelte version: [e.g. 3.0.0] sveltejs/kit @sveltejs/kit 1.0.0-next.136
• Platform and Target: [e.g. iOS 11 Cordova app, or Android 8 Chrome browser] chrome
• Live Link or JSFiddle/CodeSandbox: PREFERABLY (IF YOU WANT YOUR ISSUE TO BE RESOLVED ASAP).

codesandbox

Describe the bug

To Reproduce

Steps to reproduce the behavior:

1. svelte-kit dev - works without any issue
2. svelte-kit build - it is successful
3. svelte-kit preview
   Throws following error

> Directory import '/sandbox/node_modules/framework7/lite' is not supported resolving ES modules imported from /sandbox/.svelte-kit/output/server/app.js
Did you mean to import framework7/cjs/framework7-lite.js?
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/sandbox/node_modules/framework7/lite' is not supported resolving ES modules imported from /sandbox/.svelte-kit/output/server/app.js
Did you mean to import framework7/cjs/framework7-lite.js?
    at finalizeResolution (internal/modules/esm/resolve.js:272:17)
    at moduleResolve (internal/modules/esm/resolve.js:699:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:810:11)
    at Loader.resolve (internal/modules/esm/loader.js:86:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:230:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:56:40)
    at link (internal/modules/esm/module_job.js:55:36)
sandbox@sse-sandbox-14mno:/sandbox$

Expected behavior

it should run the framework on preview mode

Actual Behavior

Throws an error since esm module don't support importing directory

Additional context

I tried adding conditional exports inside framework7/package.json. But it throws following error

 Cannot use import statement outside a module
node_modules/.pnpm/framework7@6.1.0-beta.6/node_modules/framework7/esm/framework7-lite.js:13
import $ from './shared/dom7.js';

I am not too well versed with esm packaging, so could not make much progress here.

[nolimits4web]

And if you serve it on the proper server it works fine?

[bhvngt]

I tried packaging it with adapter-node which packages the svelte app as a serviceable node app and it breaks with the same error message during the time it is preparing the server script. Here's the error message

vite v2.4.3 building for production...
transforming (183) ../../common/temp/node_modules/.pnpm/swiper@6.8.0/node_modules/swiper/esm/svelte/swiper-slide.js
warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
✓ 287 modules transformed.
.svelte-kit/output/client/_app/manifest.json                               1.24kb
.svelte-kit/output/client/_app/pages/__layout.svelte-54dc87ea.js           0.52kb / brotli: 0.31kb
.svelte-kit/output/client/_app/error.svelte-e49b299c.js                    1.56kb / brotli: 0.64kb
.svelte-kit/output/client/_app/assets/start-0826e215.css                   0.18kb / brotli: 0.11kb
.svelte-kit/output/client/_app/pages/index.svelte-09747632.js              2.63kb / brotli: 0.73kb
.svelte-kit/output/client/_app/start-aa7c4d4f.js                           17.37kb / brotli: 5.55kb
.svelte-kit/output/client/_app/assets/pages/__layout.svelte-d4fe23c8.css   176.01kb / brotli: 20.77kb
.svelte-kit/output/client/_app/chunks/vendor-d0253abd.js                   237.59kb / brotli: 56.47kb
vite v2.4.3 building SSR bundle for production...
✓ 237 modules transformed.
.svelte-kit/output/server/app.js   290.40kb

Run npm run preview to preview your production build locally.

> Using @sveltejs/adapter-node
> Directory import '/web/node_modules/framework7/lite' is not supported resolving ES modules imported from /Volumes/DATA/Bhavin/Projects/lab/innerview/apps/web/.svelte-kit/output/server/app.js
Did you mean to import framework7@6.1.0-beta.6/node_modules/framework7/cjs/framework7-lite.js?
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import 'node_modules/framework7/lite' is not supported resolving ES modules imported from /web/.svelte-kit/output/server/app.js
Did you mean to import framework7@6.1.0-beta.6/node_modules/framework7/cjs/framework7-lite.js?
    at new NodeError (node:internal/errors:370:5)
    at finalizeResolution (node:internal/modules/esm/resolve:317:17)
    at moduleResolve (node:internal/modules/esm/resolve:756:10)
    at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:867: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:76:40)
    at link (node:internal/modules/esm/module_job:75:36)

if I add type: "module" to framework7's package.json then both build and preview starts and then throws following error when the first request comes

❯ node build/index.js                                                                                                                                                                                                           22:20:30
Listening on 0.0.0.0:3000
ReferenceError: arguments is not defined
    at file:///web/build/index.js:13624:27
    at Object.$$render (file:///web/build/index.js:1417:19)
    at Object.default (file:///web/build/index.js:14131:42)
    at Object.default (file:///web/build/index.js:13978:38)
    at file:///web/build/index.js:13786:34
    at Object.$$render (file:///web/build/index.js:1417:19)
    at file:///web/build/index.js:13955:70
    at Object.$$render (file:///web/build/index.js:1417:19)
    at Object.default (file:///web/build/index.js:14129:37)
    at file:///web/build/index.js:13076:115

So the error comes from the server side script that is trying to use this components for ssr

[nolimits4web]

I suggest Svelte Kit is not supported then, I recommend you to use Framework7-CLI instead

[bhvngt]

the error comes from the server side script that is trying to use this components for ssr

ohhh.. do you plan to support it as part of your roadmap? As I plan to use svelte kit for the purpose of my app.

[bhvngt]

Is It a ESM packaging related issue!!!

[nolimits4web]

Supporting Svelte Kit is not in near future on a roadmap, it has some super weird mess with a way how it loads modules (which I encountered with my other libraries)

[bhvngt]

hmm.. Thanks for your reply.

[bhvngt]

I tried to fiddle around a bit as I really liked this (framework7) library. It starts working once type is set as module in package.json of framework7. Similar issue was reported for rxjs and from the discussion it appears to be a nodejs esm packaging gotcha. They had to fix it with their package.json to make their library esm compatible.

After the server starts running, it throws arguments reference error because of arguments object referenced inside the navbar svelte component to query slots passed. arguments works on the browser but they fall apart during ssr since components are created as arrow functions. I also discovered that since v3.25 svelte exposes $$slots variable to query slots.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed due to inactivity. If this issue is still actual, please, create the new one.