question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

vite-dev-server "process is not defined" when attempting to execute vue test script

See original GitHub issue

Current behavior

I’m running the example project found here:

https://github.com/cypress-io/cypress-component-examples/tree/main/vite-vue

When I run cypress open-ct the test browser opens. Selecting the HellowWorld.spec.js test results in a: Reference Error “process is not defined” message.

The console shows:

5cypress_runner.js:194180 Uncaught TypeError: Cannot read property 'emit' of undefined
    at Socket.<anonymous> (cypress_runner.js:194180)
    at Socket.../../node_modules/component-emitter/index.js.Emitter.emit (cypress_runner.js:30628)
    at Socket.emit (cypress_runner.js:202114)
    at Socket.emitEvent (cypress_runner.js:201863)
    at Socket.onevent (cypress_runner.js:201850)
    at Socket.onpacket (cypress_runner.js:201814)
    at Manager.../../node_modules/component-emitter/index.js.Emitter.emit (cypress_runner.js:30628)
    at Manager.emitReserved (cypress_runner.js:202127)
    at Manager.ondecoded (cypress_runner.js:201406)
    at Decoder.../../node_modules/component-emitter/index.js.Emitter.emit (cypress_runner.js:30628)
    at Decoder.add (cypress_runner.js:202440)
    at Manager.ondata (cypress_runner.js:201398)
    at Socket.../../node_modules/component-emitter/index.js.Emitter.emit (cypress_runner.js:30628)
    at Socket.onPacket (cypress_runner.js:199329)
    at WS.<anonymous> (cypress_runner.js:199138)
    at WS.../../node_modules/component-emitter/index.js.Emitter.emit (cypress_runner.js:30628)

The stack trace is:

   at node_modules/@babel/types/lib/definitions/core.js (http://localhost:3000/__cypress/src/node_modules/.vite/@cypress_vue.js?v=a27e8a53:6670:22)
    at __require (http://localhost:3000/__cypress/src/node_modules/.vite/chunk-75565K3H.js?v=a27e8a53:12:45)
    at node_modules/@babel/types/lib/definitions/index.js (http://localhost:3000/__cypress/src/node_modules/.vite/@cypress_vue.js?v=a27e8a53:9637:6)
    at __require (http://localhost:3000/__cypress/src/node_modules/.vite/chunk-75565K3H.js?v=a27e8a53:12:45)
    at node_modules/@babel/types/lib/builders/builder.js (http://localhost:3000/__cypress/src/node_modules/.vite/@cypress_vue.js?v=a27e8a53:9666:25)
    at __require (http://localhost:3000/__cypress/src/node_modules/.vite/chunk-75565K3H.js?v=a27e8a53:12:45)
    at node_modules/@babel/types/lib/builders/generated/index.js (http://localhost:3000/__cypress/src/node_modules/.vite/@cypress_vue.js?v=a27e8a53:9954:21)
    at __require (http://localhost:3000/__cypress/src/node_modules/.vite/chunk-75565K3H.js?v=a27e8a53:12:45)
    at node_modules/@babel/types/lib/utils/react/cleanJSXElementLiteralChild.js (http://localhost:3000/__cypress/src/node_modules/.vite/@cypress_vue.js?v=a27e8a53:10720:23)
    at __require (http://localhost:3000/__cypress/src/node_modules/.vite/chunk-75565K3H.js?v=a27e8a53:12:45)
From previous event:
    at Object.runScripts (http://localhost:3000/__cypress/runner/cypress_runner.js:182127:22)
    at $Cypress.onSpecWindow (http://localhost:3000/__cypress/runner/cypress_runner.js:171108:19)
    at <unknown> (http://localhost:3000/__cypress/src/@fs/F:/audubon/cypress-example/vite-vue/node_modules/@cypress/vite-dev-server/client/initCypressTests.js:22:18)

Desired behavior

The test should execute

Test code to reproduce

See above - I’m using the example code. My only modification to the code is to add

“cy” : “cypress open-ct”

to the scripts section of package.json

I execute the following from a visual studio terminal

npm run cy

Cypress Version

8.0.0

Other

Here are the dependencies from package.json:

 "dependencies": {
    "@cypress/vite-dev-server": "^2.0.2",
    "@cypress/vue": "^3.0.0-beta.3",
    "cypress": "^8.0.0",
    "vue": "^3.1.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.2.1",
    "@vue/compiler-sfc": "^3.1.5",
    "vite": "^2.1.5"
  }

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:1
  • Comments:20 (8 by maintainers)

github_iconTop GitHub Comments

5reactions
KaelWDcommented, Sep 4, 2021

I’m getting this too. Looking through the stack traces, it goes like this:

  • @cypress/vue
  • @vue/test-utils
  • vue
  • @vue/compiler-dom
  • @vue/compiler-core
  • @babel/types

@babel/types added process.env.BABEL_TYPES_8_BREAKING in v7.8.0

Not sure why this is needed at runtime, but you can work around it by adding
define: { 'process.env.BABEL_TYPES_8_BREAKING': 'false' } to the vite config.

0reactions
olemariuscommented, Nov 29, 2021

@lmiller1990 I think you’re right, it’s unrelated. It worked after I removed the ssl certs but the emit error persisted if I remember correctly. If you still would like a reproduction I can try to put that together, but can’t promise when as things are a bit busy right now.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Vue Uncaught ReferenceError: process is not defined
If you are using Vite, use import.meta.env instead, process.env is removed. And make sure variables start with VITE_ in .env file.
Read more >
Getting Started with Vitest | Vue Mastery
At a high level, Vitest is Jest-compatible and comes with out-of the-box ESM, Typescript, and JSX support, and it's powered by esbuild. It...
Read more >
Build and Deploy a Single Page App with Vue 3 + Vite and Pinia
Learn how to build, test, and deploy a single page bookstore app ... Then select vue as the variant, since we'll not be...
Read more >
Server Options - Vite
This can be set via the CLI using --host 0.0.0.0 or --host . ... If not in middleware mode, Vite will attempt to...
Read more >
Changelog - Cypress Documentation
In Cypress 12, we enforce running tests in a clean browser context through ... When a chromium based browser tab or process crashes,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found