Sourcemaps in new project structure

Ionic Framework ionic-v3
1

In recent versions of the conference app and ionic 2 templates, the app folder containing the source code has been pulled up above the www folder where the build folder is and the transpiled code is written to in the app.bundle.js file.

Before that when the app folder and the build were both under the www folder I was able to get sourcemaps working.
I only needed to add devtool: ‘source-map’, to the webpack.config.js file.

But now when I try to debug the code, I always find myself looking at the code that has been transpiled to es5, not the es6 source.

It seems to me that since the app folder with the es6 source is now above the www folder, the sourcemaps can’t find the source files anymore. Is there something I need to configure in the webpack.config.js file to get sourcemaps to work now?

1 Like
2

Hi,

I was facing the same problem but my project is using typescript.

I had to specify in tsconfig.json file sourceMap : true and then the source maps were that of es6/ts else I was also getting es5 source maps.

If you are using babel for es6 then may be there is a way to specify the sourcemap generation with babel.

Regards
Kapil

1 Like
3

Yes, that was the way to fix it. Add sourcemap true to the tsconfig rather than the webpack config.
Thanks.

4

I’ve added "sourceMap": true but I still get console stacktrace pointing to transpiled JS.

Can you share your complete tsconfig.json file?

P.S. Help vote for this : https://github.com/driftyco/ionic-cli/issues/744