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

[Billocap]

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

1. Run cypress via pnpm run test
2. Choose "Component Testing"
3. Choose any browser
4. 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

Related to #933

[alamenai]

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]

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]

The solution proposed by @vadim-givola worked.

Does it also solve the performance issue? Like the one mentioned here vercel/next.js#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