[Bug]: Conflict Between React-Icons and Next + Cypress

Billocap commented 1 month ago

Describe the bug

The following error message appeared when I tried running a Cypress spec that used one of the icons from react-icons:

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

  > Module build failed (from ./node_modules/.pnpm/next@14.2.2_react-dom@18.2.0_react@18.2.0/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
   ,-[.\node_modules\.pnpm\react-icons@5.1.0_react@18.2.0\node_modules\react-icons\lib\index.mjs:1:1]
 1 | export * from "./iconsManifest.mjs";
   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 2 | export * from "./iconBase.mjs";
 3 | export * from "./iconContext.mjs";
   `----

  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
   ,-[.\node_modules\.pnpm\react-icons@5.1.0_react@18.2.0\node_modules\react-icons\lib\index.mjs:1:1]
 1 | export * from "./iconsManifest.mjs";
 2 | export * from "./iconBase.mjs";
   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 3 | export * from "./iconContext.mjs";
   `----

  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
   ,-[.\node_modules\.pnpm\react-icons@5.1.0_react@18.2.0\node_modules\react-icons\lib\index.mjs:1:1]
 1 | export * from "./iconsManifest.mjs";
 2 | export * from "./iconBase.mjs";
 3 | export * from "./iconContext.mjs";
   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   `----

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.

The conflict appears to be between Cypress and React-Icons once the page rendered by next at http://localhost:3000 opens without issues.

Expected behavior

The spec should have run without errors.

Minimal sample repository URL

https://github.com/Billocap/react-icons-cypress-next-bug

Steps To Reproduce

Run cypress via pnpm run test
Choose "Component Testing"
Choose any browser
Run the spec named ComponentName.cy.js

Package version

v5.1.0

Relevant log output

No response

Additional context

pnpm@8.15.3 node@18.17.0

alamenai commented 1 month ago

Hi, we are facing the same issue:

The reason behind it is the incompatibility between NextJS and React-Icons in this file :

index.ts

export * from "./iconsManifest";
export * from "./iconBase";
export * from "./iconContext";

If we add pages folder the issue went but it is not the right solution.

vadim-givola commented 1 month ago

I managed to fix it by changing the way you import icons in your components. Try to use this one: https://github.com/react-icons/react-icons?tab=readme-ov-file#installation-for-meteorjs-gatsbyjs-etc

Billocap commented 1 month ago

The solution proposed by @vadim-givola worked.

Does it also solve the performance issue? Like the one mentioned here https://github.com/vercel/next.js/issues/48748

PS: I updated the version of node in the sample repository also I left the fix in a separate branch called bugfix-proposed-fix

react-icons / react-icons