codehike icon indicating copy to clipboard operation
codehike copied to clipboard

Potential issue with `scrollycoding` example

Open C-Loftus opened this issue 1 year ago • 0 comments

Hello, thank you for your work on this project. It is really great.

Ask

I would benefit from more info about the scrollycoding example on the docs page. I cannot get it working and am unclear if it is my issue, the example is incorrect, or if there needs to be a few more bits of info added for setup.

I am happy to submit a PR to the docs for this; but I can't figure what's going wrong for me.

Background

  • I cannot find out how to make the scrollycoding example work.
  • I copied the same code verbatim, then just updated the imports
    • I've messed around with different names / exports / md vs mdx etc and nothing works; fairly confident this isn't a naming or syntax issue
  • I get an error saying that steps is required but it is undefined.
    • This seems to imply the mdx content is not correct
    • I am using the same exact mdx content as the example
  • I am using docusaurus so I believe I have the mdx-loader installed.
    • I can load mdx content fine with import and redisplay it.
    • I get a red underline saying that the module can't be found
      • (even though I can control click to follow to the md content in the editor and it loads without issue at runtime)
      • I am unclear if I need another dependency for this

image

Uncaught runtime errors:
×
ERROR
at root
Error for `steps`: Required
{
  "expected": "array",
  "received": "undefined"
}
  
Error: at root
Error for `steps`: Required
{
  "expected": "array",
  "received": "undefined"
}
  
    at parseProps (webpack-internal:///./node_modules/codehike/dist/blocks.js:64:11)
    at parseRoot (webpack-internal:///./node_modules/codehike/dist/blocks.js:17:16)
    at Walkthrough (webpack-internal:///./src/components/CodeTutorial.tsx:14:345)
    at renderWithHooks (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:15486:18)
    at mountIndeterminateComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20098:13)
    at beginWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21621:16)
    at HTMLUnknownElement.callCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4213:16)
    at invokeGuardedCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4277:31)
    at beginWork$1 (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:27485:7)

image

C-Loftus avatar Oct 04 '24 13:10 C-Loftus