Closed pomber closed 2 years ago
Agree, it's not working with React@18 for me aswell, (using next)
@marckraw do you have a repo with react 18 where code hike fails? I'm having trouble reproducing it right now
@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 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
.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:
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.
<details>
<summary>Explanation object</summary>
```json
{
"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
}
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
)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 amazing 🤩
:rocket: Issue was released in v0.5.0
:rocket:
This repo using react 18 https://github.com/DefectingCat/code-hike-test fails with:
It works after changing react 18 to 17.