Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Included library functions with similar names have different behaviour in dev vs production builds #56480

Open
1 task done
PenguinOfWar opened this issue Oct 5, 2023 · 1 comment
Labels
bug Issue was opened via the bug report template.

Comments

@PenguinOfWar
Copy link

Link to the code that reproduces this issue

https://github.com/PenguinOfWar/rdg-nextjs-bundle-bug

To Reproduce

  1. npm install react-data-grid
  2. Configure an editable cell grid per the common features example of react-data-grid (see reproduction repo)
  3. npm run dev, open localhost and double click to edit a name cell
  4. npm run build && npm run start, open localhost and attempt to double click to edit name cell to see the difference in behaviour

Current vs. Expected behavior

Following the steps from the previous section, I expected npm run dev and npm run build && npm run start to exhibit the same behaviour. Instead, two functions within the lib with the same name are bundled differently in development vs production.

Going through the compiled lib code with some strategic logging shows that the production build version of the code prefers the utility isCellEditable rather than the function inside DataGrid. As they accept two different arguments sets, this breaks the edit feature of the lib and showcases the issue within next.

The problem can be replicated on node 18 & 20, as well as across npm 9 & 10. Using dynamic imports does not help.

See: adazzle/react-data-grid#3356

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:22:52 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T8103
Binaries:
  Node: 20.5.1
  npm: 10.0.0
  Yarn: N/A
  pnpm: 8.1.0
Relevant Packages:
  next: 13.5.5-canary.2
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Additional context

I tested this on 13.15.4 and the canary release and could replicate on both.

@Fi1osof
Copy link

Fi1osof commented Apr 8, 2024

Workaround:

  1. Remove import "react-data-grid/lib/styles.css" from nested components.
  2. Add @import "react-data-grid/lib/styles.css" in main .scss file or main layout e.g. _app.tsx

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Development

No branches or pull requests

2 participants