code-surfer: `mdx-deck build` errors with "Cannot read property 'step' of null"

It seems mdx-deck build doesn’t work if I use CodeSurfer (regardless of how raw-loader is used)… I get this:

[mdx-deck] building
[mdx-deck] rendering static html
Missing HeadProvider
[err] TypeError: Cannot read property 'step' of null
    at _class2.render (./node_modules/mdx-deck-code-surfer/dist/deck-code-surfer.js:93:30)
    at processChild (./node_modules/react-dom/cjs/react-dom-server.node.development.js:2207:18)
    at resolve (./node_modules/react-dom/cjs/react-dom-server.node.development.js:2064:5)
    at ReactDOMServerRenderer.render (./node_modules/react-dom/cjs/react-dom-server.node.development.js:2383:22)
    at ReactDOMServerRenderer.read (./node_modules/react-dom/cjs/react-dom-server.node.development.js:2357:19)
    at renderToString (./node_modules/react-dom/cjs/react-dom-server.node.development.js:2729:25)
    at renderHTML (./node_modules/mdx-deck/lib/html.js:57:16)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
npm ERR! code ELIFECYCLE
npm ERR! errno 1

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 1
Comments: 19 (6 by maintainers)

Commits related to this issue

Fix build issue The "npm run build" script was failing due to an issue with CodeSurfer. To fix the issue, I used `--no-html` as a workaround, as recommended [here](https://github.com/pomber/code-sur... — committed to qjcg/talks by qjcg 5 years ago
Whitelist mdx-deck-code-surfer To solve https://github.com/pomber/code-surfer/issues/8 It was supposed to be fixed with https://github.com/jxnblk/mdx-deck/pull/255 but the next commit reverted the f... — committed to nicoespeon/mdx-deck by nicoespeon 5 years ago

Most upvoted comments

@jxnblk Hi.

it might be related to mdx-deck’s use of webpack-node-externals

Maybe you’re right. I changed node_modules/mdx-deck/lib/html.js as here:

   config.externals = [
     nodeExternals({
       whitelist: [
         'mdx-deck',
         'mdx-deck/themes',
-        'mdx-deck/layouts'
+        'mdx-deck/layouts',
+        'mdx-deck-code-surfer'
       ]
     })
   ]

It works as expected but I didn’t understand why it worked.

+14

Leko on Sep 17, 2018

Seems it’s an issue added in mdx-deck v1.6.6, same happens with the Appear component. I’ll create the issue there (edit: jxnblk/mdx-deck#138).

Workarounds: use mdx-deck v1.6.5 or use mdx-deck build --no-html your.mdx

+12

pomber on Aug 27, 2018

After updates I get this error instead:

[err] TypeError: Cannot read property 'update' of null
    at new InnerCodeSurfer (node_modules/mdx-deck-code-surfer/dist/deck-code-surfer.js:60:30)
    ...

--no-html still works without error

megamaddu on Sep 8, 2018

Ah yeah… 😬 I think the root of the issue is with React context being a singleton, but code-surfer is not getting the same context in the mdx-deck build step.

The changes in jxnblk/mdx-deck#144 should hopefully help with that by exposing a public withDeck HOC in the API. I.e. if you use import { withDeck } from 'mdx-deck' with this new API, then it should be getting the same React context.

Definitely wanna make sure that code-surfer works well with mdx-deck and would love to get your thoughts on the proposed API changes

jxnblk on Aug 28, 2018

Fixed in v3

pomber on Dec 10, 2019

@spicydonuts the Notes bug should be fixed in mdx-deck-code-surfer v0.4.1

@trevordmiller I’m not sure how to fix mdx-deck build yet, as a workaround you can use mdx-deck build --no-html your.mdx

pomber on Sep 3, 2018

@jxnblk Hi.

it might be related to mdx-deck’s use of webpack-node-externals

Maybe you’re right. I changed node_modules/mdx-deck/lib/html.js as here:
   config.externals = [
     nodeExternals({
       whitelist: [
         'mdx-deck',
         'mdx-deck/themes',
-        'mdx-deck/layouts'
+        'mdx-deck/layouts',
+        'mdx-deck-code-surfer'
       ]
     })
   ]
It works as expected but I didn’t understand why it worked.

This actually Worked for me.Thanks @Leko

athul on Feb 2, 2019

I’ve got this error

TypeError: Cannot read property 'update' of null
    at new InnerCodeSurfer (/Users/sibelius/Dev/app/slides/functional-types-abstraction/node_modules/mdx-deck-code-surfer/dist/deck-code-surfer.js:93:30)
    at processChild (/Users/sibelius/Dev/app/slides/functional-types-abstraction/node_modules/react-dom/cjs/react-dom-server.node.development.js:2750:14)
    at resolve (/Users/sibelius/Dev/app/slides/functional-types-abstraction/node_modules/react-dom/cjs/react-dom-server.node.development.js:2716:5)
    at ReactDOMServerRenderer.render (/Users/sibelius/Dev/app/slides/functional-types-abstraction/node_modules/react-dom/cjs/react-dom-server.node.development.js:3100:22)
    at ReactDOMServerRenderer.read (/Users/sibelius/Dev/app/slides/functional-types-abstraction/node_modules/react-dom/cjs/react-dom-server.node.development.js:3059:29)
    at renderToString (/Users/sibelius/Dev/app/slides/functional-types-abstraction/node_modules/react-dom/cjs/react-dom-server.node.development.js:3526:27)
    at renderHTML (/Users/sibelius/Dev/app/slides/functional-types-abstraction/node_modules/mdx-deck/lib/html.js:65:16)
    at processTicksAndRejections (internal/process/next_tick.js:81:5)

You can reproduce running yarn build on this presentation https://github.com/sibelius/functional-types-abstractions

sibelius on Jan 27, 2019

@Leko your suggestion worked for me, thank you!

gitgudchannel on Oct 3, 2018