TypeError: Cannot read properties of null (reading 'useState')

[hosseinitabar]

Check that this is really a bug

• I confirm

Reproduction link

https://github.com/hosseinitabar/swiper-bug

Bug description

We upgraded to next.js 13.

And now we receive this error:

Warning: 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.
TypeError: Cannot read properties of null (reading 'useState')
    at useState (/next/node_modules/react/cjs/react.development.js:1622:21)
    at file:///next/node_modules/swiper/react/swiper.js:26:51
    at renderWithHooks (/next/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7621:16)
    at renderForwardRef (/next/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7805:18)
    at renderElement (/next/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7985:11)
    at renderNodeDestructiveImpl (/next/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8086:11)
    at renderNodeDestructive (/next/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8058:14)
    at renderIndeterminateComponent (/next/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7748:7)
    at renderElement (/next/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7919:7)
    at renderNodeDestructiveImpl (/next/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8086:11)
error - TypeError: Cannot read properties of null (reading 'useState')
    at useState (/next/node_modules/react/cjs/react.development.js:1622:21)
    at file:///next/node_modules/swiper/react/swiper.js:26:51
    at renderWithHooks (/next/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7621:16)
    at renderForwardRef (/next/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7805:18)
    at renderElement (/next/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7985:11)
    at renderNodeDestructiveImpl (/next/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8086:11)
    at renderNodeDestructive (/next/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8058:14)
    at renderIndeterminateComponent (/next/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7748:7)
    at renderElement (/next/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7919:7)
    at renderNodeDestructiveImpl (/next/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8086:11) {
  page: '/'
}

I created a simple repository, with all of our next.js config and all of our packages.

If you clone it and run it using npm install && npm run dev you'll see this error.

Expected Behavior

Swiper either should work with next.js 13, or at least it should give us clearer message.

Actual Behavior

All it says is:

TypeError: Cannot read properties of null (reading 'useState')

Swiper version

8.4.4

Platform/Target and Browser Versions

Debian Chrome 107.0.5304.87 (Official Build) (64-bit)

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[nolimits4web]

Would be good to see project with next and swiper only. You have too much of deps, so it can be affected by something else

[hosseinitabar]

@nolimits4web yep that is true. But even in case of a conflict, I think that swiper should either give us a more meaningful error message, or somehow manage the conflict internally. In fact, I intentionally created that repo with all of our dependencies, to provide a real-world scenario.

I would create a standalone repo too.

[Nefcanto]

I also upgraded to Next 13 and I also see this error. @nolimits4web I don't think there should be a need to create a isolated repo. Swiper should not be affected by other libraries. Even if it is now, it should be fixed.

I realized that if we comment out the components of our pages, save, and then uncomment them the problem goes away for that page.

But if we refresh the page it appears again. It seems something related to Next 13 hydration is the culprit here.

[Nefcanto]

@nolimits4web I forked his repo and cleaned it up and found the problem source. Here's the fork.

Clone it, and toggle the value of appDir config in next.config.js.

You should see the error when it's set to true.

[nolimits4web]

That is definitely something on Next side, it complains on this line:

const [containerClasses, setContainerClasses] = useState('swiper');

I think you should open this issue for Next

[L-Qun]

How can we find more comprehensive differences between 6, 7, and 8

[L-Qun]

@nolimits4web