Error running vti diagnostics after updating to VTI 0.1.11 - Issue with versions 0.1.9 onwards

[kumi]

• I have searched through existing issues
• I have read through docs
• I have read FAQ
• I have tried restarting VS Code or running Vetur: Restart VLS

Info

• Platform: WSL
• VTI version: 0.1.11
• VS Code version: 1.76.2
• TypeScript version: 3.8.3
• Vetur output:

Problem

Until recently, I was using VTI version 0.1.3, but I found the latest version, 0.1.11, and updated to it. However, when I ran vti diagnostics, an error message like the following started to appear:

While versions up to 0.1.8 complete without any issues, I'm having trouble because an error occurs from version 0.1.9 onwards, even though the code hasn't changed.

I would appreciate it if someone who knows about this could let me know what's going on.

TypeError: Cannot read property 'close' of undefined
    at /home/kumimaru/XXX/node_modules/vti/dist/cli.js:1:255076
    at Object.<anonymous> (/home/kumimaru/XXX/node_modules/vti/dist/cli.js:1:256898)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Object.<anonymous> (/home/kumimaru/XXX/node_modules/vti/bin/vti:2:1)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! XXX@1.0.0 lint:vti: `vti diagnostics`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the XXX@1.0.0 lint:vti script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/kumimaru/.npm/_logs/2023-04-03T08_40_38_996Z-debug.log

[John Sanders]

I'm also having this issue. I tried building vti from source without the terser plugin, so looking at the stack trace was actually helpful.

Issue comes from this bit here:

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

TypeError: Cannot read properties of undefined (reading 'close')

however, this is not from vti source. This made me think it's from a dependency change instead. I loaded the cli.js and cli.js.map files into https://evanw.github.io/source-map-visualization/ and saw that the offending line was originating from chalk@2.4.2.

This is interesting because the dependency for vti requests chalk@^4. This is probably what the issue is!
So where was chalk@2 coming from, and how do we switch it back?

Doing a yarn why chalk showed that it came from @babel/code-frame -> @babel/highlight. Somehow it got hoisted up where it shouldn't and now the wrong version of chalk is bundled.

This is likely made worse because there are multiple yarn.lock files, one in the project root, and the other in the vti folder. This can lead to LOTS of confusing yarn behavior and it means there's not a clear source of truth for how this thing should be built lol.

I pushed a fork of vetur that modifies the package.json of vti to prevent this hoisting issue. It's not a proper fix, because there should only be one yarn.lock but it's good enough for now.

[John Sanders]

If anyone's interested, I published the fork as @ferm10n/vti@0.1.12-rc.1