SourceMaps don't work in Safari

[derolf]

Example: https://github.com/derolf/nollup-bug/tree/sourcemap

npm start

Chrome: Shows folder with "nollup://" files and the project sources
Safari: "nollup://" is missing

[PepsRyuu]

I can't do anything about this unfortunately as I don't have a Mac to test with... :(

[derolf]

I am gonna add Webpack to the example and see what’s different...

[PepsRyuu]

I had a couple of friends look into this, and it seems like source map support in Safari in general is very limited. 0.14.3 introduced //# sourceURL for all files regardless of whether or not they have a source map, and it seems like that helps Safari. Safari was rejecting // #sourceMappingURL if it's a data-uri, but it has no problem with it if there's also //#sourceURL with it. Only problem though is it's flat because they're done via eval calls.

localhost:9000/
    main.[hash].js
    styles.[hash].css
Extra Scripts/
    main.js <-- raw eval code
         src/main.js <-- actual source map
    App.js
         src/App.js
    MyComponent.js
         src/MyComponent.js
    react.js
         node_modules/react/react.js
    ...

Other bundlers like Webpack offer another type of devtool, which is an external .map file. With a single map file, it can show all of the source maps for all of the files under its respective chunk.

localhost:9001/
     0.chunk.js
         src/
             chunked_component.js
             another_component.js
     main.chunk.js
         src/
              main.js
              App.js
         node_modules/
              react/
                  react.js
     ...

So the latest version of Nollup will work, but it's not an ideal user experience. I'm not sure if it's a good idea to implement multiple source map mechanisms like .map files, because they take much longer to compile due to requiring source map collapsing (merging of source maps into one). Honestly Safari's devtools seems pretty awful for debugging in general and they haven't implemented the source map standard properly.

Hopefully this helps explain a few things.

[piotr-cz]

It seems that I'm having same issue with Chrome 89.0.4389.114 on Windows.
The problem might be that the nollup-int: scheme/ protocol is not available when serving files from http::

DevTools failed to load SourceMap: Could not load content for nollup-int:///node_modules/preact/dist/preact.module.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load SourceMap: Could not load content for nollup-int:///node_modules/preact/devtools/dist/devtools.module.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load SourceMap: Could not load content for nollup-int:///node_modules/preact/debug/dist/debug.module.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load SourceMap: Could not load content for nollup-int:///node_modules/preact/hooks/dist/hooks.module.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load SourceMap: Could not load content for nollup-int:///node_modules/preact/compat/dist/compat.module.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

[PepsRyuu]

The issue there is that those files include additional // #sourceMappingURL comments that Nollup is not aware of. Parsing those out is very inaccurate and expensive to do. If you want to remove those warnings, you'll need to add a plugin which removes those comments.

[PepsRyuu]

#166 (comment)

[piotr-cz]

ok, thanks