Error in nexjs of run start

[abrahamibo]

Description

Next.js 14.2.4 (Page routing)
pnpm v8@latest

---

ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/home/ibo/Dev/project/gitlab/front/proui/app/node_modules/.pnpm/react-query-rewind@2.1.5_@tanstack[email protected][email protected][email protected]/node_modules/react-query-rewind/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

Reproduction

pnpm dev

System information

System:
OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
CPU: (16) x64 AMD Ryzen 7 PRO 6850U with Radeon Graphics
Memory: 2.28 GB / 27.17 GB
Container: Yes
Shell: 5.8.1 - /usr/bin/zsh
Binaries:
Node: 18.20.3 - ~/.nvm/versions/node/v18.20.3/bin/node
npm: 10.7.0 - ~/.nvm/versions/node/v18.20.3/bin/npm
pnpm: 8.15.8 - ~/.nvm/versions/node/v18.20.3/bin/pnpm
Browsers:
Chrome: 126.0.6478.61
Chromium: 126.0.6478.114

Additional information

No response

👨‍👧‍👦 Contributing

• 🙋‍♂️ Yes, I'd love to make a PR to fix this bug!

[johnwdunn20]

Thanks for submitting @abrahamibo, we'll take a look at this and get back to you

Cc @austin-cavanagh

[johnwdunn20]

@abrahamibo I spent some time diving into this and I was surprised that nextjs 14 always defaults to importing the commonjs version of our package instead of the es6 version. I was able to get it to work by importing the component like import ReactQueryRewind from "../../node_modules/react-query-rewind/dist/esm/index.js";. With this change, our package worked as expected.

You're probably more familiar with this version of NextJS than I am so if you have any insight into why NextJs14 defaults to the cjs version, I'd love to hear it. Obviously we'd prefer the cjs/es resolution to happen automatically.

[johnwdunn20]

@abrahamibo One more thought. I was able to import the react query rewind with:

import dynamic from 'next/dynamic'

const ReactQueryRewind = dynamic(
  () => import('react-query-rewind').then((mod) => mod.default),
  { ssr: false }
)

I noticed that the error occurs when nextjs tries to render from the server. This should ensure it renders client side.

CC @ruifan-IU