Ресурс msw mockServiceWorker.js остается в «ожидающем» статусе, когда я открываю вкладку сети в моем браузере.

Question

Я использую msw для имитации запроса API извлечения в моем проекте, я проверяю вкладку сети, и ресурс mockServiceWorker.js остается в статусе «ожидающий», кроме того, ответ извлекает index.html вместо ответа JSON, который я имитирую в обработчиках файл. Может быть, я совершаю глупую ошибку, но я не нашел в Интернете какого-либо ресурса, который мог бы мне помочь, заранее спасибо!

Среда

Обработчики запросов

я бегу "dev": "webpack serve --mode development", в CLI и это мои конфигурации

      // 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 };

Актуальный запрос

      // 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);
      }
    }

Answer 1

Благодаря @kettanaito я понимаю, что я неправильно настроил общедоступный каталог, я использовал свой каталог dist, который я создал для производственных целей, вызывая:

webpack --mode production

Следуя предложению, я создал новый каталог public / и позвонил:

npx msw init public

Это решает проблему 👍