Unable to use package with Next.js: ERR_REQUIRE_ESM

[lhjt]

Describe the bug
When using this package with next.js (tested 10-12), it fails to build, producing the error ERR_REQUIRE_ESM. I have not found a configuration where this issue does not persist.

I have also tried adding a custom .babelrc with the stock configuration to disable compilation with SWC, but the issue persists.

Further Logs

Error [ERR_REQUIRE_ESM]: require() of ES Module /home/user/repos/projects/ndocs/node_modules/@primer/behaviors/dist/utils/index.js from /home/user/repos/projects/ndocs/node_modules/@primer/react/lib/hooks/useOpenAndCloseFocus.js not supported.
Instead change the require of index.js in /home/user/repos/projects/ndocs/node_modules/@primer/react/lib/hooks/useOpenAndCloseFocus.js to a dynamic import() which is available in all CommonJS modules.

To Reproduce
Steps to reproduce the behavior:

1. Create a new next.js app using the cli
   a. npx create-next-app@latest --typescript

2. Cd into the project folder and add this package to the project:
   a. yarn add @primer/react react react-dom styled-components

3. Replace the contents of src/_app.tsx with the following:

   Snippet

     import { ThemeProvider } from "@primer/react";
     import type { AppProps } from "next/app";
     import "../styles/globals.css";
     
     function MyApp({ Component, pageProps }: AppProps) {
         return (
             <ThemeProvider>
                 <Component {...pageProps} />
             </ThemeProvider>
         );
     }
     
     export default MyApp;

4. Build the project with yarn build, observe console as it fails.

Expected behavior
Project builds successfully without errors.

Screenshots
N/A, refer to logs.

Desktop (please complete the following information):

• OS: Ubuntu 20.04.3 LTS
• Browser: N/A
• Version: 34.1.0

Additional context

package.json

{
  "name": "ndocs",
  "private": true,
  "scripts": {
      "dev": "next dev",
      "build": "next build",
      "start": "next start",
      "lint": "next lint"
  },
  "dependencies": {
      "@primer/react": "^34.1.0",
      "next": "^12.0.7",
      "react": "17.0.2",
      "react-dom": "17.0.2",
      "styled-components": "^5.3.3"
  },
  "devDependencies": {
      "@types/node": "17.0.4",
      "@types/react": "17.0.38",
      "eslint": "8.5.0",
      "eslint-config-next": "12.0.7",
      "typescript": "4.5.4"
  }
}

[anselbrandt]

I believe this has to do with an issue related to how Next.js imports modules.

A workaround would be to import components individually from the lib subfolder:

// using import syntax
import Box from '@primer/react/lib/Box'
import Flex from '@primer/react/lib/Flex'

[lhjt]

Ah, I see. Thank you, this workaround works!

[lhjt]

This issue was introduced in v34.0.1 of this library (just tested using v34.0.0, and the issue does not persist.)

[siddharthkp]

This issue was introduced in v34.0.1 of this library (just tested using v34.0.0, and the issue does not persist.

Hi! Thanks for reporting this, will try to debug this with Next 👍

[siddharthkp]

Can confirm this is related to #1700

[SferaDev]

I can confirm this also happens on remix.run

[pksjce]

Took a stab at this since it was relevant for #1771

The core of the problem is that nextjs does not compile anything in node_modules. @primer/behaviors has only an esm bundle available.

Technically https://github.com/martpie/next-transpile-modules#readme should solve the problem but it still threw the same error.

So I built up @primer/behaviors in a similar manner to @primer/react in the linked PR. It seems to have solved the issue! 🍏
Next steps are to polish the PR and test it thoroughly to prevent any edge cases.