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

**URL:** <https://forum.fuel.network/t/dynamic-require-of-crypto-is-not-supported-error-in-next-js/6785>\
**Category:** Fuel Wallet\
**Created:** [October 3, 2024, 6:30am UTC](https://forum.fuel.network/t/dynamic-require-of-crypto-is-not-supported-error-in-next-js/6785 "2024-10-03T06:30:06Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![DevilAsap](https://sea2.discourse-cdn.com/flex022/user_avatar/forum.fuel.network/devilasap/32/3588_2.png) [@DevilAsap](https://forum.fuel.network/u/DevilAsap)\
**Post date:** [October 3, 2024, 6:30am UTC](https://forum.fuel.network/t/dynamic-require-of-crypto-is-not-supported-error-in-next-js/6785/1 "2024-10-03T06:30:06Z")

</div>

- This is my \_app.js file where I am using @fuel/connectors to integrate fuel wallet inside my next.js project

```auto
'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

```auto
 ▲ 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

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

```

---

<div class="post-metadata">

**Author:** ![naz3eh](https://sea2.discourse-cdn.com/flex022/user_avatar/forum.fuel.network/naz3eh/32/2025_2.png) [@naz3eh](https://forum.fuel.network/u/naz3eh)\
**Post date:** [October 7, 2024, 10:26am UTC](https://forum.fuel.network/t/dynamic-require-of-crypto-is-not-supported-error-in-next-js/6785/2 "2024-10-07T10:26:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![arentant](https://sea2.discourse-cdn.com/flex022/user_avatar/forum.fuel.network/arentant/32/3642_2.png) [@arentant](https://forum.fuel.network/u/arentant)\
**Post date:** [October 9, 2024, 11:19am UTC](https://forum.fuel.network/t/dynamic-require-of-crypto-is-not-supported-error-in-next-js/6785/3 "2024-10-09T11:19:14Z")

</div>

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

 ![Screenshot 2024-10-09 at 15.17.37](https://us1.discourse-cdn.com/flex022/uploads/fuel/original/2X/8/863be35b734774c7928972c983e694e4c9b800db.png)

Screenshot is from official Fuel next js app example: [fuel-connectors/examples/react-next/next.config.js at main · FuelLabs/fuel-connectors · GitHub](https://github.com/FuelLabs/fuel-connectors/blob/main/examples/react-next/next.config.js)