Svelte stores + web worker = global is not defined

[stefan-pdx]

Hello!

I'm trying to create a Svelte store in a Web Worker but am receiving this error:

Uncaught ReferenceError: global is not defined

This seems to occur in globals.ts. In spirit of #1491, can window be replaced with self since Web Workers don't have access to window?

[Conduitry]

Out of curiosity, are you using webpack? I don't think the stores actually depend on anything in globals.ts, and in Rollup I believe it gets treeshaken away.

[stefan-pdx]

I'm using Rollup and rollup-plugin-off-main-thread. I was hoping/expecting that globals would have gotten tree-shaken out, but for some reason that's not the case.

I'll poke around some more.

Thanks!

[stefan-pdx]

So, I came across this issue again when spinning up a similar project. You can check it out here.

In this project, I'm wanting to import a Svelte store in a Web Worker and load that Web Worker in a Svelte component. I'm using @surma's rollup-pugin-off-main-thread (OMT) to spin up that Web Worker (as a module, so that I can have access to imports in the Web Worker.) I'm also using Comlink to "expose" the Svelte store via an underlying Proxy object.

In order to re-create the issue, there's a small bug in OMT that I need to report -- specifically commenting out a line in node_modules/@surma/rollup-plugin-off-main-thread/index.js:

        if (!isEsmOutput) {
          // delete optionsObject.type;
        }

(This is due to how a config option is being parsed when Rollup is configured to output to an ES module.)

Once you make that change and spin up the app, I'm getting the original error reported:

Uncaught ReferenceError: global is not defined

which references the below code in index.mjs file in the Svelte store package:

const globals = (typeof window !== 'undefined' ? window : global);

Somehow globals are being sucked into the bundle. Changing global to self resolves the issue.

Do you have any insight why globals isn't being tree-shaken out?

Thank you!

[stefan-pdx]

It appears that the const globals = ... line is executed in svelte/internal/index.mjs when svelte/store/index.mjs performs the export:

export { get_store_value as get } from '../internal';

Can you confirm?

[stefan-pdx]

Here's the issue that documents the bug in rollup-plugin-off-main-thread: surma/rollup-plugin-off-main-thread#22

[PatrickG]

store/index.ts is importing stuff from internal/index.ts which itself imports internal/globals.ts
Maybe a rollup bug?

#3561 is somewhat related.

[stefan-pdx]

Hm, so I tried to recreate the original issue to confirm the fix from #4628, but I'm no longer seeing globals being pulled into the build via Rollup. There may have been something fishy with my Rollup config earlier. Sorry for the noise!

[Conduitry]

In any case, in 3.21.0, we are now trying globalThis before trying global.

[jostermanAtPEW]

Having a similar issue. I'm using a web worker that imports from a module that imports from svelte/store. This is all via webpack and worker-loader, and it throws a global is undefined error in IE11 (yeah, I know), which doesn't support globalThis. I've tried a globalThis polyfill but with no luck, and it's possible that better tree shaking would prevent the code from being instantiated to begin with, but what it's worth the solution I'm working with now is to add self (web worker global space) to the possible values of globals:

const globals = (typeof window !== 'undefined'
    ? window
    : typeof globalThis !== 'undefined'
        ? globalThis
        : typeof global !== 'undefined'
            ? global
            : self);