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:
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?