Potential issue with scrollycoding example

[C-Loftus]

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

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)

[donghhan]

I am also having this issue too.

[pomber]

To look into this properly we need a minimal reproduction: ideally a small public repo or sandbox that isolates the issue. Please add a link when you have one and we’ll reopen this. Closing for now to keep the tracker clean.