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

Doesn't appear to work in an ESM browser environment #496

Open
kaiyoma opened this issue Aug 15, 2023 · 10 comments
Open

Doesn't appear to work in an ESM browser environment #496

kaiyoma opened this issue Aug 15, 2023 · 10 comments

Comments

@kaiyoma
Copy link

kaiyoma commented Aug 15, 2023

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/[email protected]/lib/mappings.wasm',
});

But this has a type error:

image

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
Copy link
Member

eemeli commented Aug 15, 2023

This should be fixed in v0.7.4.

@kaiyoma
Copy link
Author

kaiyoma commented Aug 15, 2023

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

@eemeli
Copy link
Member

eemeli commented Aug 15, 2023

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

@kaiyoma
Copy link
Author

kaiyoma commented Aug 15, 2023

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
Copy link
Member

eemeli commented Aug 15, 2023

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
Copy link
Author

kaiyoma commented Aug 16, 2023

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
Copy link
Author

kaiyoma commented Aug 16, 2023

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

<script src="https://unpkg.com/[email protected]/dist/source-map.js"></script>
<script>
    sourceMap.SourceMapConsumer.initialize({
        "lib/mappings.wasm": "https://unpkg.com/[email protected]/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
Copy link
Member

eemeli commented Aug 16, 2023

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
Copy link
Author

kaiyoma commented Aug 16, 2023

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
Copy link

rmuratov commented Aug 24, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants