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

LarsDenBakker · 2021-09-13T12:04:16Z

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.

The text was updated successfully, but these errors were encountered:

kettanaito · 2021-09-13T12:24:34Z

Hey, @LarsDenBakker. Thanks for reporting this.

This issue may be related to #851, as MSW doesn't rely on the debug package directly, it's a dependency of another module called @mswjs/interceptors. We may be able to solve this by fixing the build process of interceptors and not bundling the debug module so that it's evaluated in the browser as intended. On the other hand, I have no guarantee that the debug module has an ES-compatible build target—that needs to be tested.

LarsDenBakker · 2021-09-14T07:01:37Z

It's not really the same issue. The debug module can never run in the browser because it's using commonjs syntax, it needs to be transformed before being browser compatible. Even the intended code you're linking is not browser compatible. Tools like webpack or jest do this automagically for you, but that is not the case for many other tools or when using no tools at all.

One solution is for @mswjs/interceptors to not use the debug module, or use a browser compatible variant.

Another is to bundle debug into the esm build, rollup can make it browser compatible.

kettanaito · 2021-09-14T12:03:44Z

Tools like webpack or jest do this automagically for you

That sounds great. I've never heard of compilers transforming non-ES modules into ES.

One solution is for @mswjs/interceptors to not use the debug module, or use a browser compatible variant.

Not to use debug is not an option. debug can also run in the browser perfectly fine, having a designated browser bundle. I believe what you're referring to as "compatibility" is that it's not written as an ESM, apparently.

patrickmcdougle-okta · 2021-09-15T23:50:43Z

I think the problem is that debug is externalized in the esm build and therefore is not bundled into the rolled-up version of the library. Since we don't declare it as a dependency, it's not guaranteed to be in a consumers node_modules. Therefore, we need to have one or the other. Either 1.) Stop externalizing it in the esm build, OR 2.) Declare it as a dependency or peerDependency. (IMO dependency is more appropriate in this case)

See also #851

kettanaito · 2021-09-16T09:37:50Z

Let’s discuss the debug issue in the respected GitHub ticket. Thanks for the feedback, I think you’re right in saying we need to specify debug as a dependency.

LarsDenBakker · 2021-09-16T11:29:22Z

@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.

kettanaito · 2021-09-16T12:16:08Z

To clarify, when speaking "doesn't work in the browser" you're referring to using ES in a browser (via <script type="module">). debug itself has a browser build which, I think, is UMD, that functions fine in the browser.

LarsDenBakker · 2021-09-16T13:04:39Z

Yep trying to use it using the module loader of the browser.

patrickmcdougle-okta · 2021-09-16T16:32:34Z

When it's pulled in as a dependency instead of rolled up, I think the index file with the dynamic require will be preserved (vs treeshaken / collapsed) and this won't be an issue. Rollup is forcing the node version to be rolled up into it.

Edit: I think I'm wrong...however debug doesn't even bundle an esm version in the package (and probably never will), so thats probably not going to work.

LarsDenBakker · 2021-09-21T16:38:10Z

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.

thepassle · 2022-03-16T13:32:40Z

Currently running into this issue too. Running the following code:

<html>
  <body>
    <script type="module">
      import {rest} from 'msw';
      console.log(rest);
    </script>
  </body>
</html>

And run it with:

npx @web/dev-server --node-resolve --open

Results in:

Uncaught SyntaxError: The requested module './../../../@mswjs/interceptors/lib/utils/getCleanUrl.js' does not provide an export named 'getCleanUrl'

Because indeed getCleanUrl.js is commonjs:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getCleanUrl = void 0;
/**
 * Removes query parameters and hashes from a given URL.
 */
function getCleanUrl(url, isAbsolute) {
    if (isAbsolute === void 0) { isAbsolute = true; }
    return [isAbsolute && url.origin, url.pathname].filter(Boolean).join('');
}
exports.getCleanUrl = getCleanUrl;
//# sourceMappingURL=getCleanUrl.js.map

It would be great to find a solution for this 🙂 I'd love to start using msw. Given some discussion/pointers, id probably be able to spend some time to contribute towards a solution for this issue. For example, would it be possible to ship both esm/cjs for the @mswjs/interceptors and @mswjs/cookies packages, and adding an exports map? e.g.: https://www.sensedeep.com/blog/posts/2021/how-to-create-single-source-npm-module.html

thepassle · 2022-03-17T18:11:23Z

In case anybody else wants to use msw as a pure ESM package, I've published a bundled ESM version under @bundled-es-mobules/msw, until the upstream package finds an ESM-friendly way forward 🙂

<html>
  <body>
    <script type="module">
      import {rest} from '@bundled-es-modules/msw';
      console.log(rest);
    </script>
  </body>
</html>

kettanaito · 2022-05-20T17:26:37Z

I'm improving the build modules in #1247, which may affect this in a good way. It's true that @mswjs/interceptors is not distributed as an ESM, so there may be issues simply because of that. I'm planning on adding a proper build pipeline to that dependency as well (hopefully, to all ecosystem dependencies) as soon as I have time.

sashafirsov · 2023-03-13T06:12:58Z

