Always 404 / Not Intercepted on homepage set CRA

[chiahao]

Prerequisites

• I confirm my issue is not in the opened issues
• I confirm the Frequently Asked Questions didn't contain the answer to my issue

Environment check

• I'm using the latest msw version
• I'm using Node.js version 18 or higher

Browsers

Firefox, Safari

Reproduction repository

https://github.com/chiahao/mymswtestapp.git

Reproduction steps

Describe the bug

create-react-app with homepage setted causes MSW not to mock

Environment

react: "^18.3.1"
msw: "^2.4.4"
nodejs: 21.1.0

To Reproduce

1. npx create-react-app mytestapp
2. npm install msw@latest --save-dev
3. npx msw init public --save
4. mymswtestapp/src/mocks/browser.js

import { setupWorker } from "msw/browser";
import { handlers } from "./handler";

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

5. mymswtestapp/src/mocks/handler.js

import { http, HttpResponse } from 'msw';

export const handlers = [
	http.post("api/code/NAT/:code", () => {
		return HttpResponse.json({
			"data": [
				{"CODE": "11", "DESCR": "UNIT1"},
				{"CODE": "22", "DESCR": "UNIT2"}
			]
		});
	}),

]

6. mymswtestapp/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

async function enableMocking() {
	if (process.env.NODE_ENV !== 'development') {
		return;
	}

	const { worker } = await import("./mocks/browser");

	let workerService = worker.start();
	console.log(worker.listHandlers());
	return workerService;
}

enableMocking().then(() => {

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );
});

7. in firefox, send request
   https://localhost:3000/api/code/NAT/1 can be succefully intercepted.

8. Add "homepage": "myPage", to package.json.

9. Modify mytestapp/index.js:

async function enableMocking() {
	if (process.env.NODE_ENV !== 'development') {
		return;
	}

	const packageJson = await import("../package.json");
	const { worker } = await import("./mocks/browser");

	// `worker.start()` returns a Promise that resolves
	// once the Service Worker is up and ready to intercept requests.
	let workerService = worker.start({
	    serviceWorker: {
	    	// Provide a custom worker script URL, taking
	    	// the "homepage" into account.
	    	url: `${packageJson.homepage}/mockServiceWorker.js`,
	    },
	});
}

enableMocking().then(() => {

const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );
});

10. Now npm start still can start server, and show [MSW] Mocking enabled..
    But requests won't intercepted.

Current behavior

Firefox get this:
Cannot POST /myPage/api/code/NAT/1

Expected behavior

"data": [
{"CODE": "11", "DESCR": "UNIT1"},
{"CODE": "22", "DESCR": "UNIT2"}
]

[kettanaito]

Hi, @chiahao. Thanks for reporting this.

Can you please follow the Debugging runbook and let me know how far you got?

[chiahao]

Hi, @kettanaito . Thanks for so fast response.

Modified browser.js:

import { setupWorker } from "msw/browser";
import { handlers } from "./handler";

export const worker = setupWorker(...handlers);
worker.events.on('request:start', async ({ request }) => {
  // Read the request body as text for every request
  // that occurs in your application.
  const payload = await request.clone().text()
});

worker.events.on('request:start', ({ request }) => {
  console.log('Outgoing:', request.method, request.url)
});

Test the version where the homepage is not set. The request is intercepted and shown in the console:

But still, once homepage is set, the request is not intercepted:

[chiahao]

Hi, @kettanaito , does this test right?

[kettanaito]

Can you please await the worker.start() promise? That doesn't look right.

[chiahao]

Hi, @kettanaito ,

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

async function enableMocking() {
	if (process.env.NODE_ENV !== 'development') {
		return;
	}

	const packageJson = await import("../package.json");
	const { worker } = await import("./mocks/browser");

	// `worker.start()` returns a Promise that resolves
	// once the Service Worker is up and ready to intercept requests.
	await worker.start({
		serviceWorker: {
			// Provide a custom worker script URL, taking
			// the "homepage" into account.
			url: `${packageJson.homepage}/mockServiceWorker.js`,
		},
	});
	console.log(worker.listHandlers());
}

enableMocking().then(() => {
	const root = ReactDOM.createRoot(document.getElementById('root'));
	root.render(
		<React.StrictMode>
			<App />
		</React.StrictMode>
	);
});

still no luck with await.
But there is a warning:

Does this mean MSW not support custom project path?
Thanks for any helping.