Sourcemaps not being served by snowpack dev

[maxwell8888]

I'm running npx snowpack dev --config snowpack.config.json with the following config:
snowpack.config.json:

{
  "mount": {
    "src": "/"
  },
  "plugins": [],
  "installOptions": { "sourceMap": true },
  "devOptions": { "port": 8000 }
}

however I'm getting warnings for a lot of the npm packages I'm importing saying that not souremap was found. e.g.:
firebase
lit-html
lit-element
lodash
date-fns
etc

With this config, I was expecting sourcemaps to be created, but it seems they aren't?

[maxwell8888]

I tried running npx snowpack dev --reload but it didn't help

[FredKSchott]

Can you share what the warnings that you are seeing look like?

[maxwell8888]

Ah so it is actually serving the maps, for example for http://localhost:8000/web_modules/lit-html.js.map it is serving:

export { o as AttributeCommitter, A as AttributePart, B as BooleanAttributePart, D as DefaultTemplateProcessor, E as EventPart, N as NodePart, u as PropertyCommitter, P as PropertyPart, S as SVGTemplateResult, T as Template, a as TemplateInstance, c as TemplateResult, v as createMarker, g as defaultTemplateProcessor, d as directive, h as html, j as isDirective, q as isIterable, f as isPrimitive, i as isTemplatePartActive, n as noChange, l as nothing, p as parts, b as removeNodes, r as render, k as reparentNodes, s as svg, t as templateCaches, e as templateFactory } from './common/lit-html-4b9e08e9.js';
//# sourceMappingURL=lit-html.js.map

and the errors are:

DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/lit-html.js.map: Unexpected token e in JSON at position 0
DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/lit-html/directives/until.js.map: Unexpected token i in JSON at position 0
DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/common/lit-html-4b9e08e9.js.map: Unexpected token / in JSON at position 0
DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/common/tslib.es6-58b4a7ae.js.map: Unexpected token / in JSON at position 0
DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/@material/mwc-button.js.map: Unexpected token i in JSON at position 0
DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/lit-element.js.map: Unexpected token i in JSON at position 0
DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/date-fns.js.map: Unexpected token u in JSON at position 1
DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/common/events-a64aa528.js.map: Unexpected token / in JSON at position 0
DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/common/foundation-5da43da3.js.map: Unexpected token / in JSON at position 0
DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/lit-html/directives/class-map.js.map: Unexpected token i in JSON at position 0
DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/common/ripple-directive-418af5da.js.map: Unexpected token i in JSON at position 0
DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/common/observer-8c5412ba.js.map: Unexpected token c in JSON at position 0
DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/@material/mwc-dialog.js.map: Unexpected token i in JSON at position 0
DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/common/base-element-86236253.js.map: Unexpected token i in JSON at position 0
DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/common/if-defined-b5c2df23.js.map: Unexpected token i in JSON at position 0
DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/@material/mwc-list/mwc-list.js.map: Unexpected token i in JSON at position 0
DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/@material/mwc-textfield.js.map: Unexpected token i in JSON at position 0
DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/@material/mwc-list/mwc-list-item.js.map: Unexpected token i in JSON at position 0
DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/@material/mwc-icon-button.js.map: Unexpected token i in JSON at position 0
DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/lit-html/directives/unsafe-html.js.map: Unexpected token i in JSON at position 0

[FredKSchott]

Hmm, so it sounds like it's getting the wrong thing served at that URL. Can you share an example of what the response looks like for one of those URLs? My guess is that it's not actually JSON..

…

On Mon, Sep 21, 2020 at 12:23 PM maxwell8888 ***@***.***> wrote: Ah so it is actually serving the maps, for example for http://localhost:8000/web_modules/lit-html.js.map it is serving: export { o as AttributeCommitter, A as AttributePart, B as BooleanAttributePart, D as DefaultTemplateProcessor, E as EventPart, N as NodePart, u as PropertyCommitter, P as PropertyPart, S as SVGTemplateResult, T as Template, a as TemplateInstance, c as TemplateResult, v as createMarker, g as defaultTemplateProcessor, d as directive, h as html, j as isDirective, q as isIterable, f as isPrimitive, i as isTemplatePartActive, n as noChange, l as nothing, p as parts, b as removeNodes, r as render, k as reparentNodes, s as svg, t as templateCaches, e as templateFactory } from './common/lit-html-4b9e08e9.js';//# sourceMappingURL=lit-html.js.map and the errors are: DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/lit-html.js.map: Unexpected token e in JSON at position 0 DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/lit-html/directives/until.js.map: Unexpected token i in JSON at position 0 DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/common/lit-html-4b9e08e9.js.map: Unexpected token / in JSON at position 0 DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/common/tslib.es6-58b4a7ae.js.map: Unexpected token / in JSON at position 0 DevTools failed to load SourceMap: Could not parse content for ***@***.***/mwc-button.js.map: Unexpected token i in JSON at position 0 DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/lit-element.js.map: Unexpected token i in JSON at position 0 DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/date-fns.js.map: Unexpected token u in JSON at position 1 DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/common/events-a64aa528.js.map: Unexpected token / in JSON at position 0 DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/common/foundation-5da43da3.js.map: Unexpected token / in JSON at position 0 DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/lit-html/directives/class-map.js.map: Unexpected token i in JSON at position 0 DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/common/ripple-directive-418af5da.js.map: Unexpected token i in JSON at position 0 DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/common/observer-8c5412ba.js.map: Unexpected token c in JSON at position 0 DevTools failed to load SourceMap: Could not parse content for ***@***.***/mwc-dialog.js.map: Unexpected token i in JSON at position 0 DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/common/base-element-86236253.js.map: Unexpected token i in JSON at position 0 DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/common/if-defined-b5c2df23.js.map: Unexpected token i in JSON at position 0 DevTools failed to load SourceMap: Could not parse content for ***@***.***/mwc-list/mwc-list.js.map: Unexpected token i in JSON at position 0 DevTools failed to load SourceMap: Could not parse content for ***@***.***/mwc-textfield.js.map: Unexpected token i in JSON at position 0 DevTools failed to load SourceMap: Could not parse content for ***@***.***/mwc-list/mwc-list-item.js.map: Unexpected token i in JSON at position 0 DevTools failed to load SourceMap: Could not parse content for ***@***.***/mwc-icon-button.js.map: Unexpected token i in JSON at position 0 DevTools failed to load SourceMap: Could not parse content for http://localhost:8000/web_modules/lit-html/directives/unsafe-html.js.map: Unexpected token i in JSON at position 0 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1103 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEX5EZ2EDS44HHSOKJT4DDSG6R37ANCNFSM4RU4GTWQ> .

[maxwell8888]

http://localhost:8000/web_modules/lit-html.js.map is below, so it looks like it is serving the actual js rather than it's map.

export { o as AttributeCommitter, A as AttributePart, B as BooleanAttributePart, D as DefaultTemplateProcessor, E as EventPart, N as NodePart, u as PropertyCommitter, P as PropertyPart, S as SVGTemplateResult, T as Template, a as TemplateInstance, c as TemplateResult, v as createMarker, g as defaultTemplateProcessor, d as directive, h as html, j as isDirective, q as isIterable, f as isPrimitive, i as isTemplatePartActive, n as noChange, l as nothing, p as parts, b as removeNodes, r as render, k as reparentNodes, s as svg, t as templateCaches, e as templateFactory } from './common/lit-html-4b9e08e9.js';
//# sourceMappingURL=lit-html.js.map

[ehouais]

Same problem here with snowpack 2.11.1. Dev server is serving the js file in lieu of the actual source map.

[FredKSchott]

Thanks again everyone for surfacing this. just found the issue and pushed a quick fix here: bcc1fbc

This just missed the v2.12.1 release but will make it in in the next release.

[ca-d]

I just used npx snowpack dev with "snowpack": "^2.15.1", "snowpack-plugin-import-map": "^1.1.1", and "@snowpack/plugin-typescript": "^1.0.2" and am still getting errors like DevTools failed to load SourceMap: Could not parse content for http://localhost:8080/out-tsc/src/sample-file.js.map: Unexpected token i in JSON at position 0 due to the dev server serving JavaScript source files instead of JSON maps.

This is even though 2.15.1 is supposed to contain your quick fix

[FredKSchott]

@c-dinkel what are you seeing when you visit http://localhost:8080/out-tsc/src/sample-file.js.map ? Can you share steps to reproduce in a basic CSA starter template?

[aryzing]

I just started using snowpack and ran into this exact same issue. When chrome tries to resovle the source map url, it get served the actual file rather than the map.

Using snowpack v2.18.5

Example source map url: http://localhost:8080/web_modules/react.js.map

Chrome error,

DevTools failed to load SourceMap: Could not parse content for http://localhost:8080/web_modules/react.js.map: Unexpected token i in JSON at position 0

Actual file served by snowpack at the map url,

import { ... } from "..."
...

My config is

// Snowpack Configuration File
// See all supported options: https://www.snowpack.dev/#configuration

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
  mount: {
    src: "/dist",
    public: "/",
  },
  plugins: ["@snowpack/plugin-babel", "@snowpack/plugin-react-refresh"],
  install: [
    "react/jsx-runtime",
    "@emotion/styled/base",
    "core-js/modules/es.array.is-array.js",
  ],
  installOptions: {
    sourceMap: true,
  },
  buildOptions: {
    sourceMaps: true,
  },
  devOptions: {
    open: "none",
  },
};

Any suggestions on how to fix this?

[sbrunk]

I'm seeing the same behavior @aryzing is describing.

Given some js file with a source map

tree dist
dist
├── main.js
└── main.js.map

and a minimal snowpack.config.json

{
  "mount": {
    "dist": "/"
  }
}

snowpack always serves the content of main.js on http://localhost:8080/main.js.map.

Tried with 2.18.5 and 3.0.0-rc.2

[sbrunk]

#1478 is probably related to this and #1340 might be the solution.

[aryzing]

Thanks! Most relevant part of the solution timeline,

Done! Will try to get this in for v2.0, but it's on the main branch which means it might land as a part of v3.0 instead (next RC, and then v3.0.0 on January 6th)

[franktopel]

This seems still an issue as of 3.6.2.

I'm getting [404] Not Found (/_snowpack/pkg/custom-elements.js.map) when running the development server.

This is my snowpack config:

/** @type {import("snowpack").SnowpackUserConfig } */
export default {
  mount: {
    public: { url: '/', static: true },
    src: { url: '/dist' },
  },
  plugins: [
    [
      '@snowpack/plugin-babel',
      {
        transformOptions: {
          sourceMaps: "inline"
        },
      }
    ],
    [
      '@snowpack/plugin-webpack',
      {
        sourceMap: true,
        outputPattern: { html: './build/' },
      },
    ],
  ],
  routes: [
    /* Enable an SPA Fallback in development: */
    // {"match": "routes", "src": ".*", "dest": "/index.html"},
  ],
  optimize: {
    /* Example: Bundle your final build: */
    "bundle": true,
  },
  packageOptions: {
    /* ... */
  },
  devOptions: {
    /* ... */
    "open": "chrome",
  },
  buildOptions: {
    /* ... */
    sourcemap: true,
  },
};

and this is my index.js:

import '@ungap/custom-elements';
import './js/components/components.js';

[omnitube]

Same for me