mockServiceWorker.js resource remains in a"pending" status when I open up the Network tab

Hi, I am using msw to mock fetch API request in my project, I check the network tab and the mockServiceWorker.js resource remains in a"pending" status, additionally, the response retrieves index.html instead of the JSON response I mock in the handlers file. Maybe I am incurring a silly error but I didn’t find some resource on the web that could help me, thanks in advance!

Environment

Name	Version
msw	0.28.2
browser	Chrome 90.0.4430.93
OS	Windows 10

Request handlers

I run "dev": "webpack serve --mode development", in CLI and these are my configurations

// index.tsx
...
if (process.env.NODE_ENV === 'development') require('./mocks/browser');

const rootElement = document.getElementById('app');

ReactDOM.render(<ThemeProvider><App /></ThemeProvider>, rootElement);

// ./mock/browser.ts
import { setupWorker } from 'msw';
import { handlers } from './handlers';

const worker = setupWorker(...handlers);

worker.start();

// handlers
import { rest } from 'msw';

const baseURL = 'http://localhost:8080';

const handlers = [
  rest.get(`${baseURL}/navlink-routes`, (_req, res, ctx) => res(
    ctx.status(200),
    ctx.json({
      result: [
        { label: 'Shop', path: 'shop' },
        { label: 'Wishlist', path: 'wishlist' },
        { label: 'Checkout', path: 'checkout' },
      ],
    }),
  )),
  rest.get('*', (req, res, ctx) => res(
    ctx.status(500),
    ctx.json({ error: `Please add request handler for ${req.url.toString()}` }),
  )),
];

export { handlers };

Actual request

// Example of making a request. Provide your code here.
async function getData(): Promise<void> {
      try {
        const response = await fetch('http://localhost:8080/navlink-routes', { signal });

        if (!response.ok) throw new Error(`Server error ${response.status}`);

        const { result } = await response.json();
        setLinkList(result);
      } catch (e) {
        if (e.name !== 'AbortError') setError(true);
      }
    }

Current behavior

Expected behavior

[kettanaito]

Glad it got resolved, @david2am!

[david2am]

@kettanaito I wasn’t set up a public directory properly I was using my dist directory which I created for production purposes calling:

webpack --mode production

Following your suggestion, I created a new public/ directory and call:

npx msw init public

That solves the issue, thanks for your help 👍