wispy-yellow

How to integrate msw?

Hey

I am trying to add msw to my Tanstack Start project. However, I am running into issues and therefore need your help.

1. First try, using browser integration:
msw.ts:

import type { RequestHandler } from 'msw';
import { setupWorker } from 'msw/browser';

const handlers: RequestHandler[] = []; // Empty for now

export const worker = setupWorker(...handlers);

import type { RequestHandler } from 'msw';
import { setupWorker } from 'msw/browser';

const handlers: RequestHandler[] = []; // Empty for now

export const worker = setupWorker(...handlers);

__root.tsx:

// Imports
await worker.start({ onUnhandledRequest: 'bypass' });
// All the rest

// Imports
await worker.start({ onUnhandledRequest: 'bypass' });
// All the rest

Error:

Invariant Violation: [MSW] Failed to execute
setupWorker
setupWorker
in a non-browser environment. Consider using
setupServer
setupServer
for Node.js environment instead.

2. Second try, using Node.js integration:
msw.ts:

import type { RequestHandler } from 'msw';
import { setupServer } from 'msw/node';

const handlers: RequestHandler[] = []; // Empty for now

export const server = setupServer(...handlers);

import type { RequestHandler } from 'msw';
import { setupServer } from 'msw/node';

const handlers: RequestHandler[] = []; // Empty for now

export const server = setupServer(...handlers);

__root.tsx:

// Imports
server.listen({ onUnhandledRequest: 'bypass' });
// All the rest

// Imports
server.listen({ onUnhandledRequest: 'bypass' });
// All the rest

Error:

No known conditions for

"./ClientRequest"

"./ClientRequest"

specifier in

"@mswjs/interceptors"

"@mswjs/interceptors"

package

[plugin vite:dep-pre-bundle]

[plugin vite:dep-pre-bundle]

So... I am pretty new to Start. And I am not sure where to put it except in __root.tsx - what might be the wrong place. Any advice? Thanks an advance

TanStack•3w ago

wispy-yellow

How to integrate msw?

Hey

I am trying to add msw to my Tanstack Start project. However, I am running into issues and therefore need your help.

1. First try, using browser integration:
msw.ts:

import type { RequestHandler } from 'msw';
import { setupWorker } from 'msw/browser';

const handlers: RequestHandler[] = []; // Empty for now

export const worker = setupWorker(...handlers);

import type { RequestHandler } from 'msw';
import { setupWorker } from 'msw/browser';

const handlers: RequestHandler[] = []; // Empty for now

export const worker = setupWorker(...handlers);

__root.tsx:

// Imports
await worker.start({ onUnhandledRequest: 'bypass' });
// All the rest

// Imports
await worker.start({ onUnhandledRequest: 'bypass' });
// All the rest

Error:

Invariant Violation: [MSW] Failed to execute
setupWorker
setupWorker
in a non-browser environment. Consider using
setupServer
setupServer
for Node.js environment instead.

2. Second try, using Node.js integration:
msw.ts:

import type { RequestHandler } from 'msw';
import { setupServer } from 'msw/node';

const handlers: RequestHandler[] = []; // Empty for now

export const server = setupServer(...handlers);

import type { RequestHandler } from 'msw';
import { setupServer } from 'msw/node';

const handlers: RequestHandler[] = []; // Empty for now

export const server = setupServer(...handlers);

__root.tsx:

// Imports
server.listen({ onUnhandledRequest: 'bypass' });
// All the rest

// Imports
server.listen({ onUnhandledRequest: 'bypass' });
// All the rest

Error:

No known conditions for

"./ClientRequest"

"./ClientRequest"

specifier in

"@mswjs/interceptors"

"@mswjs/interceptors"

package

[plugin vite:dep-pre-bundle]

[plugin vite:dep-pre-bundle]

So... I am pretty new to Start. And I am not sure where to put it except in __root.tsx - what might be the wrong place. Any advice? Thanks an advance

How to integrate msw?

Similar Threads

How to integrate msw?

Similar Threads

Similar Threads

Similar Threads