Dynamic require of "crypto" is not supported Error in next.js

  • This is my _app.js file where I am using @fuel/connectors to integrate fuel wallet inside my next.js project
'use client'
import Head from "next/head";
import "@/styles/main.css";
import ModalContainer from "@/components/common/Modal";
import ToasterContainer from "@/components/common/Toaster";
import Navbar from "@/components/common/Navbar";
import Footer from "@/components/common/Footer";
import { ToasterContextProvider } from "@/context/ToasterContext";
import { Toaster } from "react-hot-toast";
import { defaultConnectors } from "@fuels/connectors";
import { FuelProvider } from "@fuels/react"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
const queryClient = new QueryClient();
export default function App({ Component, pageProps }) {
    return (
        <>
            <Head>
                <meta
                    name="viewport"
                    content="width=device-width, initial-scale=1"
                />
            </Head>
            <ToasterContextProvider>
                <QueryClientProvider client={queryClient}>
                    <FuelProvider
                        theme="dark"
                        fuelConfig={{
                        connectors: defaultConnectors({
                            devMode: true,
                        }),
                        }}
                    >
                        <Navbar />
                        <ToasterContainer />
                        <Toaster position="bottom-right" reverseOrder={true} />
                        <Component {...pageProps} />
                        <Footer />
                        <ModalContainer />
                    </FuelProvider>
                 </QueryClientProvider>
            </ToasterContextProvider>
        </>
    );
}

  • The error
 ▲ Next.js 14.2.14
  - Local:        http://localhost:3000
  - Environments: .env

 ✓ Starting...
 ✓ Ready in 1190ms
 ○ Compiling /_error ...
 ✓ Compiled / in 2s (3717 modules)
using deprecated parameters for the initialization function; pass a single object instead
(node:51263) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
 ⨯ Error: Dynamic require of "crypto" is not supported
    at file:///Users/divy/Developer/lync/fuel_marketplace/Marketplace-nextjs/node_modules/@fuels/connectors/dist/index.mjs:1:1462
    at file:///Users/divy/Developer/lync/fuel_marketplace/Marketplace-nextjs/node_modules/@fuels/connectors/dist/index.mjs:1:68267
    at t.exports.self.nacl (file:///Users/divy/Developer/lync/fuel_marketplace/Marketplace-nextjs/node_modules/@fuels/connectors/dist/index.mjs:1:68381)
    at ../../node_modules/.pnpm/tweetnacl@1.0.3/node_modules/tweetnacl/nacl-fast.js (file:///Users/divy/Developer/lync/fuel_marketplace/Marketplace-nextjs/node_modules/@fuels/connectors/dist/index.mjs:1:68384)
    at file:///Users/divy/Developer/lync/fuel_marketplace/Marketplace-nextjs/node_modules/@fuels/connectors/dist/index.mjs:1:1562
    at file:///Users/divy/Developer/lync/fuel_marketplace/Marketplace-nextjs/node_modules/@fuels/connectors/dist/index.mjs:1:97943
    at ModuleJob.run (node:internal/modules/esm/module_job:262:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:482:26)

  • The version of dependencies I have used
"dependencies": {
    "@fuel-wallet/sdk": "^0.16.0",
    "@fuels/assets": "^0.20.0",
    "@fuels/connectors": "^0.29.2",
    "@fuels/react": "^0.29.2",
    "@moralisweb3/common-evm-utils": "^2.18.1",
    "@moralisweb3/next": "^2.18.1",
    "@tanstack/react-query": "^5.59.0",
    "alchemy-sdk": "^2.6.1",
    "axios": "^1.3.4",
    "eslint": "8.36.0",
    "eslint-config-next": "13.2.4",
    "ethers": "^5.4.0",
    "fuels": "^0.94.8",
    "moralis": "^2.18.1",
    "next": "^14.2.14",
    "next-auth": "^4.24.8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hot-toast": "^2.4.0"
  }

iirc this is a wagmi issue. can you please make sure you are on the latest versions of wagmi? also, other team had a workaround for this, will use that if the error still persists

In next configs of your app add @fuels/connectors and @fuels/react in transpilePackages array, like this:

Screenshot is from official Fuel next js app example: fuel-connectors/examples/react-next/next.config.js at main · FuelLabs/fuel-connectors · GitHub