Doesn't appear to work in an ESM browser environment

[kaiyoma]

I'm trying to use this library for the first time, and it doesn't appear to work in a browser correctly (in an ESM webapp). My init code is very simple and taken from the docs:

import { SourceMapConsumer } from 'source-map';

SourceMapConsumer.initialize({
  'lib/mappings.wasm': 'https://unpkg.com/source-map@0.7.3/lib/mappings.wasm',
});

But this has a type error:

Then I'm trying to apply a source map, basically like this:

await SourceMapConsumer.with(result.contents, null, (consumer) => {
  positions.forEach((position) => {
    console.log(consumer.originalPositionFor(position));
  });
});

And I'm getting this in the browser console:

Uncaught (in promise) ReferenceError: __dirname is not defined
    at read-wasm.js:34:34
    at new Promise (<anonymous>)
    at readWasm (read-wasm.js:33:12)
    at wasm (wasm.js:25:16)
    at source-map-consumer.js:247:14
    at async _SourceMapConsumer.with (source-map-consumer.js:68:22)
    at async Object.handleAddFiles [as onAddFiles] (App.tsx?t=1692066785254:100:9)

Looking at the code, I can see that this library thinks it's running in a Node environment, but it's clearly not, so maybe the environment detection code is not right?

[eemeli]

This should be fixed in v0.7.4.

[kaiyoma]

@eemeli That's the version I'm already using.

[eemeli]

According to the code snippet you've included above, you're using v0.7.3.

[kaiyoma]

Oh, you're referring to the mappings URL. I copied that from the npm docs, so I guess those need to be updated. But I have 0.7.4 of the library installed:

$ grep source-map package.json
    "source-map": "0.7.4"

$ grep version node_modules/source-map/package.json
  "version": "0.7.4",

Even if I fix the URL, I still see the same problems.

[eemeli]

Ah, sorry, I misunderstood your error earlier. The code is currently shipped in two formats:

• source-map/dist/source-map.js is an IIFE suitable for browser environments that sets the sourceMap global.
• source-map/source-map.js is a CJS suitable for environments with require(), like npm and JS build tools. Therefore this is defined as the "main" target in the package.json.

To use it in a browser's <script type="module">, you should be able to do something like this:

<script type="module">
  import "/path/to/your/source-map/dist/source-map.js";
  sourceMap.SourceMapConsumer.initialize({
    "lib/mappings.wasm": "/path/to/your/source-map/lib/mappings.wasm"
  });
</script>

That works because the IIFE sets window.sourceMap, which is then usable in the subsequent code.

[kaiyoma]

No, this still isn't working. This is what I added to my index.html:

    <script type="module">
      import 'source-map/dist/source-map.js';

      sourceMap.SourceMapConsumer.initialize({
        'lib/mappings.wasm': 'source-map/lib/mappings.wasm',
      });
    </script>

The import works, but the next statement doesn't, and I get this in my browser console:

Uncaught ReferenceError: sourceMap is not defined

If I try to access window.sourceMap instead, I get this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'SourceMapConsumer')

If I try similar code in my app code, I get the same kinds of errors.

[kaiyoma]

I ended up copying this snippet of code from the npm page (adjusted to reference 0.7.4 instead):

<script src="https://unpkg.com/source-map@0.7.4/dist/source-map.js"></script>
<script>
    sourceMap.SourceMapConsumer.initialize({
        "lib/mappings.wasm": "https://unpkg.com/source-map@0.7.4/lib/mappings.wasm"
    });
</script>

This seems to load/init the library correctly in my webapp. This is less than ideal though, because I'd like to bundle all dependencies with my app, and not have it go off and fetch something from the Internet every time its loaded.

I also apparently have to reference sourceMap.SourceMapConsumer in my code for things to work, which TypeScript doesn't like, because it doesn't know window.sourceMap exists. If I try to use the SourceMapConsumer that's imported from the library, then I start getting the __dirname errors as I reported before.

[eemeli]

I think for further help you may need to describe the exact steps to replicate the error you're seeing.

For me, if I run the following commands in a shell on a unix-y machine:

cd /tmp/
npm i --no-save source-map
cd node_modules

Then create in /tmp/node_modules/ a file index.html with these contents:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script type="module">
      import "./source-map/dist/source-map.js";
      sourceMap.SourceMapConsumer.initialize({
        "lib/mappings.wasm": "./source-map/lib/mappings.wasm",
      });
      console.log(sourceMap);
    </script>
  </head>
  <body></body>
</html>

and then run in that directory

python -m http.server 8000

I can open a browser at http://localhost:8000/index.html and see in the console a successful logging of the sourceMap object.

Please repeat those steps, and see if that works for you? Note in particular that the paths start with ./.

[kaiyoma]

Yes, those steps work for me. But when I try the same thing in a Vite dev server, I get the errors as described above.

[rmuratov]

@kaiyoma This is because the published version (0.7.4) has bug. See #459

It is fixed in the main, but not published.

I also use it with Vite and I've managed to make it work using the master branch (still has errors regarding types, i.e. missing initialize) with updated whatwg-url. See my comment.