VSCodeとCypressで突然の process is not defined

CypressでNuxt.jsのアプリケーションのE2Eテストを書いている時に遭遇した、初めてでレアケースのエラーと原因をメモしておきます。

発生状況とエラー内容

Cypressを使ってE2Eテストのコードを書いて保存し、Cypressを起動して作成したE2Eテストを実行するとE2Eが走る前に下記のエラーが発生しました。

The following error originated from your test code, not from Cypress.

  > process is not defined

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.
Cypress could not associate this error to any specific test.
We dynamically generated a new test to display this failure.

node_modules/ci-info/index.js:5:1

  3 | const vendors = require('./vendors.json')
  4 | 
> 5 | const env = process.env
    | ^
  6 | 
  7 | // Used for testing only
  8 | Object.defineProperty(exports, '_vendors', {

E2Eのコードはとてもシンプルで、画面遷移とフォーム入力を並べただけの構造です。
それまでは問題なく実行されていたので、そこに数行加えて保存、加えた処理を確認するためにCypressを起動したところこのエラーが発生しました。
しかも発生場所はci-infoという見慣れないパッケージの中。
Viteで環境変数を読み込む時はprocess.envではなくimport.meta.envですから、それはエラーになるよねという内容なんですが、そもそもこのパッケージがいつからそこにいたのか分かりませんでした。

エラー発生時に加えた処理はものすごくシンプルです。

cy.get('hoge').clear().type(clientName);

なぜこのコードで見覚えのないパッケージのエラーが起こるのか？
過去にそんな悪いことしてないはずなのに、何の呪いなのか？
『岸辺露伴は動かない』を見ているうちに六壁坂の妖怪が取り憑いていたのか？

隠者の発見

そこで改めてコードを眺めてみると、コードの一番上、1行目にひっそりと身に覚えがないコードがあることに気づきました。

import { cli } from 'cypress';

当時コードを加えていたのは277行目。
全然1行目が見えない状態だったのです。
はて？と思って紐解いてみると、このimportされたcliの中で node_modules/ci-info/index.js が呼ばれていてエラーを起こしていました。
つまり、このimportを削除すればエラーを解消できるのです。

これで一件落着、ではなくて

importを削除してCypressを実行、無事にE2Eが走ることが分かりました。
さてこれで仕事も終わりだ、今日もよく頑張った、ちょっと歩いて飲みに、、
というわけにはいきません。

問題は、なぜこのimportが見えないところで追加されていたのか？です。

原因判明

改めて、今回加えたコードはこちらです。

cy.get('hoge').clear().type(clientName);

そしてそのこのタイピング中に、カチコチ打っていくとこんな状態になりますよね。

cy.get('hoge').clear().type(cli

この瞬間、VSCodeのコード補完によって勝手に { cli } がimportされることが分かりました。
Copilotでは見えないところにコードを勝手に挿入することはないので、VSCodeだろうと考えています。

終わりに

今回のエラーはなかなかレアケースだと思います。
でもVSCodeのコード補完が邪魔になってくるとは思いませんでした。
この手のエラーはChatGPTに相談しても解決しようがないのでは？と思ったので、メモとして残しておきます。