Unable to use package with Next.js: `ERR_REQUIRE_ESM`

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"
  }
}

[pksjce]

Took a stab at this since it was relevant for https://github.com/primer/react/pull/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.

[siddharthkp]

Can confirm this is related to https://github.com/primer/react/pull/1700