sveltejs/svelte-loader

The CSS sourcemap is wrong while using TypeScript

idiotWu opened this issue · 4 comments

idiotWu commented

Problem

When using the sveltejs/template-webpack with TypeScript enabled, the inline CSS source map goes wrong and source contents can't be loaded.

Steps to Reproduce

  1. clone the template: git clone git@github.com:sveltejs/template-webpack.git
  2. run npm install
  3. run node scripts/setupTypeScript.js
  4. run npm install again
  5. run npm run dev
  6. open http://localhost:8080/ with Chrome
  7. open the devtool and inspect the <h1> element
  8. click source link in the Style panel:

  1. you can see an error message in the Sources tab: Could not load content for http://localhost:8080/src/App.svelte (HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)

Possible Cause

I tried parsing the inline sourcemap inside <style> element, and it seems that sourcesContent property is missing:

benmccann commented

We just released a new version of svelte-loader that I believe fixes this

idiotWu commented

@benmccann no, after updating svelte-loader to 3.1.2, this issue is still happening.

idiotWu commented

Source maps work by commenting out the following line, which is added in #172

svelte-loader/index.js

Line 48 in 5e7853f

if (processed.map) compileOptions.sourcemap = processed.map;

lagunovsky commented

Workaround: enable emitCss