Error: Cannot read properties of undefined (reading 'forwardRef')

[Marielbamar21]

Hi, I installed the library in my project, and when I run it, the library shows me this error, I am using react version 19.0.0.0.

│ TypeError: Cannot read properties of undefined (reading 'forwardRef')
│     at project\node_modules\.pnpm\thirdweb@5.92.1_@types+react-dom@19.0.3_@types
│ +react@19.0.8__@types+react@19.0.8_react-dom@19_e5rcmd2bcbywopmvhtfityjbti\node_modules\thirdweb\dist\cjs\reac
│ t\web\ui\MediaRenderer\MediaRenderer.js:49:48
│     at project\node_modules\.pnpm\thirdweb@5.92.1_@types+react-dom@19.0.3_@types
│ +react@19.0.8__@types+react@19.0.8_react-dom@19_e5rcmd2bcbywopmvhtfityjbti\node_modules\thirdweb\dist\cjs\reac
│ t\web\ui\MediaRenderer\MediaRenderer.js:85:4
│     at evalModule (project\node_modules\.pnpm\jiti@1.21.6\node_modules\jiti\dist
│ \jiti.js:1:247313)
│     at jiti (project\node_modules\.pnpm\jiti@1.21.6\node_modules\jiti\dist\jiti.
│ js:1:245241)
│     project\node_modules\.pnpm\thirdweb@5.92.1_@types+react-dom@19.0.3_@types
│ +react@19.0.8__@types+react@19.0.8_react-dom@19_e5rcmd2bcbywopmvhtfityjbti\node_modules\thirdweb\dist\cjs\reac
│ t\web\ui\ConnectWallet\screens\ViewNFTs.js:16:28
│     at evalModule (project\node_modules\.pnpm\jiti@1.21.6\node_modules\jiti\dist
│ \jiti.js:1:247313)
│     at jiti (project\node_modules\.pnpm\jiti@1.21.6\node_modules\jiti\dist\jiti.
│ js:1:245241)
│     atproject\node_modules\.pnpm\thirdweb@5.92.1_@types+react-dom@19.0.3_@types
│ +react@19.0.8__@types+react@19.0.8_react-dom@19_e5rcmd2bcbywopmvhtfityjbti\node_modules\thirdweb\dist\cjs\reac
│ t\web\ui\ConnectWallet\screens\ViewAssets.js:12:23
│     at evalModule (project\node_modules\.pnpm\jiti@1.21.6\node_modules\jiti\dist
│ \jiti.js:1:247313)
│     at jiti (project\node_modules\.pnpm\jiti@1.21.6\node_modules\jiti\dist\jiti.
│ js:1:245241)

main.tsx

import { ThirdwebProvider } from 'thirdweb/react';

Sentry.init({
  release: undefined,
  dsn: 'https://dns.com',
});

export const Main = () => {
  return (
    <Sentry.ErrorBoundary fallback={<Error />}>
      <ThirdwebProvider>
        <Routes />
      </ThirdwebProvider>
    </Sentry.ErrorBoundary>
  );
};

insatalled packages

{"@headlessui/react": "^2.2.0",
    "@hookform/resolvers": "^4.1.3",
    "@polkadot/util-crypto": "^13.4.3",
    "@sentry/react": "^9.5.0",
    "clsx": "^2.1.1",
    "react-dnd": "^16.0.1",
    "react-hook-form": "^7.54.2",
    "react-icons": "^5.5.0",
    "react-router-dom": "^6.27.0",
    "tailwind-merge": "^2.4.0",
    "thirdweb": "^5.92.1",
    "yup": "^1.6.1"}

[linear]

TOOL-3730 Error: Cannot read properties of undefined (reading 'forwardRef')

[austineblaise]

I'd like to work on this issue. Is it still available?

[Marielbamar21]

Yes, it is, @austineblaise

[joaquim-verges]

@Marielbamar21 hard to say without the full code, but looks like you're trying to render a ConnectButton on the server side. Try using a client component

[MananTank]

Hey @Marielbamar21 - I don't see "react" and "react-dom" in package.json - Can you make sure that you have "react" and "react-dom" installed?

[Marielbamar21]

if they are installed, the package.json I gave you is from a library in my monorepository, but globally react and react-dom are installed. these are the dependencies of my global package.json:
"dependencies": { "react": "19.0.0", "react-dom": "19.0.0" }, "devDependencies": { "@eslint/compat": "^1.2.5", "@eslint/eslintrc": "^3.2.0", "@eslint/js": "^9.20.0", "@types/chrome": "0.0.304", "@types/eslint-plugin-jsx-a11y": "^6.10.0", "@types/eslint__eslintrc": "^2.1.2", "@types/eslint__js": "^8.42.3", "@types/node": "^22.5.5", "@types/react": "^19.0.8", "@types/react-dom": "^19.0.3", "autoprefixer": "^10.4.20", "cross-env": "^7.0.3", "deepmerge": "^4.3.1", "esbuild": "^0.25.0", "eslint": "^9.20.1", "eslint-config-airbnb-typescript": "18.0.0", "eslint-config-prettier": "^10.0.1", "eslint-import-resolver-typescript": "3.7.0", "eslint-plugin-import": "2.29.1", "eslint-plugin-import-x": "4.6.1", "eslint-plugin-jsx-a11y": "6.10.2", "eslint-plugin-prettier": "5.2.3", "eslint-plugin-react": "7.37.4", "eslint-plugin-react-hooks": "5.1.0", "eslint-plugin-tailwindcss": "^3.17.5", "fast-glob": "^3.3.3", "globals": "^15.14.0", "husky": "^9.1.4", "lint-staged": "^15.2.7", "postcss": "^8.5.2", "postcss-load-config": "^6.0.1", "prettier": "^3.3.3", "rimraf": "^6.0.1", "run-script-os": "^1.1.6", "tailwindcss": "^3.4.17", "tslib": "^2.8.1", "turbo": "^2.4.2", "typescript": "5.8.1-rc", "typescript-eslint": "^8.20.0", "vite": "6.1.0" }

[jamescbury]

I get the same issue when attempting to render the web version of my app in Expo... If it's helpful I can share my set up as well.

[MananTank]

@Marielbamar21 Please add "react" and "react-dom" to the individual library/app's package.json instead of monorepo root package.json

If the issue persists - please provide a minimal github repository where we can replicate this issue

[MananTank]

@jamescbury Yes, please provide a minimal github repository where we can replicate this issue

[Marielbamar21]

https://github.com/Marielbamar21/repo-test, issues replicated. @MananTank

[MananTank]

@Marielbamar21 Thanks for the repo - I can replicate the issue and working on fixing this