Cannot use mix ECMAScript and CommonJS module

Question

I'm trying to use a library on my NEXTJs-TypeScript-based project with no luck. It works on development but when I run bun run build I got this:

    ./src/pages/_app.tsx:17:52
Type error: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("@solana/wallet-adapter-react")' call instead.
  To convert this file to an ECMAScript module, add the field `"type": "module"` to '/path/to/project/package.json'.

These are the imports:

import { Meta } from "@lib/meta";
import { SigninOverview } from "src/layout/account/SigninOverview";
import { getCsrfToken, signIn, useSession } from "next-auth/react";
import { useWalletModal } from "@solana/wallet-adapter-react-ui"; // Doesn't compile on `bun run build`
import { useWallet } from "@solana/wallet-adapter-react"; // Doesn't compile on `bun run build`
import { SigninMessage } from "@lib/signinMessage";
import bs58 from "bs58";
import { AccountOverview } from "src/layout/account/AccountOverview";

I tried the dynamic import, but it broke the development because then I needed to use await when importing the components:

./lib/solana/index.ts:

export const walletAdapterReactUi = async () => {
    return await import("@solana/wallet-adapter-react-ui");
};

export const walletAdapterReact = async () => {
    return await import("@solana/wallet-adapter-react");
};

export const walletAdapterBase = async () => {
    return await import("@solana/wallet-adapter-base");
};

export const walletAdapterWallets = async () => {
    return await import("@solana/wallet-adapter-wallets");
};

./src/pages/_app.tsx

  21 | //import "./styles.css";
  22 |
> 23 | const App: React.FC<AppProps> = async ({ Component, pageProps }) => {
     |                                         ^
  24 |     const { WalletAdapterNetwork } = await walletAdapterBase();
  25 |     const network = WalletAdapterNetwork.Devnet;
  26 |     const { ConnectionProvider, WalletProvider } = await walletAdapterReact();
 ⨯ src/pages/_app.tsx (23:41) @ Component
 ⨯ unhandledRejection: TypeError: Cannot destructure property 'Component' of 'undefined' as it is undefined.
    at App (webpack-internal:///./src/pages/_app.tsx:52:22)

Any pointers?

Answer 1

Ok, this is tsconfig.json that solves my problem:

{
    "compilerOptions": {
        "baseUrl": ".",
        "target": "es5",
        "lib": ["dom", "dom.iterable", "ESNext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "bundler",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "incremental": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "paths": {
            "@lib/*": ["src/lib/*"],
            "@css/*": ["src/css/*"],
            "@icon/*": ["src/icon/*"]
        },
        "types": ["bun-types", "web"]
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
    "exclude": ["node_modules", ".next"]
}

I just tried the module and moduleResolution combination values.