Getting error in valtio NextJS

[UsmanAsif193]

Link to minimal reproducible example

Valtio with WebModal

Summary

So I am getting an error in production of valtio that its importing useEffect, useRef from react but in production its calling the valtio react.mjs file in node_modules of valtio.

./node_modules/valtio/esm/react.mjs
Attempted import error: 'useEffect' is not exported from 'react' (imported as 'useEffect').

Import trace for requested module:
./node_modules/valtio/esm/react.mjs
./node_modules/valtio/esm/index.mjs
./node_modules/@web3modal/core/dist/esm/src/controllers/AccountController.js
./node_modules/@web3modal/core/dist/esm/index.js
./node_modules/@web3modal/scaffold/dist/esm/index.js
./node_modules/@web3modal/wagmi/dist/esm/src/utils/helpers.js
./node_modules/@web3modal/wagmi/dist/esm/src/utils/defaultWagmiReactConfig.js
./node_modules/@web3modal/wagmi/dist/esm/exports/react/config.js
./lib/wagmi-config.ts
./app/layout.tsx
./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fshare%2F%5Bid%5D%2Fpage&page=%2Fshare%2F%5Bid%5D%2Fpage&pagePath=private-next-app-dir%2Fshare%2F%5Bid%5D%2Fpage.tsx&appDir=C%3A%5CProjects%5CNextJS%20Projects%5Cpepe-ai%5Capp&appPaths=%2Fshare%2F%5Bid%5D%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=home&middlewareConfig=e30%3D!./app/share/[id]/page.tsx?__next_edge_ssr_entry__

To work around this I changed the nextjs webpack but still getting error.

List of related npm package versions

wagmi @web3modal/core @web3modal/wagmi valtio ai

One more thing this error only occurs when we have ai package installed

[UsmanAsif193]

Interestingly it works in dev mode so not sure whats going on

using next dev

[UsmanAsif193]

Fixed it using adding "use client" in the config file, worst kinda error to exist