Ionic 3 and Mapbox GL build error for production

Ionic Framework ionic-v3
1

I’m new to the community so forgive me if there is a better place to put this. I did not see an Ionic 3 section yet. We are trying our Ionic app in Ionic 3 and ran into an issue. It might be Ionic 3 or it might be downstream in Angular. Instead of re-typing the entire issue, this is the literal exact problem we are having that I found on the Angular forums : https://github.com/angular/angular-cli/issues/5804. We are seeing the same problem in Ionic. Even the failure log is the same.

It appears the gentleman who filed this error found a way around it. I have inherited this app and am still learning Ionic, but I do not see a way I can recreate his workaround. For now we are running a dev build so this error does not occur just so we can keep testing, but I’m interested to know if there is a way to implement the workaround found there.

Thanks so much for your time!
Doug

2

I had the same issue and I found the solution :wink:

You have to override the config files:

  1. On the root folder of your project create config folder and copy the files webpack.config.js and the sass.config.js there (these files are located in …\node_modules@ionic\app-scripts\config

  2. Modify the copied files:

2.1. In sass.config.js:

Add to the includePaths array:
‘node_modules/mapbox-gl/dist’

2.2. In the webpack.config.js:

Add the_noParse_ line to prodConfig/module:

module: {
loaders: getProdLoaders(),
noParse: /(mapbox-gl).js$/
},

  1. In the file package.json from your project add:

“config”: {
“ionic_sass”: “./config/sass.config.js”,
“ionic_webpack”: “./config/webpack.config.js”
}

3

I think another option might be to override ionic_uglifyjs and tell it to leave comparisons alone as described in this comment. Can’t say for sure the pros and cons of that idea versus yours, though.