Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't resolve modules with Next js 13.1.5 #1908

Closed
t0rbik opened this issue Jan 27, 2023 · 12 comments
Closed

Can't resolve modules with Next js 13.1.5 #1908

t0rbik opened this issue Jan 27, 2023 · 12 comments
Assignees
Labels
protocol-version: v2 type: bug Something isn't working

Comments

@t0rbik
Copy link

t0rbik commented Jan 27, 2023

Describe the bug
When trying to use WalletConnectConnector with wagmi in latest Next.js 13.1.5 with experimental appDir enabled compiler throws several warnings, saying: Module not found: Can't resolve

Version
Looking at package-lock there're:
"@walletconnect/ethereum-provider": "^1.8.0",
"@walletconnect/universal-provider": "^2.2.1",

package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"ethers": "^5.7.2",
"next": "^13.1.5",
"react": "18.2.0",
"react-dom": "18.2.0",
"wagmi": "^0.11.0"
},
"devDependencies": {
"@types/node": "18.0.1",
"@types/react": "18.0.14",
"@types/react-dom": "18.0.5",
"eslint": "8.19.0",
"eslint-config-next": "12.2.0",
"typescript": "^4.9.4"
}
}

To Reproduce
Steps to reproduce the behavior:
minimal reproducible example

  1. Go to minimal reproducible example
  2. Click on edit in workspace or open workspace. You need to see console.
  3. Run the app
  4. Watch console for errors
  5. See the error:
warn  - ./node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/db.js
Module not found: Can't resolve 'lokijs' in '/home/runner/walletconnect-issue/node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js'

Import trace for requested module:
./node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/db.js
./node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/index.js
./node_modules/@walletconnect/keyvaluestorage/dist/cjs/index.js
./node_modules/@walletconnect/sign-client/node_modules/@walletconnect/core/dist/index.cjs.js
./node_modules/@walletconnect/sign-client/dist/index.cjs.js
./node_modules/@walletconnect/universal-provider/dist/index.cjs.js
./node_modules/@wagmi/connectors/dist/walletConnect.js
./node_modules/@wagmi/core/dist/connectors/walletConnect.js
./node_modules/wagmi/dist/connectors/walletConnect.js
./app/(components)/WagmiProvider.tsx

./node_modules/cross-fetch/node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in '/home/runner/walletconnect-issue/node_modules/cross-fetch/node_modules/node-fetch/lib'

Import trace for requested module:
./node_modules/cross-fetch/node_modules/node-fetch/lib/index.js
./node_modules/cross-fetch/dist/node-ponyfill.js
./node_modules/@walletconnect/jsonrpc-http-connection/dist/cjs/http.js
./node_modules/@walletconnect/jsonrpc-http-connection/dist/cjs/index.js
./node_modules/@walletconnect/ethereum-provider/dist/cjs/index.js
./node_modules/@wagmi/connectors/dist/walletConnect.js
./node_modules/@wagmi/core/dist/connectors/walletConnect.js
./node_modules/wagmi/dist/connectors/walletConnect.js
./app/(components)/WagmiProvider.tsx

./node_modules/pino/lib/tools.js
Module not found: Can't resolve 'pino-pretty' in '/home/runner/walletconnect-issue/node_modules/pino/lib'

Import trace for requested module:
./node_modules/pino/lib/tools.js
./node_modules/pino/pino.js
./node_modules/@walletconnect/universal-provider/dist/index.cjs.js
./node_modules/@wagmi/connectors/dist/walletConnect.js
./node_modules/@wagmi/core/dist/connectors/walletConnect.js
./node_modules/wagmi/dist/connectors/walletConnect.js
./app/(components)/WagmiProvider.tsx

Expected behavior
No warns in the console

@t0rbik t0rbik added the type: bug Something isn't working label Jan 27, 2023
@amzfcy
Copy link

amzfcy commented Feb 17, 2023

Will this warning persist in the local environment?

@codetaskforce
Copy link

I had a similar problem if not the same, after attempting a next 12 > 13 transition today.

No error showed on the client console just only on VS console. UI appears to work as should so is this a @ wagmi/@ walletconnect update needed to combat the below error?

