'setTimeout' is not exported by __vite-browser-external, imported by node_modules/msw/lib/node/index.mjs

[awacode21]

Updating to latest MSW Version is causing my application build to break. I am getting this error message:

Any idea? i really appreciate help on this.

[mattcosta7]

are you importing the node package in a browser build with vite?

If you could share some sample repo, it might be helpful to diagnose, as well as versions of node, msw, vite.

first guess I'd wonder if that build needs to polyfill node builtins with something like - https://github.com/FredKSchott/rollup-plugin-polyfill-node#readme

[awacode21]

yes i am as i have a vite/vue application with Server Side Rendering and i need the Mock Service worker for server side as well as for client side.
I'll try to implement a stripped down example on stackblitz

[awacode21]

@mattcosta7

https://stackblitz.com/edit/vite-vue3-ssr-msw

i have a problem with this reproduction as when running dev it is not finding mockServiceWorker.js in public folder even if it is there. I don't have this prob on my clients project.

But nevertheless when you run npm run build you will run into the error of this discussion.

[awacode21]

i tried the polyfill package you mentioned but it seems it does not solve the problem, or i am doing it wrong.

[yashsway]

I tried the polyfill package and it didn't work either :(

[rjaguilar]

Having the same issue.

[brianmontanamvmnt]

Same here RJ 👋 Thinking there might be a transpile issue in MSW into Playwright 🤔

I did the silly thing and just installed timers into my repo and it ran fine 😭

[piotrnajda3000]

Having the same issue with build, npx vite preview also returns this:

After uninstalling MSW it works.

[LaiJunBin]

I also have the same issue with today, but I use SvelteKit (SSR for Svelte).

I try to solve this problem:

Create a file. (e.g. src/polyfills/timers.js)

const { 
    setTimeout,
    clearTimeout,
    setInterval,
    clearInterval,
    setImmediate,
    clearImmediate 
} = await import('timers');
 
export { 
    setTimeout, 
    clearTimeout, 
    setInterval, 
    clearInterval, 
    setImmediate, 
    clearImmediate 
};

Add resolve.alias to vite.config.

import { fileURLToPath, URL } from 'node:url';
// skip

export default defineConfig({
  // skip
  resolve: {
    // skip
    alias: {
      // skip
      timers: fileURLToPath(new URL('./src', import.meta.url) + '/polyfills/timers.js')
    }
  }
})

it works.

But I don't know why the following code doesn't work in timers.js 😥

export * from 'timer';

So I hardcode first to fix it.

[phillt]

Did this ever get fixed? I'm getting the same error, but what is strange is that one workspace works but the other doesn't.

[phillt]

For those of you coming to this and still having the same issue, turns out there is some polyfill issues that I resolved doing this:
https://medium.com/@ftaioli/using-node-js-builtin-modules-with-vite-6194737c2cd2

TLDR;

Installing rollup-plugin-polyfill-node and adding timers to the alias and adding the rollupNodePolyFill() to the build plugins array fixed it for me.

I'm guessing that it works on my other workspace because I'm not export MSW as part of my build, but rather I'm using it as a dev tool.

import { defineConfig } from "vite";
import dts from "vite-plugin-dts";
import rollupNodePolyFill from "rollup-plugin-polyfill-node";

export default defineConfig({
    resolve: {
        alias: {
            timers: "rollup-plugin-node-polyfills/polyfills/timers",
        },
    },
    build: {
        ...
        plugins: [
            rollupNodePolyFill(),
           ...
        ],
    },
    ...
});