Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot load the application if the browser doesn't have slash at the end of the URL #2047

Open
4 tasks done
nemonemi opened this issue Feb 20, 2024 · 0 comments
Open
4 tasks done
Labels
bug Something isn't working needs:triage Issues that have not been investigated yet. scope:browser Related to MSW running in a browser

Comments

@nemonemi
Copy link

nemonemi commented Feb 20, 2024

Prerequisites

Environment check

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

Browsers

Chromium (Chrome, Brave, etc.)

Reproduction repository

No repo

Reproduction steps

...

Current behavior

My application has a base path configured in the Vite config and the React router.

I've configured MSW to be loaded from the relative path.

export async function enableMocking() {
  const worker = setupWorker(...handlers);

  return await worker.start({
    serviceWorker: {
      url: 'mockServiceWorker.js',
    },
    onUnhandledRequest: 'bypass',
  });
}

The file gets loaded
image

But the screen doesn't, and it throws this in the console:
image

Error: [MSW] Failed to locate the Service Worker registration.

This most likely means that the worker script URL "mockServiceWorker.js" cannot resolve against the actual public hostname (localhost:4200). This may happen if your application runs behind a proxy, or has a dynamic hostname.

Please consider using a custom "serviceWorker.url" option to point to the actual worker script location, or a custom "findWorker" option to resolve the Service Worker registration manually. More details:  at startWorkerInstance ... etc.
  | startWorkerInstance | @ | msw_browser.js?v=3c07e0f6:1097
-- | -- | -- | --
  | Promise.then (async) |   |  
  | (anonymous) | @ | main.tsx:37
  | Show less

</span></div>

However, if I would to add the / at the end of the URL, then everything works as expected.

If I set the base path in the MSW config, then I get an infinite screen reload for the URL without the \, but works for the URLs with it.

worker.start({
    serviceWorker: {
      url: '/supplier-management/lifecycle/approved-suppliers/mockServiceWorker.js',
    },
    onUnhandledRequest: 'bypass',
  });

Why would the loading of the resource depend on the slash in the URL?

Expected behavior

The URL without the slash at the end should load normally with mockServiceWorker properly setup.

@nemonemi nemonemi added bug Something isn't working needs:triage Issues that have not been investigated yet. scope:browser Related to MSW running in a browser labels Feb 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working needs:triage Issues that have not been investigated yet. scope:browser Related to MSW running in a browser
Projects
None yet
Development

No branches or pull requests

1 participant