[🐞] Cannot read properties of null (reading 'useContext')

wanjohiryan commented 2 months ago

Which component is affected?

Qwik React

Describe the bug

Hello There 👋🏾

I keep getting the 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.
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.
12:28:05 [vite] Internal server error: Cannot read properties of null (reading 'useContext')
      at Object.useContext (C:\projects\mono\node_modules\react\cjs\react.development.js:1618:21)
      at Button (C:\projects\mono\node_modules\@mui\material\node\Button\Button.js:231:30)
      at renderWithHooks (C:\projects\mono\apps\qwik\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5662:16)
      at renderForwardRef (C:\projects\mono\apps\qwik\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5846:18)
      at renderElement (C:\projects\mono\apps\qwik\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6009:11)
      at renderNodeDestructiveImpl (C:\projects\mono\apps\qwik\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6108:11)
      at renderNodeDestructive (C:\projects\mono\apps\qwik\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6080:14)
      at renderContextProvider (C:\projects\mono\apps\qwik\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5924:3)
      at renderElement (C:\projects\mono\apps\qwik\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6021:11)
      at renderNodeDestructiveImpl (C:\projects\mono\apps\qwik\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6108:11)

While trying out qwik-react in a turbo mono-repo structure.... this was previously not an issue, until I tried creating a new mono-repo today.

Reproduction

none

Steps to reproduce

Create a new mono-repo with the name of your choice bunx create-turbo@latest
cd into the directory (ex. cd mono/apps)
Create a new qwik app bunx create-qwik@latest
cd into your qwik directory (ex. cd qwik)
Add react integration bun qwik add react
After a successful install, start the dev server bun dev
Navigate to dev_url/react which in most cases will be http://local:5173/react

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Memory: 4.29 GB / 15.88 GB
  Binaries:
    Node: 22.7.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    bun: 1.1.26 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (127.0.2651.98)

Additional Information

This was not an issue a while back, i don't understand why all over sudden React throws this error.

Or am I missing something?

wmertens commented 2 months ago

looks like an import cycle issue to me. It's trying to read .useContext from somewhere, so that's likely a module. I just don't understand why the module would be null instead of undefined.

Can you use bun dev.debug (iirc) to check out the issue where it breaks?

wanjohiryan commented 2 months ago

To be honest, I don't know how that works.... But on further investigation, it looks like Qwik React does not like when I import anything in a react island.

For example:

✅ This works

/** @jsxImportSource react */
//This is used for testing whether the Qwik React components are working
import { useState } from "react"
import { qwikify$ } from "@builder.io/qwik-react"

export const ReactExample = () => {
    return (
        <div>
            Hello There
        </div>
    )
}

export const Example = qwikify$(ReactExample)

❌This fails... even if i call it without initialising using client:load

/** @jsxImportSource react */
//This is used for testing whether the Qwik React components are working
import { useState } from "react"
import { qwikify$ } from "@builder.io/qwik-react"
import { motion } from "framer-motion"

export const ReactExample = () => {
    return (
        <motion.div>
            Hello There
        </motion.div>
    )
}

export const Example = qwikify$(ReactExample)

Very interesting

wanjohiryan commented 2 months ago

For future reference:

I ended up using an earlier version of the project, you can check it out here

wmertens commented 2 months ago

@wanjohiryan :thinking: so you're saying that qwik-react v1.5.1 breaks for you?

QwikDev / qwik