How to set up sourcemaps with Ionic

Ionic Framework
#1

Hi,
I’m trying to develop a small test project in Ionic and StencilJS and am unable to get sourcemaps to work.
Since I don’t think that this is related specifically to Stencil, I’m posting the question in the general Ionic forum.

To reproduce:

  • npm init stencil
  • edit src/components/app-home/app-home.tsx and add a small greeting (see below)
  • npm start

My modified app-home.tsx looks like this:

//...
export class AppHome {
  componentDidLoad(){
    console.log('Hello from AppHome');
  }
  //...

When opening this in Firefox or Chrome, the greeting is console logged. But it points to some processed js code, not the actual typescript source. Here is a screenshot of the output on Chrome, Firefox is basically identical:

image
image898×46 5.58 KB

The linked source file is bundled Javascript. For this simple example it is still readable, but as the sourcecode grows, it becomes unusable.

After looking at the generated files, the problem seems clear: Sourcemaps are not produced (I checked the compiled files in www/build). Editing tsconfig.json does not help:

{
  "compilerOptions": {
    "sourceMap": true,

For easier reproduction of the issue, I have created a repo with this exact state, you can find it here: https://github.com/lhk/stenciljs-sourcemap-problem

git clone https://github.com/lhk/stenciljs-sourcemap-problem
cd stenciljs-sourcemap-problem
npm start

How do I set up sourcemaps correctly?

#2

Looks like sourcemaps are not yet supported:


Thanks for making this technology. It looks like it has lots of potential. But without sourcemaps I just can’t use it for something serious. Lack of sourcemaps will just be too much of a hit on my productivity :frowning: