Document how to install "raw-loader" in examples about code-surfer

[megamaddu]

Never mind! Checked the webpack docs and existing loaders are bypassed if the require/import begins with a !. If you change the examples to use !raw-loader!./... this probably won't be an issue (might actually be a feature if you want to compare pre/post compilation code side by side 😉).

[pomber]

Didn't know about that option, that's exactly what we need!
I'll change the sample to use that and add it to the docs.

[pomber]

@spicydonuts I think I broke mdx-deck build in the last version. Thanks for the report. Could you move it to a new issue?
@trevordmiller I updated the readme with the correct usage of raw-loader.

[trevordmiller]

When using syntax like this in mdx-deck:

components/SomeComponent/index.js

import React from "react";

const SomeComponent = () => <section>Some component</section>;

export default SomeComponent;

Use

---

import { CodeSurfer } from "mdx-deck-code-surfer"

<CodeSurfer
  title="SomeComponent"
  code={require("raw-loader!./components/SomeComponent")}
  showNumbers={true}
  notes="Some starting note"
  steps={[
    { lines: [3], notes: "Some step note" }
  ]}
/>

---

I'm getting compiled output like this:

[trevordmiller]

I tried both npm install --save raw-loader and npm install --save-dev raw-loader with the same result.

[pomber]

That's because mdx-deck webpack config is loading the .js files with babel.

A workaround is to change the extension of the file to .jsx and require it with the extension:

code={require("raw-loader!./components/SomeComponent.jsx")}

---

So, the issues to fix are:

• Better raw-loader usage docs
• Docs for loading .js (and .mdx) files -- or even better a zero-config way to load them

[trevordmiller]

@pomber Thanks for the info. The workaround feels brittle - if mdx-deck adds support for .jsx it will break in the same way as .js. Also, .jsx doesn't work if you want to both show the code and render it in your mdx-deck from the same source file. For example:

components/SomeComponent/index.jsx

---

import SomeComponent from './components/SomeComponent/index.jsx'

<SomeComponent />

---

import { CodeSurfer } from "mdx-deck-code-surfer"

<CodeSurfer
  ...
  code={require("raw-loader!./components/SomeComponent/index.jsx")}
  ...
/>

It would be nice if the conventional .js extension could be used instead so that rendering in mdx-deck still works and CodeSurfer could display that source code from the same .js file source without implementation details of raw-loader and mdx-deck:

components/SomeComponent/index.js

---

import SomeComponent from './components/SomeComponent'

<SomeComponent />

---

import { CodeSurfer } from "mdx-deck-code-surfer"

<CodeSurfer
  ...
  codePath='./components/SomeComponent'
  ...
/>

[megamaddu]

Also running into this. Since I want to use the component in the slides as well as as CodeSurfer source this workaround won't work without copying the file (mdx-deck won't load .jsx files).

[trevordmiller]

Awesome! Good find @spicydonuts 👍 Does that work with the mdx-deck build output as well? Sorry I’m mobile now or I’d try it. Should raw-loader be a prod dependency or dev dependency? I’d suggest including that in the docs too. I don’t really know because technically everything is a dev dependency with static html output...but not sure if it matters.

[megamaddu]

Depends on whether mdx-deck is a dev dep.

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

[megamaddu]

I'm not sure the Missing HeadProvider bit is relevant, since it also prints when I delete the slide using CodeSurfer and the build works.

[trevordmiller]

I'm using mdx-deck as a dev dependency, since that is what the mdx-deck readme shows:
https://github.com/jxnblk/mdx-deck

[trevordmiller]

Just tested the latest documentation. Works great! Thanks so much :)