warn  - ./node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/db.js
Module not found: Can't resolve 'lokijs' in '...\y-next13\node_modules\@walletconnect\keyvaluestorage\dist\cjs\node-js'

Import trace for requested module:
./node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/db.js
./node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/index.js
./node_modules/@walletconnect/keyvaluestorage/dist/cjs/index.js
./node_modules/@walletconnect/core/dist/index.cjs.js
./node_modules/@walletconnect/sign-client/dist/index.cjs.js
./node_modules/@walletconnect/universal-provider/dist/index.cjs.js
./node_modules/@wagmi/connectors/dist/walletConnect.js
./node_modules/@wagmi/core/dist/connectors/walletConnect.js
./node_modules/wagmi/dist/connectors/walletConnect.js
./node_modules/@rainbow-me/rainbowkit/dist/index.js
./src/components/header.tsx
./src/app/layout.tsx

./node_modules/cross-fetch/node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in '...\y-next13\node_modules\cross-fetch\node_modules\node-fetch\lib'

Import trace for requested module:
./node_modules/cross-fetch/node_modules/node-fetch/lib/index.js
./node_modules/cross-fetch/dist/node-ponyfill.js
./node_modules/@walletconnect/jsonrpc-http-connection/dist/cjs/http.js
./node_modules/@walletconnect/jsonrpc-http-connection/dist/cjs/index.js
./node_modules/@walletconnect/universal-provider/dist/index.cjs.js
./node_modules/@wagmi/connectors/dist/walletConnect.js
./node_modules/@wagmi/core/dist/connectors/walletConnect.js
./node_modules/wagmi/dist/connectors/walletConnect.js
./node_modules/@rainbow-me/rainbowkit/dist/index.js
./src/components/header.tsx
./src/app/layout.tsx

./node_modules/pino/lib/tools.js
Module not found: Can't resolve 'pino-pretty' in '...\y-next13\node_modules\pino\lib'

Import trace for requested module:
./node_modules/pino/lib/tools.js
./node_modules/pino/pino.js
./node_modules/@walletconnect/universal-provider/dist/index.cjs.js
./node_modules/@wagmi/connectors/dist/walletConnect.js
./node_modules/@wagmi/core/dist/connectors/walletConnect.js
./node_modules/wagmi/dist/connectors/walletConnect.js
./node_modules/@rainbow-me/rainbowkit/dist/index.js
./src/components/header.tsx
./src/app/layout.tsx

Anyway this cured it for me:-

yarn add pino-pretty lokijs@1.x encoding

👨‍💻

@t0rbik
Copy link
Author

t0rbik commented Feb 19, 2023

Will this warning persist in the local environment?

I encountered it initially in local environment. Didn't try adding those packages as @codetaskforce solution states, probably can add those to peer deps?

@Dope-Ass-Ninja
Copy link

I'm having this same issue in my local environment. Doesn't seem to affect production builds but the error occurs in the build log as well.

@solvman
Copy link

solvman commented Mar 14, 2023

the same issue... @codetaskforce solution seem to fix the dependency issue.

@Xiawpohr
Copy link

I find another solution if you don't want to install dependencies not related to your project.

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

module.exports = nextConfig;

It works for me. No error shows in the console.

@notamicrodose
Copy link

Same issue here... the issue might be related to the bundler not being able to resolve the dependencies properly in a browser environment. However @codetaskforce 's solution works for me as well, so no point in investigating further lol

@boogoogle
Copy link

  • I think it is the problem of Next.js, it can't divide client dependencies and server dependencies in deep.
  • I have tried the same code in Vite + React+TS project, it works with no error.
  • finally thanks to @Xiawpohr , finally we fix the shit of Next.js by ourselves

@glitch-txs
Copy link
Member

glitch-txs commented Aug 6, 2023

It's seems like you guys found a workaround, if the issue persists and you'd like a different solution we can check on wagmi's WalletConnect connector.

tldr: Next.js will render your app first on server side, this is triggered when the init function is called in a node.js environment. If you're using ethereum-provider you can call it inside useEffect (which won't run on server side) or by checking that the window object is defined before initializing the ethereum provider.

