White screen on emulator and device because of es6 code not transpiled


#1

Hi,

currently i have a project where some libraries i use:

  • _project_#typeorm#chalk
  • _project_#jest-[all jest deps]#chalk
  • _project_#@ionic#app-scripts#chalk
  • _project_#tslint#chalk

are dependent of chalk. As seen most of my dependencies on it are for devDependencies this make me think that typeorm is the one using chalk, making it to be included in the final bundle, vendors.js.

the offending line in chalk is:
const proto = Object.defineProperties(() => {}, styles);

this causes an error when emulating or deploying the app (fat arrow). It gets installed but then comes the white screen. I have debugged remotely with a samsung device and with the android emulator. The chrome console gives me the error: Uncaught SyntaxError: Unexpected token ).

Why chalk doesn’t bundle es5 code
TypeORM is not keen to remove chalk usage

All reasons given in previous issues are perfectly understandable for me. So my problem, I guess, is reduced to be able to transpile chalk module from node_modules dir so webpack includes it as es5 code already, or is there any better/correct solution?

What did i tried:
To configure a custom webpack configuration in my ionic project:

const alias = require('./module.mappings');
const webpack = require('webpack');
const useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

module.exports = function () {
    ....
    useDefaultConfig.dev.module.loaders.push(jsLoader);
    useDefaultConfig.prod.module.loaders.push(jsLoader);

    return useDefaultConfig;
};

const jsLoader = {
    test: /\.js$/,
    loader: process.env.IONIC_WEBPACK_LOADER,
    exclude: /node_modules\/(?!(chalk)\/).*/,
};

did not succeed with this.

ionic info


cli packages: (/home/user/.config/yarn/global/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0 

local packages:

    @ionic/app-scripts : 3.1.10
    Cordova Platforms  : android 7.0.0 browser 5.0.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v8.9.4
    npm               : 5.6.0 
    OS                : Linux 4.15

Any help or hint will be highly appreciated.
Cheers,
David