The work around is to substitute msw by import maps with re-export of IIFE distribution. Working example

CC @thepassle

mfrieling · 2023-06-26T19:58:22Z

I have the same issue with an NX monorepo with Angular. I followed this tutorial to setup msw. But I get warnings for a lot more packages than listed here:

@mswjs/cookies
@mswjs/interceptors
@mswjs/interceptors/lib/interceptors/XMLHttpRequest
@mswjs/interceptors/lib/interceptors/fetch
@mswjs/interceptors/lib/utils/bufferUtils.js
@mswjs/interceptors/lib/utils/getCleanUrl.js
@open-draft/until
cookie
headers-polyfill
is-node-process
js-levenshtein
node-fetch
outvariant
strict-event-emitter

The last warning is a bit strange:

WARNING undefined depends on 'msw'. CommonJS or AMD dependencies can cause optimization bailouts.

Versions

Node: 18.16.0
Yarn: 3.6.0
Angular CLI: 16.0.6
NX CLI: 16.3.2
MSW: 1.2.2
OS: Ubuntu 22 (WSL 2)

kettanaito · 2023-11-07T09:23:04Z

I can confirm that MSW 2.0 works correctly in the browser. Please test this and let me know.

mfrieling · 2023-11-07T12:26:07Z

@kettanaito what about MSW 1.2? Since there are a lot of breaking changes for many developers/projects it might not be possible to upgrade soon.

kettanaito · 2023-11-07T14:07:36Z

@mfrieling, I understand that. That's why I spent a lot of time writing the Migration guidelines, which also include common problems and how to address them at the bottom. I strongly encourage everybody to upgrade, as many people have already done.

There will be no new features and even bug fixes to 1.x. Exception being critical vulnerabilities but I highly doubt those will happen (1.x is the direct continuation of 0.x and we haven't got any critical issues in years).

LarsDenBakker added the bug Something isn't working label Sep 13, 2021

LarsDenBakker changed the title ~~Es module build is not a real es module~~ Es module build does not work in the browser Sep 13, 2021

kettanaito added the potentially solved label Sep 13, 2021

patrickmcdougle-okta mentioned this issue Sep 13, 2021

Externalize @mswjs/* packages in certain builds #913

Merged

kettanaito added the needs:discussion label Sep 14, 2021

kettanaito closed this as completed in #913 Sep 16, 2021

kettanaito reopened this Sep 16, 2021

kettanaito changed the title ~~Es module build does not work in the browser~~ ESM build does not work in the browser ("debug") Dec 6, 2021

kettanaito added help wanted Extra attention is needed and removed potentially solved labels Dec 6, 2021

kettanaito mentioned this issue May 31, 2022

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted #1252

Closed

4 tasks

kettanaito closed this as completed Nov 7, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

LarsDenBakker commented Sep 13, 2021

kettanaito commented Sep 13, 2021

LarsDenBakker commented Sep 14, 2021 •

edited

kettanaito commented Sep 14, 2021

patrickmcdougle-okta commented Sep 15, 2021 •

edited

kettanaito commented Sep 16, 2021

LarsDenBakker commented Sep 16, 2021 •

edited

kettanaito commented Sep 16, 2021

LarsDenBakker commented Sep 16, 2021

patrickmcdougle-okta commented Sep 16, 2021 •

edited

LarsDenBakker commented Sep 21, 2021

thepassle commented Mar 16, 2022 •

edited

thepassle commented Mar 17, 2022

kettanaito commented May 20, 2022

sashafirsov commented Mar 13, 2023 •

edited

mfrieling commented Jun 26, 2023

kettanaito commented Nov 7, 2023

mfrieling commented Nov 7, 2023

kettanaito commented Nov 7, 2023

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

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

Comments

LarsDenBakker commented Sep 13, 2021

Describe the bug

Environment

To Reproduce

Expected behavior

kettanaito commented Sep 13, 2021

LarsDenBakker commented Sep 14, 2021 • edited

kettanaito commented Sep 14, 2021

patrickmcdougle-okta commented Sep 15, 2021 • edited

kettanaito commented Sep 16, 2021

LarsDenBakker commented Sep 16, 2021 • edited

kettanaito commented Sep 16, 2021

LarsDenBakker commented Sep 16, 2021

patrickmcdougle-okta commented Sep 16, 2021 • edited

LarsDenBakker commented Sep 21, 2021

thepassle commented Mar 16, 2022 • edited

thepassle commented Mar 17, 2022

kettanaito commented May 20, 2022

sashafirsov commented Mar 13, 2023 • edited

mfrieling commented Jun 26, 2023

Versions

kettanaito commented Nov 7, 2023

mfrieling commented Nov 7, 2023

kettanaito commented Nov 7, 2023

LarsDenBakker commented Sep 14, 2021 •

edited

patrickmcdougle-okta commented Sep 15, 2021 •

edited

LarsDenBakker commented Sep 16, 2021 •

edited

patrickmcdougle-okta commented Sep 16, 2021 •

edited

thepassle commented Mar 16, 2022 •

edited

sashafirsov commented Mar 13, 2023 •

edited