Undefined is not an object - Chalk issue on client when running Poi

[AlexGustafsson]

Do you want to request a feature or report a bug?
bug

What is the current behavior?
A website made using Poi won't start. The only clue is an error logged to the browser's console saying:

[Error] TypeError: undefined is not an object (evaluating 'ansiStyles.color.close')
	(anonym funktion) (index.js:72)
	Eval-kod (index.js:228)
	eval
	./node_modules/chalk/index.js (vendors~main.js:369)
	__webpack_require__ (main.js:768)
	fn (main.js:142)
	Eval-kod (formatWebpackMessages.js:19)
	eval
	./node_modules/@poi/dev-utils/formatWebpackMessages.js (vendors~main.js:11)
	__webpack_require__ (main.js:768)
	fn (main.js:142)
	Eval-kod (hotDevClient.js:23)
	eval
	./node_modules/@poi/dev-utils/hotDevClient.js (vendors~main.js:23)
	__webpack_require__ (main.js:768)
	fn (main.js:142)
	(anonym funktion) (main.js:1465)
	__webpack_require__ (main.js:768)
	checkDeferredModules (main.js:44)
	(anonym funktion) (main.js:829)
	Global kod (main.js:830)

The error refers to Chalk's index.js line 72:

ansiStyles.color.closeRe = new RegExp(escapeStringRegexp(ansiStyles.color.close), 'g');

It seems like it's called by:

./node_modules/@poi/dev-utils/formatWebpackMessages.js 

The issue does not occur when building the site.

If the current behavior is a bug, please provide the steps to reproduce.

Unfortunately this issue has occurred once before without me knowing how to solve it. I have seen no correlation of when the issue occurs. My guess is that there's an error in the code that Poi is trying to pretty print using Chalk - but fails.

What is the expected behavior?

The website should be able to start.

If this is a feature request, what is the motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Node.js version, Poi version and Operating System.

Node: 10.1.0

Project:

"dependencies": {
    "axios": "^0.18.0",
    "es6-promise": "^4.2.4",
    "img-2": "0.0.3",
    "intersection-observer": "^0.5.0",
    "reset-css": "^3.0.0",
    "vue": "^2.5.16",
    "vue-i18n": "^7.6.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1",
    "vuex-persist": "^1.2.2"
  },
  "devDependencies": {
    "poi": "^10.1.6",
    "xo": "^0.21.0"
  }

Browser: unrelated, occurs no matter what.

Works fine with Poi 9.x.

[bmaland]

A workaround that worked for me is to add "chalk": "^1.0.0" as a dev dependency in your project.

[AlexGustafsson]

@bmaland I'll need to test that. Are you sure that is the same issue? I can see the code for Chalk in my browser so there doesn't seem to be an issue with missing dependencies.

[AlexGustafsson]

@bmaland Confirmed the workaround.

[github-actions]

This issue has been marked as Stale, it will be closed in a week if there's no furthur activity.

[AlexGustafsson]

This hasn’t been an issue for some time now. Closing.