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
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.
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