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

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

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 ....

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.

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

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.

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.

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 

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.

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.

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.

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

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

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.

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

@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);
    }
});

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}`)
}

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" />

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