Does it work with React 18 Strict Mode?

[pomber]

This repo using react 18 https://github.com/DefectingCat/code-hike-test fails with:

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'querySelector')

Call Stack
getPanelSnapshot
node_modules/@code-hike/mdx/dist/components.esm.mjs (2875:0)
eval
node_modules/@code-hike/mdx/dist/components.esm.mjs (2864:109)
basicStateReducer
node_modules/react-dom/cjs/react-dom.development.js (16376:0)
updateReducer
node_modules/react-dom/cjs/react-dom.development.js (16500:0)
updateState
node_modules/react-dom/cjs/react-dom.development.js (16836:0)
Object.useState
node_modules/react-dom/cjs/react-dom.development.js (17762:0)
Object.useState
node_modules/react/cjs/react.development.js (1617:0)
useSnapshots
node_modules/@code-hike/mdx/dist/components.esm.mjs (2849:55)
useTransition
node_modules/@code-hike/mdx/dist/components.esm.mjs (2442:41)
EditorTween
node_modules/@code-hike/mdx/dist/components.esm.mjs (2927:37)

It works after changing react 18 to 17.

[marckraw]

Agree, it's not working with React@18 for me aswell, (using next)

[pomber]

@marckraw do you have a repo with react 18 where code hike fails? I'm having trouble reproducing it right now

[marckraw]

@pomber yes I have, but it has lot more stuff, so I will clean it a little, or create fork of it, with minimal amount of stuff, so it will be easier for you

[marckraw]

@pomber here is the repo https://github.com/marckraw/mrck.dev

It is basically nextjs site, with everything updated.
Using https://github.com/kentcdodds/mdx-bundler and codehike in newest version.

If I use only

\ ```js
const someCode = 'somecode'
\ ```

( \ only to escape ``` )

Then it works, the problems starts when I want to name a file (```js nameOfTheFile), or use any of the <CH.> components.

.mdx that fails is this one: https://github.com/marckraw/mrck.dev/blob/master/posts/test-mdx.mdx

and it produces that error:

Let me know if I can help any other way :)

[pomber]

Thanks!

Strange, your blog works for me without changing anything:

Maybe it's the version of yarn (I'm using v1.22.18) or Node (v16.14.2)? I don't know, I need to keep investigating.

[pomber]

So far I've got:

• If I install it with yarn v1.22.18: it works
• If I try to install it with npm v8.5.0: installation fails

While resolving: mrck.dev@undefined
Found: react@18.1.0
node_modules/react
  react@"^18.1.0" from the root project

Could not resolve dependency:
peer react@"^16.3.0 || ^17" from react-share@4.4.0
node_modules/react-share
  react-share@"^4.4.0" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Explanation object

{
  "code": "ERESOLVE",
  "current": {
    "name": "react",
    "version": "18.1.0",
    "whileInstalling": {
      "name": "mrck.dev",
      "path": "/workspace/mrck.dev"
    },
    "location": "node_modules/react",
    "isWorkspace": false,
    "dependents": [
      {
        "type": "prod",
        "name": "react",
        "spec": "^18.1.0",
        "from": {
          "location": "/workspace/mrck.dev"
        }
      }
    ]
  },
  "currentEdge": {
    "type": "prod",
    "name": "react",
    "spec": "^18.1.0",
    "from": {
      "location": "/workspace/mrck.dev"
    }
  },
  "edge": {
    "type": "peer",
    "name": "react",
    "spec": "^16.3.0 || ^17",
    "error": "INVALID",
    "from": {
      "name": "react-share",
      "version": "4.4.0",
      "whileInstalling": {
        "name": "mrck.dev",
        "path": "/workspace/mrck.dev"
      },
      "location": "node_modules/react-share",
      "isWorkspace": false,
      "dependents": [
        {
          "type": "prod",
          "name": "react-share",
          "spec": "^4.4.0",
          "from": {
            "location": "/workspace/mrck.dev"
          }
        }
      ]
    }
  },
  "strictPeerDeps": false,
  "force": false
}

• If I force the install with npm i --legacy-peer-deps: installation works, but http://localhost:3000/blog/posts/test-mdx/ fails with the Cannot read properties of null (reading 'querySelector') error (which probably is a problem with React.useRef)
• If I disable reactStrictMode in next.config.js the error is gone, and the page works.

Still investigating if the issue is Code Hike breaking strict mode or a problem with the app dependencies.

[marckraw]

Hmm yeah, really interesting, I was running it with yarn always. Right now, i've updated to

$ node -v 
v16.15.0

$ yarn --version
1.22.18

And the error is the same (Cannot read properties of null (reading 'querySelector'))
But yeah, if i disable reactStrictMode that the error is gone and it works :)

[pomber]

Confirmed, it's CodeHike breaking React 18 Strict Mode. I'll push the fix soon.

[marckraw]

@pomber amazing 🤩