Source maps OR debug builds... not both!

Ionic Framework ionic-v3
1

In order to see source maps in Chrome devtools I need to set ionic_source_map_type to #inline-source-map in package.json - but when I do so, production builds with --prod --release no longer work, giving this error:

Error: ENOENT: no such file or directory, open 'C:\MyPath\www\build\main.js.map' in undefined at line undefined, col undefined, pos undefined

I’ve tried adding --generateSourceMap false to the command line for release builds, but it seems to be ignored.

So, it seems I can choose either source maps for debug builds, or working production builds… but not both!

Multiple issues have been opened about this in the Ionic app-scripts repo, and all closed with no resolution or explanation. Has anyone found a way around this problem?

2

From https://github.com/ionic-team/ionic-app-scripts/issues/822#issuecomment-337583553

Okay so I’ve got my workaround to build with source maps for dev and without for prod.
I’m using @ionic/app-scripts 3.0.0 but it should work with minor tweaks for older versions.
Now app-scripts webpack has seperate configurations for dev and prod you can override the devtool for prod and use --generateSourceMap=false while keeping inline-source-map to allow source maps in dev builds.

In package.json

"config": {
	"ionic_source_map_type": "inline-source-map",
	"ionic_webpack": "./config/webpack.config.js"
},

Create ./config/webpack.config.js to edit the webpack devtool to ignore the ionic_source_map_type and default to source-map

var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

module.exports = function () {
  useDefaultConfig.prod.devtool = 'source-map';
  return useDefaultConfig;
}

Development:

ionic cordova build android --debug --device

Production:

ionic cordova build android --release --prod --device --generateSourceMap=false

2 Likes