[Bug]: React Dom renderToString fails with "Cannot read properties of undefined (reading 'current')"

Open lechinoix opened this issue 2 years ago • 1 comments

Summary

Since today, we experience errors in our application.

TypeError: Cannot read properties of undefined (reading 'current')
       at Ec (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server-legacy.node.production.min.js:121:77)
       at Xc (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server-legacy.node.production.min.js:141:149)
       at exports.renderToString (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server-legacy.node.production.min.js:144:108)
       at /var/task/node_modules/react-instantsearch-hooks-server/dist/cjs/getServerState.js:76:5
       at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

And sometimes another message

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
 1. You might have mismatching versions of React and the renderer (such as React DOM)
 2. You might be breaking the Rules of Hooks
 3. You might have more than one copy of React in the same app
 See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
     at V (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server-legacy.node.production.min.js:90:32)
     at Object.useRef (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server-legacy.node.production.min.js:95:156)
     at exports.useRef (/var/task/node_modules/react/cjs/react.production.min.js:25:337)
     at InstantSearchSSRProvider (/var/task/node_modules/react-instantsearch-hooks/dist/cjs/components/InstantSearchSSRProvider.js:28:37)
     at renderWithHooks (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8385:16)
     at renderIndeterminateComponent (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8459:15)
     at renderElement (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8694:7)
     at renderNodeDestructiveImpl (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8862:11)
     at renderNodeDestructive (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8834:14)
     at renderNode (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:9018:12)

After investigating a little, we see that the latest functioning build was running on 4.37.4 and now fails on 4.38.1.

In our application, we have both an app directory and pages directory (for retro compatibility with Algolia). This error only happens on the pages directory part of the application.

We run on [email protected] and [email protected]. Here is our full dependencies list

"dependencies": {
    "react-instantsearch-hooks-router-nextjs": "6.44.1",
    "react-instantsearch-hooks-server": "6.44.1",
    "react-instantsearch-hooks-web": "6.44.1",
    "@algolia/autocomplete-js": "^1.8.2",
    "@algolia/autocomplete-plugin-algolia-insights": "^1.8.2",
    "@algolia/autocomplete-plugin-recent-searches": "^1.8.2",
    "@apollo/client": "^3.7.7",
    "@headlessui/react": "^1.7.14",
    "@next/bundle-analyzer": "^13.1.6",
    "@sentry/nextjs": "^7.55.2",
    "@types/marked": "^4.0.8",
    "algoliasearch": "^4.14.3",
    "chromatic": "^6.17.4",
    "clsx": "^1.2.1",
    "critters": "^0.0.16",
    "dotenv": "^16.0.3",
    "graphql": "^16.6.0",
    "marked": "^4.2.12",
    "next": "13.2.4",
    "nextjs-progressbar": "^0.0.16",
    "patch-package": "^6.5.1",
    "postinstall-postinstall": "^2.1.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.43.1",
    "react-icons": "^4.7.1",
    "react-use": "^17.4.0",
    "sass": "^1.58.3",
    "search-insights": "^2.3.0",
    "server-only": "^0.0.1",
    "storybook": "^7.0.11",
    "talkjs": "^0.15.9",
    "talkr": "^3.3.9",
    "typescript": "4.9.5",
    "zustand": "^4.3.8"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "^3.0.0",
    "@graphql-codegen/introspection": "^3.0.0",
    "@graphql-codegen/typescript": "^3.0.0",
    "@graphql-codegen/typescript-operations": "^3.0.0",
    "@storybook/addon-essentials": "^7.0.11",
    "@storybook/addon-interactions": "^7.0.11",
    "@storybook/addon-links": "^7.0.11",
    "@storybook/addon-styling": "^1.0.8",
    "@storybook/blocks": "^7.0.11",
    "@storybook/nextjs": "^7.0.11",
    "@storybook/react": "^7.0.11",
    "@storybook/testing-library": "^0.0.14-next.2",
    "@types/lodash": "^4.14.191",
    "@types/node": "18.14.0",
    "@types/react": "18.2.0",
    "@types/react-dom": "18.2.0",
    "@typescript-eslint/eslint-plugin": "^5.51.0",
    "@typescript-eslint/parser": "^5.51.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.33.0",
    "eslint-config-next": "13.1.6",
    "eslint-config-prettier": "^8.6.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-storybook": "^0.6.12",
    "husky": "^8.0.3",
    "lint-staged": "^13.1.1",
    "postcss": "^8.4.23",
    "prettier": "^2.8.4",
    "prettier-plugin-tailwindcss": "^0.2.3",
    "tailwindcss": "^3.2.4"
  }

