Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ESM build does not work in the browser ("debug")

See original GitHub issue

Describe the bug

The es module build ships bare module imports, which can be resolved using a dev server or other tool. But when using the es module build in the browser it fails because it’s importing the “debug” module which is actually a commonjs module.

Environment

msw: 0.35.0
nodejs: 16.4.0
npm: 7.18.0

Please also provide your browser version.

To Reproduce

Steps to reproduce the behavior:

Create a simple HTML page that imports MSW:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <script type="module">
      import * as mswjs from 'msw';
      console.log(mswjs);
    </script>
  </body>
</html>

Use a dev server that resolved bare imports, for example @web/dev-server: npx web-dev-server --node-resolve --open
Visit the HTML page
See this error: Uncaught SyntaxError: The requested module './../../../debug/src/index.js' does not provide an export named 'default'

Expected behavior

MSW imports a browser compatible module.

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:13 (7 by maintainers)

Top GitHub Comments

3reactions

LarsDenBakkercommented, Sep 21, 2021

Since debug is only a small module, I recommend bundling it into the esm build of MSW. Or to create a separate output with all dependencies bundled.

1reaction

LarsDenBakkercommented, Sep 16, 2021

@patrickmcdougle-okta @kettanaito unfortunately that’s not the case. Even if debug is there in the node_modules, the module itself doesn’t work in the browser because it uses commonjs syntax not es module. So adding it as a dependency won’t solve it.