Closing for now as completed.

@o-az
Copy link

o-az commented Sep 9, 2023

@Xiawpohr's solution didn't work for me. This is what worked:

const nextConfig = {
  webpack: (config, context) => {
    if (config.plugins) {
      config.plugins.push(
        new context.webpack.IgnorePlugin({
          resourceRegExp: /^(lokijs|pino-pretty|encoding)$/,
        }),
      )
    }
    return config
  },
}

webpack IgnorePlugin API docs

@transmental
Copy link

I had a similar problem if not the same, after attempting a next 12 > 13 transition today.

No error showed on the client console just only on VS console. UI appears to work as should so is this a @ wagmi/@ walletconnect update needed to combat the below error?

warn  - ./node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/db.js
Module not found: Can't resolve 'lokijs' in '...\y-next13\node_modules\@walletconnect\keyvaluestorage\dist\cjs\node-js'

Import trace for requested module:
./node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/db.js
./node_modules/@walletconnect/keyvaluestorage/dist/cjs/node-js/index.js
./node_modules/@walletconnect/keyvaluestorage/dist/cjs/index.js
./node_modules/@walletconnect/core/dist/index.cjs.js
./node_modules/@walletconnect/sign-client/dist/index.cjs.js
./node_modules/@walletconnect/universal-provider/dist/index.cjs.js
./node_modules/@wagmi/connectors/dist/walletConnect.js
./node_modules/@wagmi/core/dist/connectors/walletConnect.js
./node_modules/wagmi/dist/connectors/walletConnect.js
./node_modules/@rainbow-me/rainbowkit/dist/index.js
./src/components/header.tsx
./src/app/layout.tsx

./node_modules/cross-fetch/node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in '...\y-next13\node_modules\cross-fetch\node_modules\node-fetch\lib'

Import trace for requested module:
./node_modules/cross-fetch/node_modules/node-fetch/lib/index.js
./node_modules/cross-fetch/dist/node-ponyfill.js
./node_modules/@walletconnect/jsonrpc-http-connection/dist/cjs/http.js
./node_modules/@walletconnect/jsonrpc-http-connection/dist/cjs/index.js
./node_modules/@walletconnect/universal-provider/dist/index.cjs.js
./node_modules/@wagmi/connectors/dist/walletConnect.js
./node_modules/@wagmi/core/dist/connectors/walletConnect.js
./node_modules/wagmi/dist/connectors/walletConnect.js
./node_modules/@rainbow-me/rainbowkit/dist/index.js
./src/components/header.tsx
./src/app/layout.tsx

./node_modules/pino/lib/tools.js
Module not found: Can't resolve 'pino-pretty' in '...\y-next13\node_modules\pino\lib'

Import trace for requested module:
./node_modules/pino/lib/tools.js
./node_modules/pino/pino.js
./node_modules/@walletconnect/universal-provider/dist/index.cjs.js
./node_modules/@wagmi/connectors/dist/walletConnect.js
./node_modules/@wagmi/core/dist/connectors/walletConnect.js
./node_modules/wagmi/dist/connectors/walletConnect.js
./node_modules/@rainbow-me/rainbowkit/dist/index.js
./src/components/header.tsx
./src/app/layout.tsx

Anyway this cured it for me:-

yarn add pino-pretty lokijs@1.x encoding

👨‍💻

this fixed it for me

@matthewlilley
Copy link

It's seems like you guys found a workaround, if the issue persists and you'd like a different solution we can check on wagmi's WalletConnect connector.

tldr: Next.js will render your app first on server side, this is triggered when the init function is called in a node.js environment. If you're using ethereum-provider you can call it inside useEffect (which won't run on server side) or by checking that the window object is defined before initializing the ethereum provider.

Closing for now as completed.

Yeah, it would be nice to fix this for the wagmi connector. It's only going to run client-side so these deps and ignoring them shouldn't be necessary.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
protocol-version: v2 type: bug Something isn't working
Projects
None yet
Development

No branches or pull requests