We are trying to downgrade next runtime right now to fix the issue.

Happy to help solving this !

A link to a reproduction repository

https://github.com/Barooders/barooders-frontend

Expected Result

No errors on production

Actual Result

TypeError: Cannot read properties of undefined (reading 'current')
       at Ec (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server-legacy.node.production.min.js:121:77)
       at Xc (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server-legacy.node.production.min.js:141:149)
       at exports.renderToString (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server-legacy.node.production.min.js:144:108)
       at /var/task/node_modules/react-instantsearch-hooks-server/dist/cjs/getServerState.js:76:5
       at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

And sometimes another message

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
 1. You might have mismatching versions of React and the renderer (such as React DOM)
 2. You might be breaking the Rules of Hooks
 3. You might have more than one copy of React in the same app
 See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
     at V (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server-legacy.node.production.min.js:90:32)
     at Object.useRef (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server-legacy.node.production.min.js:95:156)
     at exports.useRef (/var/task/node_modules/react/cjs/react.production.min.js:25:337)
     at InstantSearchSSRProvider (/var/task/node_modules/react-instantsearch-hooks/dist/cjs/components/InstantSearchSSRProvider.js:28:37)
     at renderWithHooks (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8385:16)
     at renderIndeterminateComponent (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8459:15)
     at renderElement (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8694:7)
     at renderNodeDestructiveImpl (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8862:11)
     at renderNodeDestructive (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8834:14)
     at renderNode (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:9018:12)

Steps to reproduce

Create a site with both pages and app directory
Deploy to production on 4.38.1

Next Runtime version

4.38.1

Is your issue related to the `app` directory?

[ ] Yes, I am using the app directory

More information about your build

[ ] I am building using the CLI
[ ] I am building using file-based configuration (netlify.toml)

What OS are you using?

None

Your netlify.toml file

No response

Your public/_redirects file

No response

Your `next.config.js` file

No response

Builds logs (or link to your logs)

Build logs

# Paste logs here

Function logs

TypeError: Cannot read properties of undefined (reading 'current')
       at Ec (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server-legacy.node.production.min.js:121:77)
       at Xc (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server-legacy.node.production.min.js:141:149)
       at exports.renderToString (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server-legacy.node.production.min.js:144:108)
       at /var/task/node_modules/react-instantsearch-hooks-server/dist/cjs/getServerState.js:76:5
       at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

And sometimes another message

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
 1. You might have mismatching versions of React and the renderer (such as React DOM)
 2. You might be breaking the Rules of Hooks
 3. You might have more than one copy of React in the same app
 See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
     at V (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server-legacy.node.production.min.js:90:32)
     at Object.useRef (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server-legacy.node.production.min.js:95:156)
     at exports.useRef (/var/task/node_modules/react/cjs/react.production.min.js:25:337)
     at InstantSearchSSRProvider (/var/task/node_modules/react-instantsearch-hooks/dist/cjs/components/InstantSearchSSRProvider.js:28:37)
     at renderWithHooks (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8385:16)
     at renderIndeterminateComponent (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8459:15)
     at renderElement (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8694:7)
     at renderNodeDestructiveImpl (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8862:11)
     at renderNodeDestructive (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8834:14)
     at renderNode (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:9018:12)

.next JSON files

No response

Jun 22 '23 12:06 lechinoix

Hi @lechinoix Your reproduction link ( https://github.com/Barooders/barooders-frontend ) 404s for me - is the url correct? Or maybe repository is private?

I did try creating my own reproduction using [email protected] but so far was unable to reproduce the issue, so having access to your reproduction would help a lot.

In the meantime - if 4.37.4 was working - you can manually install @netlify/[email protected] in your site project to force using of that version instead of autoinstalled one until we release the fix for the regression

Jun 23 '23 08:06 pieh

[Bug]: React Dom renderToString fails with "Cannot read properties of undefined (reading 'current')"

Summary

A link to a reproduction repository

Expected Result

Actual Result

Steps to reproduce

Next Runtime version

Is your issue related to the app directory?

More information about your build

What OS are you using?

Your netlify.toml file

Your public/_redirects file

Your next.config.js file

Builds logs (or link to your logs)

Function logs

.next JSON files

Is your issue related to the `app` directory?

Your `next.config.js` file