Ionic-app-scripts: Sourcemaps appear to be broken when uglify/--prod task is used.

[fephil]

Short description of the problem:

For info, the below behaviour of generating production sourcemaps worked correctly in v1.3.12 so I feel like this is a potential regression or bug.

When setting ionic_generate_source_map to true and running ionic build --prod, the sourcemaps produced seem to be broken as they are significantly different when compared to ionic build based sourcemaps with several base64 chunks and random blocks of code seemingly in the wrong position. When checking the sourcemaps with Raygun The same part of the sourcemap always returns when querying different lines/columns. The sourceMappingURL is also missing on main.js & vendor.js

I believe the problem occurs when the uglifyjs task is ran as it doesn't occur on ionic build for example. I tried to provide my own config based on a modified default config to uglifyjs with sourcemaps set to true to no effect.

Also, when setting ionic_generate_source_map to true, vendor.js.map isn't copied over to the sourcemaps folder.

The reason for needing sourcemaps based on --prod code is for error tracking.

I've spent a few hours looking at the app-scripts workflow but couldn't quite work out where the uglifyjs sourcemap options were getting added but I'd be happy to look more into this if I could get some guidance and help as to where to look.

There are some similar-ish tickets to my one but they refer to different aspects of sourcemaps, eg the mappingurl being an absolute path, not completely missing so I don't think this is a duplicate.

Thanks.

What behavior are you expecting?

To summarise, I'd expect when running the build task with --prod flag:

1. The //# sourceMappingURL=main.js.map to be present in main.js,
2. The //# sourceMappingURL=vendor.js.map to be present in vendor.js,
3. vendor.js.map should be copied into the .sourcemaps directory,
4. The sourcemaps to be generating correctly.

Steps to reproduce:

1. Set ionic_generate_source_map to true in package.json
2. Run ionic build and save sourcemaps somewhere,
3. Run ionic build --prod and compare sourcemaps.

Which @ionic/app-scripts version are you using?
2.1.4

[marcelgoya]

This bug makes it impossible for us to upload source map files to sentry. Is this something you're going to fix or do we have to create a workaround for this? I'm asking because we have a product launch within the next couple of weeks. @kensodemann An official comment would be appreciated here. Cheers

[danbucholtz]

Is this resolved now? We have made changes to the source maps. Not sure if they'll fix the issue with Sentry or not. I know the changes we made improved our own error tracking service.

Thanks,
Dan

[marcelgoya]

Hey @danbucholtz ,

the source maps are correctly generated when I'm using the --aot flag but it's still not working when I'm running it with the --prod flag. There's something going on with the minification ....

[fephil]

Thanks for your work in this. I haven't been able to successfully test this yet as upgrading has caused other project related problems (not related to app scripts itself). I should be able to test in a few days time.

[c0bra]

Any news on this? Trying to get sourcemaps working with the --prod switch and not having much luck.

[fephil]

Hi @danbucholtz,

Apologies in the delay getting my app tested with v3. Unfortunately all the issues I have are still present:

• main.js.map and vendor.js.map sourcemaps are broken,
• no sourceMappingUrl on main.js or vendor.js,
• vendor.js.map isn't copied into .sourcemaps folder.

Is there anything I can do to help? Thanks.

EDIT: Formatting fixes.

[killerchip]

Anyone found a workaround for building production apps while App-Scripts v3.0.0 is in place?

I want to upgrade ionic framework to latest v3.7.1 which uses app-scripts v3.0.0 but this bug is a show-stopper. Right now I'm in ionic v3.6.1 and using App-scripts v2.0.1.

[mwiley63]

I've updated everything on my app and got --prod builds to work with the latest and greatest ionic tools. I'm not sure if it's ionic-angular or the ionic-cli that resolved the issue.

I didn't test the sourcemaps but they were generated and no errors were shown with ionic cordova build ios --prod (same with android).

@killerchip I found a workaround using app-scripts 3.0 and ionic-angular 3.7.1 (I actually tested with a snapshot build, specified as "ionic-angular": "^3.7.1-201710101557", in package.json).

My --prod build did take some time (approximately 12 minutes), they worked for both Android and iOS.

My ionic info:

    @ionic/cli-utils  : 1.13.1
    ionic (Ionic CLI) : 3.13.1

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.7.1

System:

    ios-deploy : 1.9.1 
    ios-sim    : 5.0.13 
    Node       : v7.4.0
    npm        : 4.0.5 
    OS         : macOS Sierra
    Xcode      : Xcode 9.0 Build version 9A235 

[killerchip]

