SvelteKit: 'SyntaxError: Cannot use import statement outside a module'

[RobinBomkamp]

Hey there,

we are having an issue with the version 1.1.3 of this package and a SvelteKit application.

Works with previous version:

Yes, it used to work with the version 0.2.8.

Steps to reproduce:

1. Create an host with npm create svelte@latest mf
2. Create a 'Button'-component. Button.svelte: <button>Test</button>
3. npm add @module-federation/vite --save-dev
4. Add module federation config plugin like below

   export default defineConfig({
   plugins: [
       sveltekit(),
       federation({ 
               name: "remote",
               filename: "remoteEntry.js",
               exposes: {
                   "./remote-app": "./src/lib/Button.svelte",
               },
           }),
   ]
   });

5. Run npm run build

Error:

Now we are experiencing the following error.

> test@0.0.1 build
> vite build

vite v5.4.9 building SSR bundle for production...
✓ 95 modules transformed.
vite v5.4.9 building for production...
node_modules/@module-federation/sdk/dist/index.cjs.js (636:77): Use of eval in "node_modules/@module-federation/sdk/dist/index.cjs.js" is strongly discouraged as it poses security risks and may cause issues with minification.
✓ 84 modules transformed.
.svelte-kit/output/client/_app/version.json                                  0.03 kB │ gzip:  0.05 kB
.svelte-kit/output/client/.vite/manifest.json                                3.62 kB │ gzip:  0.66 kB
.svelte-kit/output/client/_app/immutable/chunks/hostInit.DIJ0Opoq.js         0.05 kB │ gzip:  0.07 kB
.svelte-kit/output/client/_app/immutable/entry/start.DXYuzCOz.js             0.14 kB │ gzip:  0.12 kB
.svelte-kit/output/client/_app/immutable/chunks/Button.BfsWK_OT.js           0.41 kB │ gzip:  0.31 kB
.svelte-kit/output/client/_app/immutable/chunks/virtualExposes.7lQyljI4.js   0.45 kB │ gzip:  0.33 kB
.svelte-kit/output/client/_app/immutable/nodes/0.V07vbrzA.js                 0.60 kB │ gzip:  0.39 kB
.svelte-kit/output/client/_app/immutable/nodes/2.DYBzjjm4.js                 0.69 kB │ gzip:  0.45 kB
.svelte-kit/output/client/_app/immutable/nodes/1.BWVLcEKo.js                 1.02 kB │ gzip:  0.60 kB
.svelte-kit/output/client/_app/immutable/chunks/preload-helper.C1FmrZbK.js   1.14 kB │ gzip:  0.68 kB
.svelte-kit/output/client/_app/immutable/chunks/scheduler.BvLojk_z.js        2.16 kB │ gzip:  1.02 kB
.svelte-kit/output/client/_app/immutable/entry/app.B2gDDm4Z.js               5.02 kB │ gzip:  1.93 kB
.svelte-kit/output/client/_app/immutable/chunks/index.DFTQtrJW.js            5.43 kB │ gzip:  2.30 kB
.svelte-kit/output/client/_app/immutable/chunks/client.CKQRfb6L.js          28.64 kB │ gzip: 11.30 kB
.svelte-kit/output/client/remoteEntry.js                                    66.34 kB │ gzip: 19.36 kB
✓ built in 845ms
(node:48812) 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)

node:internal/event_target:1094
  process.nextTick(() => { throw err; });
                           ^
C:\Users\rbom\Desktop\Test\svelte-test\test\node_modules\@module-federation\sdk\dist\index.esm.js:1
import { _ as _extends } from './polyfills.esm.js';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (node:internal/modules/cjs/loader:1378:20)
    at Module._compile (node:internal/modules/cjs/loader:1428:41)
    at Object..js (node:internal/modules/cjs/loader:1548:10)
    at Module.load (node:internal/modules/cjs/loader:1288:32)
    at Function._load (node:internal/modules/cjs/loader:1104:12)
    at cjsLoader (node:internal/modules/esm/translators:346:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:286:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)
    at async prerender (file:///C:/Users/rbom/Desktop/Test/svelte-test/test/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:42:21)
Emitted 'error' event on Worker instance at:
    at [kOnErrorMessage] (node:internal/worker:326:10)
    at [kOnMessage] (node:internal/worker:337:37)
    at MessagePort.<anonymous> (node:internal/worker:232:57)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:820:20)
    at MessagePort.<anonymous> (node:internal/per_context/messageport:23:28)

Node.js v20.18.0

Addition:

Even changing the module federation config to following produces the error:

export default defineConfig({
    plugins: [
        sveltekit(),
        federation({ 
                 name: "remote",
            }),
    ]
});

Our guess

It has something to do with SSR.

[bastianschaffeld]

I'm encountering the same issue with my SvelteKit project. It looks like it tries to use require server side which fails because it's not a browser environment

[gioboa]

@RobinBomkamp can you share a repo with a basic example to reproduce the issue please?

---

I saw the steps, thanks

[RobinBomkamp]

I have build a simple Stackblitz example: https://stackblitz.com/edit/vitejs-vite-wpl99h?file=vite.config.ts&terminal=dev

You have to quit the dev build in the terminal and execute npm start.

[gioboa]

Thanks @RobinBomkamp I'm glad you have a fallback with v0.2.8, I'll check how to fix the new version in these days.

[Thiedze]

I run into the same error.

[gioboa]

@Thiedze are you using SvelteKit too?

[Thiedze]

Yes @gioboa