I'm currently facing an issue while trying to incorporate a library into my NEXTjs-TypeScript project. It functions properly during development, but upon running npm run build, I encountered the following error:
./src/pages/_app.tsx:17:52
Type error: The current file is a CommonJS module that uses 'require' calls for imports; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. You may consider using dynamic 'import("@solana/wallet-adapter-react")' instead.
To convert this file to an ECMAScript module, add the field `"type": "module"` to '/path/to/project/package.json'.
The problematic imports are as follows:
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"; // Fails to compile on `npm run build`
import { useWallet } from "@solana/wallet-adapter-react"; // Fails to compile on `npm run build`
import { SigninMessage } from "@lib/signinMessage";
import bs58 from "bs58";
import { AccountOverview } from "src/layout/account/AccountOverview";
I attempted using dynamic imports, but it disrupted the development process because it then required me to utilize await when importing 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 insights or suggestions on how to resolve this issue?