vue-cli-plugin-electron-builder: Cli-highlight, dependency of typeorm, breaks production build

Describe the bug Launching app fails after build because of an error with cli-highlight node module which is a dependency of typeorm.

To Reproduce Steps to reproduce the behavior:

  1. Create electron project using this
  2. npm i typeorm
  3. npm run electron:build
  4. cd into dist_electron folder and run created app image (or whatever exe or dmg thing it creates on windows/mac)
  5. Get the following error
A JavaScript error occurred in the main process
Uncaught Exception:
TypeError: chalk_1.default.Instance is not a constructor
    at Object.<anonymous> (/tmp/.mount_molteoj6HNLv/resources/app.asar/node_modules/cli-highlight/dist/theme.js:12:13)
    at Module._compile (internal/modules/cjs/loader.js:786:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:798:10)
    at Module.load (internal/modules/cjs/loader.js:645:32)
    at Function.Module._load (internal/modules/cjs/loader.js:560:12)
    at Module.require (internal/modules/cjs/loader.js:685:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/tmp/.mount_molteoj6HNLv/resources/app.asar/node_modules/cli-highlight/dist/index.js:19:15)
    at Module._compile (internal/modules/cjs/loader.js:786:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:798:10)

Expected behavior App launches.

Environment (please complete the following information):

  • OS and version: Ubuntu 18.04
  • node version: 12.6.0
  • npm version: 6.14.2
  • vue-cli-plugin-electron-builder version : 1.4.6
  • electron version: 6.1.9
  • other vue plugins used: vuetify, babel, eslint, vuex, router
  • custom config for vcp-electron-builder:
module.exports = {
  pluginOptions: {
    electronBuilder: {
      customFileProtocol: './',
      externals: [
        'sqlite3',
        'typeorm',
      ],
      builderOptions: {
        extraResources: [
          { from: 'src/worker', to: './worker' }
        ]
      }
    }
  }
}

Additional context The problem appears to come from here in cli-highlight’s theme.js:

"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var chalk_1 = __importStar(require("chalk"));
var chalk = new chalk_1.default.Instance({ level: Math.min(chalk_1.default.level, 1 /* Basic */) });

This is a compiled result of the following:

import { Chalk, default as _chalk, Level } from 'chalk'

const chalk = new _chalk.Instance({ level: Math.min(_chalk.level, Level.Basic) })

What I don’t understand is that this error does not occur on electron:serve even when I put the same code into background.js, install chalk and console log everything. The constructor works fine.

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 17 (9 by maintainers)

Most upvoted comments

I needed to go a bit further than @cooperfrench95’s solution, by elevating chalk and cli-highlight to top level dependencies, and using older versions consistently instead of newer versions.

This was because I had other dependencies which also used older versions of chalk, and upgrading them caused cascading new problems, and I gave up at ts-loader (https://github.com/TypeStrong/ts-loader/issues/1092).

diff --git a/package.json b/package.json
index ba0b127..ade6360 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,8 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.13.0",
     "bwip-js": "^1.7.1",
+    "chalk": "2.4.2",
+    "cli-highlight": "2.1.2",
     "core-js": "^3.6.4",
     "d3": "^5.7.0",
     "electron": "^6.0.0",
@@ -76,6 +78,10 @@
     "vue-template-compiler": "^2.6.11",
     "vuetify-loader": "^1.3.0"
   },
+  "resolutions": {
+    "cli-highlight": "2.1.2",
+    "**/chalk": "2.4.2"
+  },
   "homepage": "https://github.com/foo/bar",
   "keywords": [
     "electron",

Anyone who cant use yarn, you may like to try https://github.com/rogeriochaves/npm-force-resolutions . I had limited success with it before switching to yarn.