It seems that it has something to do with my environment in Mac. I have tested compiling in a Windows host and it works fine even with not the latest and greatest npm/node, etc.

[killerchip]

I nuked everything. ionic, cordova, npm, node. I re-installed them from scratch to their latest versions...

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.13.1
    ionic (Ionic CLI) : 3.13.1

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.7.1

System:

    Android SDK Tools : 26.0.1
    Node              : v6.11.4
    npm               : 5.5.1 
    OS                : macOS Sierra
    Xcode             : Xcode 9.0 Build version 9A235 

Misc:

    backend : legacy

The behavior remains the same.
@mwiley63 I even tries the ionic-angular version you suggested above, but still the same

Next thing I'm thinking... I may even nuke my whole MacOS. Return it to factory default update to latest and see how this goes. It's getting pretty weird this issue.

[fephil]

Hi,

In regards to my original issue (the sourcemaps not being correct), has there been any progress on this? Has it been assigned to anyone on the Ionic side to look at? Apologies for asking again but I need to update Ionic to 3.8.0 to support iPhone X for next week but that will break my error logging so it's not an ideal situation either way as it stands.

Pinging @danbucholtz who initially responded to this. Thanks.

[ttphi88]

Hi,
I've managed to get correct sourcemap in --prod build with following configurations in package.json:

"config": {
    "ionic_source_map_type": "source-map",
    "ionic_generate_source_map": true,
    "ionic_move_source_maps": true
},
"scripts": {
    // ...
    "build": "ionic-app-scripts build --prod"
}

After building (via yarn run build), the www/build/ folder contains both vendor.js.map and main.js.map file.

One problem is the main.js and vendor.js file do not have //# sourceMappingURL=main.js|vendor.js, so I added that line before submitting to sentry.

Below are the versions I'm using:

node: v6.11.4
yarn: 1.2.1
@ionic/app-scripts: 3.0.1
ionic-angular: 3.7.1

[marcelgoya]

@ttphi88 Dude, you've just saved me a ton of time! Your solution works like a charm 👍 👍 👍 Thanks for posting it!!!

[doender]

Is anyone able to get automatic sourceMappingURL entries in the js files? I have a lot of lazy loaded modules so it's a bit of a pain to add them.

[c0bra]

Having same problem as @doender. This has been going on for months. A solution forthcoming from the Ionic team would be appreciated.

[doender]

@c0bra I agree. Until then I call the following node script after every build to add the source mapping URLs.

const fs = require('fs');
const path = require('path');
const wwwDir = path.resolve(__dirname, 'www');
const buildDir = path.resolve(wwwDir, 'build');

fs.readdirSync(buildDir).forEach(file => {
    if (file.endsWith('.js')) {
        const filePath = path.join(buildDir, file);
        let content = fs.readFileSync(filePath).toString('utf8');
        content += `\n//# sourceMappingURL=${file}.map`;
        fs.writeFileSync(filePath, content);
    }
});

[kirillgroshkov]

Thanks @c0bra for the snippet!

For my use case I've modified it a bit and can share here too (TypeScript):

to be executed like this: yarn ts-node -r tsconfig-paths/register ./src/scripts/addSourceMappingUrl.ts --dir ./www/build

import * as fs from 'fs-extra'
import * as path from 'path'
import { wwwDir } from '../cnst/paths.cnst'
import * as yargs from 'yargs'
const argv = yargs.argv

const buildDir = argv.dir || wwwDir + '/build'
if (!fs.existsSync(buildDir)) {
  console.warn('Dir does not exist: ' + buildDir)
  process.exit(-1)
}

doWork()
  .then(() => console.log('done'))
  .catch(err => {
    console.error(err)
    process.exit(1)
  })

async function doWork () {
  let saved = 0
  fs.readdirSync(buildDir)
    .filter(f => f.endsWith('.js'))
    .forEach(fileName => {
      const filePath = path.join(buildDir, fileName)
      const mapPath = filePath + '.map'
      if (!fs.existsSync(mapPath)) return
      let content = fs.readFileSync(filePath).toString('utf8')
      if (content.endsWith('.js.map')) return // make idempotent
      content += `\n//# sourceMappingURL=${fileName}.map`;
      fs.writeFileSync(filePath, content)
      saved++
    })
  console.log(`${saved} files saved in ${buildDir}`)
}

[rich186]

Thanks @c0bra! Just want to add for those of us wanting to run this as a Cordova hook:

<hook src="bin/add-sourcemap-urls.js" type="before_prepare" />

[c0bra]

Note: the snippet is from @doender :) Credit where credit is due.