Correct typing for index file

[SalahAdDin]

Scope

Improves an existing behavior

Compatibility

• This is a breaking change

Feature description

After following a lot of tutorials, I understood I need a index file for the mocks folder when I want to user it also for SSR (NextJS).

So, I got this code trying to fix almost every error Typescript gave me:

import { SetupWorkerApi } from 'msw';
import { SetupServerApi } from 'msw/node';

if (typeof window !== 'undefined') {
  const worker = require('./browser') as SetupWorkerApi;
  worker
    .start()
    .then()
    .catch((error) => console.error('Error serving MSW worker: ', error));
} else {
  const server = require('./server') as SetupServerApi;
  server.listen();
}

Even with it, I still have an error: Unexpected require().
It is also giving the following problem:
TypeError: server.listen is not a function

   5 |   if (typeof window === 'undefined') {
   6 |     const server = await import('./server');
>  7 |     server.listen();
     |           ^
   8 |   } else {
   9 |     const worker = await import('./browser');
  10 |     worker.start();

Looking for fixing that bug I tried the next:

Uncaught (in promise) TypeError: worker.start is not a function
    _callee$ index.ts:10
    Babel 10
    initMocks index.ts:4
    <anonymous> index.ts:14
    NextJS 4
    <anonymous> _app.tsx:12
    NextJS 4
    <anonymous> (index):5
    onEntrypoint route-loader.js:235
    promise callback*onEntrypoint route-loader.js:235
    register index.js:268
    <anonymous> (index):2
    NextJS 9
[index.ts:10:11](webpack://_N_E/server/index.ts?4376)
    asyncGeneratorStep index.ts:9
    _next index.ts:24
    (Async: promise callback)
    asyncGeneratorStep index.ts:15
    _next index.ts:24
    _asyncToGenerator index.ts:29
    _asyncToGenerator index.ts:21
    _initMocks index.ts:4
    initMocks index.ts:4
    <anonymous> index.ts:14
    NextJS 4
    <anonymous> _app.tsx:12
    NextJS 4
    <anonymous> (index):5
    onEntrypoint route-loader.js:235
    (Async: promise callback)
    onEntrypoint route-loader.js:235
    register index.js:268
    <anonymous> (index):2
    NextJS 8
    webpackJsonpCallback self-hosted:1168
    <anonymous> NextJS

And:

Finally, to solve them I opted for declaring them inside of the function:

import { setupWorker } from 'msw';
import { setupServer } from 'msw/node';

import handlers from './handlers';

if (typeof window === 'undefined') {
  const server = setupServer(...handlers);
  server.listen();
} else {
  const worker = setupWorker(...handlers);
  worker
    .start()
    .catch((error) => console.error('Error serving MSW worker: ', error));
}

Fixing any possible problem, but never used on the existing tutorials(for instance), cause they don't implement typescript.

How should we implement it then?

Thank you

[kettanaito]

Hey, @SalahAdDin.

This library is written in TypeScript and ships with type definitions. I think there may be something wrong with the ./server.ts and ./worker.ts in your side. Could you please include a reproduction repository where I can see that TypeScript error for myself?

[SalahAdDin]

@kettanaito Did you check it with the tutorial i referenced here?

[kettanaito]

Do you mean the Next.js example? That's hard to check against as it's not written in TypeScript. That's where I need to see your TS config to see what's wrong.

[SalahAdDin]

Yeah, you are right.

Cool, you can get a demo here.

Thanks.