Conflict Between antd and Next + Cypress

baharnadimi commented 4 months ago

Current behavior

 in ./node_modules/antd/es/button/index.js
Module build failed (from ./node_modules/next/dist/build/webpack/loaders/next-swc-loader.js):
Error: 
  x Using `export * from '...'` in a page is disallowed. Please use `export { default } from '...'` instead.
  | Read more: https://nextjs.org/docs/messages/export-all-in-page
   ,-[/home/baharnadimi/Projects/sepehr_admin_front/node_modules/antd/es/button/index.js:1:1]
 1 | "use client";
 2 | 
 3 | import Button from './button';
 4 | export * from './buttonHelpers';
   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 5 | export default Button;
   `----

client (webpack 5.90.0) compiled with 1 error in 1121 ms

  1) An uncaught error was detected outside of a test

  0 passing (142ms)
  1 failing

  1) An uncaught error was detected outside of a test:
     Error: The following error originated from your test code, not from Cypress.

  > Module build failed (from ./node_modules/next/dist/build/webpack/loaders/next-swc-loader.js):
Error: 
  x Using `export * from '...'` in a page is disallowed. Please use `export { default } from '...'` instead.
  | Read more: https://nextjs.org/docs/messages/export-all-in-page
   ,-[/home/baharnadimi/Projects/sepehr_admin_front/node_modules/antd/es/button/index.js:1:1]
 1 | "use client";
 2 | 
 3 | import Button from './button';
 4 | export * from './buttonHelpers';
   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 5 | export default Button;
   `----

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.
      at ./node_modules/antd/es/button/index.js (http://localhost:8080/__cypress/src/vendors-node_modules_react-icons_all-files_fa_FaTrashAlt_js-node_modules_antd_es_modal_index_-9593d0.js:13004:7)
      at __webpack_require__ (http://localhost:8080/__cypress/src/webpack.js:25:43)
      at ./node_modules/antd/es/_util/ActionButton.js (http://localhost:8080/__cypress/src/vendors-node_modules_react-icons_all-files_fa_FaTrashAlt_js-node_modules_antd_es_modal_index_-9593d0.js:11227:65)
      at __webpack_require__ (http://localhost:8080/__cypress/src/webpack.js:25:43)
      at ./node_modules/antd/es/modal/components/ConfirmCancelBtn.js (http://localhost:8080/__cypress/src/vendors-node_modules_react-icons_all-files_fa_FaTrashAlt_js-node_modules_antd_es_modal_index_-9593d0.js:16469:76)
      at __webpack_require__ (http://localhost:8080/__cypress/src/webpack.js:25:43)
      at ./node_modules/antd/es/modal/ConfirmDialog.js (http://localhost:8080/__cypress/src/vendors-node_modules_react-icons_all-files_fa_FaTrashAlt_js-node_modules_antd_es_modal_index_-9593d0.js:15736:87)
      at __webpack_require__ (http://localhost:8080/__cypress/src/webpack.js:25:43)
      at ./node_modules/antd/es/modal/confirm.js (http://localhost:8080/__cypress/src/vendors-node_modules_react-icons_all-files_fa_FaTrashAlt_js-node_modules_antd_es_modal_index_-9593d0.js:16888:72)
      at __webpack_require__ (http://localhost:8080/__cypress/src/webpack.js:25:43)

  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        1                                                                                │
  │ Passing:      0                                                                                │
  │ Failing:      1                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  1                                                                                │
  │ Video:        false                                                                            │
  │ Duration:     0 seconds                                                                        │
  │ Spec Ran:     DevicesTable.cy.tsx                                                              │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘

Desired behavior

No response

Test code to reproduce

describe("ComponentName.cy.jsx", () => {
  it("mount", () => {
    cy.mount(<SearchPanel />);
  });
  it("mount", () => {
    cy.mount(<DevicesTable />);
  });
});

Cypress Version

^13.12.0

Node version

v18

Operating System

Ubuntu 22.04.4 LTS

Debug Logs

No response

Other

No response

MikeMcC399 commented 4 months ago

@baharnadimi

It may not make any difference to your issue, but Node.js 19 is no longer supported. Node 18, 20, & 22 are the currently supported versions.

PepperAddict commented 1 month ago

Hello, I have the exact same problem and I have been scratching my head for the past two days.

I am using cypress latest version: 13.15.0
I'm using component testing with webpack bundler and nextjs framework
node version: 20
This happens on component testing that is using a package that has a dependency with this error:

x Using export * from '...' in a page is disallowed. Please use export { default } from '...' instead. | Read more: https://nextjs.org/docs/messages/export-all-in-page ,-[/Users/j{name}/Desktop/Repos/{project}node_modules/date-fns/index.mjs:233:1] 233 | export from "./subISOWeekYears.mjs"; 234 | export from "./subMilliseconds.mjs"; 235 | export from "./subMinutes.mjs"; 236 | export from "./subMonths.mjs"; : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 237 | export from "./subQuarters.mjs"; 238 | export from "./subSeconds.mjs"; 239 | export * from "./subWeeks.mjs"; `----
this happens with both swc that came with nextjs and babel

I'll try and create a sample project soon

BlackBeardo commented 1 month ago

anyone found solution or what?

getting same issue:

1 | "use client";
 2 | 
 3 | import Button from './button';
 4 | export * from './buttonHelpers';
   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 5 | export default Button;
   `----

Azodox commented 3 weeks ago

Having the same exact issue, any updates?

kaioduarte commented 1 week ago

Adding this to my next.config.js file worked for me with date-fns

if (process.env.NODE_ENV === "test") {
  config.transpilePackages = ["date-fns", "date-fns-tz"];
}

date-fns-tz is only needed if you use it.

dada1smo commented 5 days ago

In case this helps anyone, there's a relate issue open at: https://github.com/cypress-io/cypress/issues/26802

A workaround is to add an empty /pages directory at the root of the project. It immediatly solved the import error for me. I don't know if there will be consequences to this workaround tough.

cypress-io / cypress