Large JS sourcemaps being treated/served by Shopify as binary files

Technical Q&A
1

Hi, I’m having real problems with a sourcemap for the JS on a client staging store where we need a lot of debugging info:

  1. It’s big (1.6Mb)

  2. It gets deployed to the assets directory via theme watch along with the minified JS code whenever there’s a change

  3. It cannot be viewed in the Shopify Code editor - always displays an empty file

  4. It gets cached by Chrome because it is not versioned by shopify - the minified JS file is versioned. I do not see changes to the code reflected in the sourcemap, but an older cached version. Not helpful

  5. If I try to append a version query string to the sourcemap in a new browser tab (to force Chrome to download) then it prompts to save the file

  6. I’ve tested getting the sourcemap file in postman and shopify is setting the mime-type to application/octet-stream (hence why chrome prompts to download) - it should be application/json (See https://stackoverflow.com/questions/19911929)

  7. All other (CSS) sourcemaps are being versioned AND have the application/json mime-type

  8. Other smaller JS sourcemaps on other sites do not seem to have the same problem

Is this shopify’s systems deciding a large (1.6MB) sourcemap should be served/viewed as a binary file?

I can workaround this by deleting the file from the shopify code editor, clearing the Site cache in Chrome, reloading the site, making a change to the source code (which generates/uploads a new sourcemap), then reloading the site again, but this is really slowing down development.

Any Ideas?