MSW does not seem to work when basePath is set in Next.js

[dankremniov]

1. Clone this example
2. Add next.config.js with the following contents:

module.exports = {
    basePath: '/base'
}

3. Specify url for worker.start command in mocks/index.js:

worker.start({
      serviceWorker: {
          url: '/base/mockServiceWorker.js'
      }
  })

As a result, the mocking is enabled but MSW can't intercept requests anymore. I am just wondering what is the best practise to make MSW work in such case?

[kettanaito]

Hey, @dankremniov.

What happens is that you register the MSW worker at the /base path. This means that MSW is able to intercept only those requests that are issued by pages under /base: i.e. if you make any HTTP request on a /base/contact-us page. You won't be able to mock requests coming from the root / of your app because it's higher than the worker's scope.

Can you please confirm that's the case?

1. What is the page URL you open in your browser?

[kettanaito]

I advise following this answer to get MSW working with the base path in NextJS.