svelte-loader icon indicating copy to clipboard operation
svelte-loader copied to clipboard
verified publisher icon sveltejs

The CSS sourcemap is wrong while using TypeScript

Open dolphin-wood opened this issue 4 years ago • 4 comments

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 [email protected]: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:

  9. 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:

dolphin-wood avatar Jun 14 '21 21:06 dolphin-wood

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

benmccann avatar Jun 15 '21 18:06 benmccann

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

dolphin-wood avatar Jun 15 '21 20:06 dolphin-wood

Source maps work by commenting out the following line, which is added in https://github.com/sveltejs/svelte-loader/pull/172

https://github.com/sveltejs/svelte-loader/blob/5e7853f233d7be5592b0b5fc22da9b4d1a5b0c12/index.js#L48

dolphin-wood avatar Jun 15 '21 21:06 dolphin-wood

Workaround: enable emitCss

lagunovsky avatar Nov 11 '21 17:11 lagunovsky