- 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>
</>
);
}
▲ 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