`mdx-deck build` errors with "Cannot read property 'step' of null" about code-surfer HOT 19 CLOSED

@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.

from code-surfer.

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

from code-surfer.

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

from code-surfer.

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

from code-surfer.

@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

from code-surfer.

Fixed in v3

from code-surfer.

@Leko your suggestion worked for me, thank you!

from code-surfer.

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

from code-surfer.

@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

from code-surfer.

This should be fixed in the latest release, but please feel free to reopen the issue on mdx-deck if it's still happening

from code-surfer.

Just tested it with mdx-deck v1.6.9, Notes and Appear work, but it still fails with CodeSurfer. The error is the same as before.

Should I change something in this package?

from code-surfer.

Looking forward to the release of this one so I can build + host my presentations :) Thanks for all the great work!

from code-surfer.

Not sure if this is related, but I updated both libraries and am getting TypeError: notes is not a function whenever I put a note in CodeSurfer somewhere.

Coming from this function in dist/deck-code-surfer.js:

var Notes = function Notes(_ref) {
  var notes = _ref.notes;
  return typeof notes === "string" ? _react2.default.createElement("p", { style: { height: "50px" } }, notes || "\xA0") : notes();
};

Versions:

• mdx-deck: 1.7.1
• mdx-deck-code-surfer: 0.4.0

React stack:

The above error occurred in the <Notes> component:
    in Notes (created by InnerCodeSurfer)
    in div (created by InnerCodeSurfer)
    in div (created by InnerCodeSurfer)
    in InnerCodeSurfer (created by WithTheme(InnerCodeSurfer))
    in WithTheme(InnerCodeSurfer)
    in Unknown
    in Unknown
    in div (created by MDXTag)
    in MDXTag
    in Unknown
    in Unknown (created by SlideDeck)
    in div (created by styled.div)
    in styled.div (created by Slide)
    in Slide (created by SlideDeck)
    in div (created by styled.div)
    in styled.div (created by Carousel)
    in div (created by styled.div)
    in styled.div (created by Carousel)
    in Carousel (created by SlideDeck)
    in div (created by styled.div)
    in styled.div (created by SlideDeck)
    in div (created by Swipeable)
    in Swipeable (created by SlideDeck)
    in Provider (created by SlideDeck)
    in MDXProvider (created by SlideDeck)
    in ThemeProvider (created by SlideDeck)
    in HeadProvider (created by SlideDeck)
    in SlideDeck (created by App)
    in App

from code-surfer.

If I give either every step (including step 0) a note or nothing a note, it works. Mixing causes the error.

from code-surfer.

can you post the the code of the slide that's failing? also is this when using "mdx-deck build" or always?

Edit: never mind, I'm reproducing it with the "theming" deck.

from code-surfer.

I haven't really dug into this yet, but I suspect it might be related to mdx-deck's use of webpack-node-externals here: https://github.com/jxnblk/mdx-deck/blob/master/lib/html.js#L34-L38 – if anyone wants to test out a different setup there

from code-surfer.

Here, I also had to update the deck-code-surfer.js file.
Now its like this (Starting at 127):

      var current = stepsWithNotes[stepIndex >= stepsWithNotes.length ? 0 : stepIndex];
      var currentStep = current && current.step;
      var currentTitle = current && current.title || title;
      var currentNotes = current && current.notes;
      var anyNotes = stepsWithNotes.some(function (s) {
        return s.notes;
      });

from code-surfer.

@sibelius same problem here... I run the build with --no-html, but don't work too.

from code-surfer.

fixed here jxnblk/mdx-deck#255

to fix mdx-code-surfer we gonna need a custom webpack config like this one:

const nodeExternals = require('webpack-node-externals');

webpack.config.js

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

from code-surfer.