Cypress component tests fail to run when using @react-data-table-component -- ^7.5.2

[manishagupta016]

Current behavior

Running Cypress component tests (Cypress ^10.3.0) results in the following error message for all the tests:

"Cannot read properties of undefined (reading 'REACT_APP_SC_ATTR')"

at <unknown> (http://localhost:3000/__cypress/src/node_modules/.vite/deps/react-data-table-component.js?v=22eeef94:649:56)

Desired behavior

The cypress component tests should run correctly

Test code to reproduce

 "@cypress/react": "^6.0.0",
 "cypress": "^10.3.0",
 "vite": "^2.9.9",
"react": "^18.1.0",
"react-data-table-component": "^7.5.2",
 "styled-components": "^5.3.5",

Cypress Version

^10.3.0

Other

cypress config

 supportFile: "cypress/support/component.js",
        specPattern: "src/**/*.test.{js,jsx}",
        devServer  : {
            framework: "react",
            bundler  : "vite"
        },
        viewportHeight: 600,
        viewportWidth : 800,
        video         : false,

No response

[astone123]

This appears to be specific to Vite. Everything worked fine in my project using Webpack. I'm still looking into the issue

[astone123]

Was able to reproduce this issue using React 17 and Vite with the dependencies mentioned. It looks like the actual error might be happening in Styled Components here.

[lmiller1990]

Possibly related: styled-components/styled-components#3744

Seems this is a more general Vite problem than something specific to Cypress? I did get styled-components working in a fresh React 18 + Vite app, though. Hm.

[lmiller1990]

Update: I went into node_modules/styled-components/dist/styled-components.browser.esm.js and did console.log(typeof process) which gives object - this is not what you'd expect, in a regular Vite app, it's undefined. Something, somewhere, is defining a process object.

I wonder if https://www.npmjs.com/package/@emotion/is-prop-valid is getting pulled in somewhere, and defining process. I looked at the that code base, and it does not define process, but that could be our source maps just getting confused, or something.

[lmiller1990]

I couldn't find out what the problem is exactly, but I have a work around for now: https://github.com/cypress-io/cypress/compare/styled-components?expand=1

In your vite.config.js, you can defensively rewrite process.env to {} to ensure this error doesn't occur using @rollup/plugin-replace. Example commit.

import { defineConfig } from 'vite'
import replace from '@rollup/plugin-replace'
import reactPlugin from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    replace({
     values: {
        'process.env': `(process.env || {})`,
      }, 
    }),
    reactPlugin({
      jsxRuntime: 'classic',
    }),
  ],
})

I'm not sure if this has any side effects - there's a lot of ways to configure styled-components, but this works, at least with the minimal example I tested with:

[lmiller1990]

I think this was related to Vite. Vite 3 is out, I wonder if this is fixed?

Happy to reopen if needed.