Does it work with React 18 Strict Mode?

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.

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

@marckraw

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

@pomber

@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

@pomber

@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 :)

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.

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.

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 :)

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

@pomber

@pomber amazing 🤩

🚀 Issue was released in v0.5.0 🚀

Navigation Menu

Repository navigation

Does it work with React 18 Strict Mode? #161

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Does it work with React 18 Strict Mode? #161

Description

Activity

marckraw commented on May 5, 2022

pomber commented on May 5, 2022

marckraw commented on May 5, 2022

marckraw commented on May 5, 2022

pomber commented on May 6, 2022

pomber commented on May 6, 2022

marckraw commented on May 6, 2022

pomber commented on May 6, 2022

marckraw commented on May 6, 2022

github-actions commented on May 10, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions