Can't resolve 'bufferutil' and 'utf-8-validate'

[AuroraLantean]

Ethers Version

6.8.0

Search Terms

bufferutil

Describe the Problem

No error is found on my client side console.
These below are from my NextJs server side console.
I am not sure if there are errors or something else...

./node_modules/.pnpm/ws@8.5.0/node_modules/ws/lib/buffer-util.js
Module not found: Can't resolve 'bufferutil' in '/mnt/sda3/nextJs/demo1/node_modules/.pnpm/ws@8.5.0/node_modules/ws/lib'

Import trace for requested module:
./node_modules/.pnpm/ws@8.5.0/node_modules/ws/lib/buffer-util.js
./node_modules/.pnpm/ws@8.5.0/node_modules/ws/lib/receiver.js
./node_modules/.pnpm/ws@8.5.0/node_modules/ws/wrapper.mjs
./node_modules/.pnpm/ethers@6.8.0/node_modules/ethers/lib.esm/providers/ws.js
./node_modules/.pnpm/ethers@6.8.0/node_modules/ethers/lib.esm/providers/provider-websocket.js
./node_modules/.pnpm/ethers@6.8.0/node_modules/ethers/lib.esm/providers/index.js
./node_modules/.pnpm/ethers@6.8.0/node_modules/ethers/lib.esm/ethers.js
./node_modules/.pnpm/ethers@6.8.0/node_modules/ethers/lib.esm/index.js
./lib/ethers.ts
./components/web3/ethereum.tsx

./node_modules/.pnpm/ws@8.5.0/node_modules/ws/lib/validation.js
Module not found: Can't resolve 'utf-8-validate' in '/mnt/sda3/nextJs/demo1/node_modules/.pnpm/ws@8.5.0/node_modules/ws/lib'

Import trace for requested module:
./node_modules/.pnpm/ws@8.5.0/node_modules/ws/lib/validation.js
./node_modules/.pnpm/ws@8.5.0/node_modules/ws/lib/receiver.js
./node_modules/.pnpm/ws@8.5.0/node_modules/ws/wrapper.mjs
./node_modules/.pnpm/ethers@6.8.0/node_modules/ethers/lib.esm/providers/ws.js
./node_modules/.pnpm/ethers@6.8.0/node_modules/ethers/lib.esm/providers/provider-websocket.js
./node_modules/.pnpm/ethers@6.8.0/node_modules/ethers/lib.esm/providers/index.js
./node_modules/.pnpm/ethers@6.8.0/node_modules/ethers/lib.esm/ethers.js
./node_modules/.pnpm/ethers@6.8.0/node_modules/ethers/lib.esm/index.js
./lib/ethers.ts
./components/web3/ethereum.tsx

Code Snippet

Inside NextJs repo/components/web3/ethereum.tsx

'use client'
import { ethersInit, getChainObj } from '@/lib/ethers';

...
const EthereumDiv = (props: Props) => {
 const effectRan = useRef(false)
 useEffect(() => {
    console.log("useEffect ran")
    if (effectRan.current === true) {
      const initRun = async () => {
        const out = await ethersInit(); ...
      }
      initRun()
    }
    return () => {
      lg("unmounted useeffect()...")
      effectRan.current = true
    }
  }, []);
}

### Contract ABI

```shell
not used

Errors

see above console logs

Environment

React Native/Expo/JavaScriptCore

Environment (Other)

NextJs

[AuroraLantean]

This seems to be a NextJs problem... Solved by:
npm install ws bufferutil utf-8-validate
OR

https://github.com/vercel/next.js/issues/44273
module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.externals.push({
      'utf-8-validate': 'commonjs utf-8-validate',
      'bufferutil': 'commonjs bufferutil',
    })
    return config
  },
}