avarobinson / account-kit-quickstart

NextJS template for embedded accounts UI components alpha quickstart guide
0 stars 1 forks source link

Modules not found: encoding, pino-pretty #1

Open bmarcot opened 1 day ago

bmarcot commented 1 day ago

After cloning the repo and running the setup commands, I am getting these missing modules errors when compiling the example. Any thoughts?

 GET / 200 in 18838ms
 ⚠ ./node_modules/@metamask/sdk/dist/node/es/metamask-sdk.js
Module not found: Can't resolve 'encoding' in '/home/bjm/Code/account-kit-app/node_modules/@metamask/sdk/dist/node/es'

Import trace for requested module:
./node_modules/@metamask/sdk/dist/node/es/metamask-sdk.js
./node_modules/@wagmi/connectors/dist/esm/metaMask.js
./node_modules/@wagmi/connectors/dist/esm/exports/index.js
./node_modules/wagmi/dist/esm/exports/connectors.js
./node_modules/@account-kit/react/dist/esm/components/auth/card/eoa.js
./node_modules/@account-kit/react/dist/esm/components/auth/card/steps.js
./node_modules/@account-kit/react/dist/esm/components/auth/card/index.js

./node_modules/pino/lib/tools.js
Module not found: Can't resolve 'pino-pretty' in '/home/bjm/Code/account-kit-app/node_modules/pino/lib'

Import trace for requested module:
./node_modules/pino/lib/tools.js
./node_modules/pino/pino.js
./node_modules/@walletconnect/logger/dist/index.es.js
./node_modules/@walletconnect/universal-provider/dist/index.es.js
./node_modules/@walletconnect/ethereum-provider/dist/index.es.js
./node_modules/@wagmi/connectors/dist/esm/walletConnect.js
./node_modules/@wagmi/connectors/dist/esm/exports/index.js
./node_modules/wagmi/dist/esm/exports/connectors.js
./node_modules/@account-kit/react/dist/esm/components/auth/card/eoa.js
./node_modules/@account-kit/react/dist/esm/components/auth/card/steps.js
./node_modules/@account-kit/react/dist/esm/components/auth/card/index.js
 GET / 200 in 128ms
bmarcot commented 1 day ago

The issue has been resolved by adding the following lines to next.config.mjs:

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.externals.push("pino-pretty", "encoding");
    return config;
  },
};

export default nextConfig;