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

alanhumphrey · 2021-08-26T16:38:27Z

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"
  }

The text was updated successfully, but these errors were encountered:

alanhumphrey · 2021-08-26T18:55:33Z

Should mention this is on Win10

jennifer-shehane · 2021-08-27T14:11:06Z

Could you make sure to update to the latest versions of the Cypress packages? This issue may have already been fixed. Thanks.

alanhumphrey · 2021-08-27T15:46:51Z

No problem. Here is my updated package.json:

{
"name": "my-vue-app",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"cy": "cypress open-ct"
},
"dependencies": {
"@cypress/vite-dev-server": "^2.0.7",
"@cypress/vue": "^3.0.3",
"cypress": "^8.3.0",
"vue": "^3.1.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.6.0",
"@vue/compiler-sfc": "^3.1.5",
"vite": "^2.1.5"
}
}

I deleted node_modules and reinstalled.

Error is still happening. Additional information:

The "cannot read property 'emit' of undefined" error appears in the runner console before executing the test
Clicking on the test shows "[vite] connecting" and "[vite] connected" in the console
The runner shows the "process is not defined" message.
This is the stack trace. (Same as before.)

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 (http://localhost:3000/__cypress/src/@fs/F:/audubon/cypress-example/vite-vue/node_modules/@cypress/vite-dev-server/client/initCypressTests.js:22:18)

alanhumphrey · 2021-08-27T16:02:06Z

FWIW - the very last error (initCypressTests.js:22:18) comes from

17 if (!CypressInstance) {
18 throw new Error('Tests cannot run without a reference to Cypress!')
19 }

Also - if I run 'cypress open' (not open-ct) all is well

alanhumphrey · 2021-08-28T17:20:30Z

The repository I was using was deprecated yesterday. Using the recommended repository (https://github.com/cypress-io/cypress-component-testing-examples.git) solves the "cannot read property 'emit' of undefined" error.

The error when the runner tries to execute a test is still there. Stack trace:

thegouge · 2021-08-30T14:55:07Z

I have also run into this problem today with Cypress 8.3.1 on a vite-vue project, also on windows 10

in my project I'm also using cypress to run unit tests on a handful of composibles, and the tests for those work great. So I think this error is tied to the rendering of mounted components to the Vite server

thegouge · 2021-08-30T16:12:12Z

I rolled back my dependencies, and cypress-ct worked for me, I re-updated my dependencies one by one to see where it would break. and from that testing the issue seems to come from @vue/compiler-sfc

when I upgraded @vue/compiler-sfc from 3.0.5 to 3.2.6 I got the
Reference Error "process is not defined" error

KaelWD · 2021-09-04T16:10:08Z

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.

alanhumphrey · 2021-09-05T16:05:03Z

Can confirm. Adding the define to vite.config.js solved the problem

sodatea · 2021-09-06T13:05:29Z

See vuejs/core#4531

It can also be fixed in @cypress/vue by shipping an additional ESM bundle for Vite

lmiller1990 · 2021-09-08T03:28:58Z

Sounds like we should be shipping an additional ESM bundle. I think we already ship one though - what needs to be different about this one?

Here's our rollup config: https://github.com/cypress-io/cypress/blob/develop/npm/vue/rollup.config.js#L47

KaelWD · 2021-09-08T03:46:55Z

This should be fixed now in Vue 3.2.10

sodatea · 2021-09-08T04:10:03Z

Sounds like we should be shipping an additional ESM bundle. I think we already ship one though - what needs to be different about this one?

😅 Sorry I missed that. Now I have to dig further to find out why Vite resolved to the CJS build of @vue/compiler-core. It shouldn't happen unless some module in the dependency chain is a CJS module.

sodatea · 2021-09-08T04:13:42Z

Got it:

cypress/npm/vite-dev-server/src/startServer.ts

Lines 35 to 43 in e216ae2

    
           // This alias is necessary to avoid a "prefixIdentifiers" issue from slots mounting 
        
           // only cjs compiler-core accepts using prefixIdentifiers in slots which vue test utils use. 
        
           // Could we resolve this usage in test-utils? 
        
           try { 
        
             finalConfig.resolve = finalConfig.resolve || {} 
        
             finalConfig.resolve.alias = { 
        
               ...finalConfig.resolve.alias, 
        
               '@vue/compiler-core': resolve(dirname(require.resolve('@vue/compiler-core')), 'dist', 'compiler-core.cjs.js'), 
        
             }

sodatea · 2021-09-08T04:29:56Z

Now that Vue 3.2.10 removes the runtime dependency on @babel/types, I think the workaround is fine.
That issue was a real problem anyway for pure CJS packages anyway.

As for removing the CJS alias in vite-dev-server, maybe it can be addressed by adding an esm-browser build for @vue/compiler-core so that the esm-bundler build can have more functionalities.

Let's discuss it in the vue-next repo later.

lmiller1990 · 2021-09-15T14:02:01Z

Confusing - so it sounds like if you update your deps to the latest version of Vue (3.2.6, for example, and the compiler-sfc, etc etc) everything is okay?

Not clear if anything actually needs to be done in our Vite dev server at this point.

olemarius · 2021-11-23T16:11:37Z

Been trying to get vue3 vite cypress working, but no matter which version I've tried I can't seem to get rid of this. Does anyone know a version that works with vue >=3.2.0 or if there's any workaround to get around this issue?

Relevant packages:

"vue": "^3.2.22",
"@cypress/vite-dev-server": "^2.2.1",
"@cypress/vue": "^3.0.5",
"cypress": "^9.1.0",
"@vitejs/plugin-vue": "^1.10.0",
"vite": "^2.6.14",

Update:
Worked after I removed

server: {
            port: serverPort,
            strictPort: true,
            
            https: {
                key: fs.readFileSync('certs/localhost-key.pem'),
                cert: fs.readFileSync('certs/localhost.pem'),
            },
            hmr: {
                host: 'localhost',
                port: 3005,
                protocol: 'wss'
            },
        },

Didn't find a way to change server config option in plugins/index.ts, so I ended up creating seperate vite config files.

alanhumphrey · 2021-11-23T17:33:58Z

I just created a new project using vite, installed the cypress bits, and it worked. I did have to tweak cypress/plugins/index.js to add startDevServer, but that was just to get cypress open-ct to work.

Anyway, it basically worked out of the box. Is there any chance ../../node_modules/component-emitter is out of date?

lmiller1990 · 2021-11-29T07:41:25Z

I have seen that emit error before. I think this is a red herring, the error is unrelated.

If you can share your minimal reproduction @olemarius, happy to take a look!

olemarius · 2021-11-29T11:58:16Z

@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.

lmiller1990 · 2023-02-22T04:09:20Z

No actionable info, closing for now.

jennifer-shehane added the component testing label Aug 27, 2021

sodatea mentioned this issue Sep 6, 2021

@vue/compiler-core cjs build 3.2.5+ throws error if bundled with vite default configuration vuejs/core#4531

Closed

lmiller1990 added CT Issue related to component testing and removed component testing labels Aug 15, 2022

lmiller1990 closed this as completed Feb 22, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

alanhumphrey commented Aug 26, 2021 •

edited by jennifer-shehane

alanhumphrey commented Aug 26, 2021

jennifer-shehane commented Aug 27, 2021

alanhumphrey commented Aug 27, 2021

alanhumphrey commented Aug 27, 2021

alanhumphrey commented Aug 28, 2021

thegouge commented Aug 30, 2021 •

edited

thegouge commented Aug 30, 2021

KaelWD commented Sep 4, 2021 •

edited

alanhumphrey commented Sep 5, 2021

sodatea commented Sep 6, 2021

lmiller1990 commented Sep 8, 2021

KaelWD commented Sep 8, 2021

sodatea commented Sep 8, 2021

sodatea commented Sep 8, 2021

sodatea commented Sep 8, 2021 •

edited

lmiller1990 commented Sep 15, 2021

olemarius commented Nov 23, 2021 •

edited

alanhumphrey commented Nov 23, 2021

lmiller1990 commented Nov 29, 2021

olemarius commented Nov 29, 2021

lmiller1990 commented Feb 22, 2023

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

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

Comments

alanhumphrey commented Aug 26, 2021 • edited by jennifer-shehane

Current behavior

Desired behavior

Test code to reproduce

Cypress Version

Other

alanhumphrey commented Aug 26, 2021

jennifer-shehane commented Aug 27, 2021

alanhumphrey commented Aug 27, 2021

alanhumphrey commented Aug 27, 2021

alanhumphrey commented Aug 28, 2021

thegouge commented Aug 30, 2021 • edited

thegouge commented Aug 30, 2021

KaelWD commented Sep 4, 2021 • edited

alanhumphrey commented Sep 5, 2021

sodatea commented Sep 6, 2021

lmiller1990 commented Sep 8, 2021

KaelWD commented Sep 8, 2021

sodatea commented Sep 8, 2021

sodatea commented Sep 8, 2021

sodatea commented Sep 8, 2021 • edited

lmiller1990 commented Sep 15, 2021

olemarius commented Nov 23, 2021 • edited

alanhumphrey commented Nov 23, 2021

lmiller1990 commented Nov 29, 2021

olemarius commented Nov 29, 2021

lmiller1990 commented Feb 22, 2023

alanhumphrey commented Aug 26, 2021 •

edited by jennifer-shehane

thegouge commented Aug 30, 2021 •

edited

KaelWD commented Sep 4, 2021 •

edited

sodatea commented Sep 8, 2021 •

edited

olemarius commented Nov 23, 2021 •

edited