spectacle-code-slide not rendering

Question

I am trying to use spectacle-code-slide for a presentation. Currently I have been unable to get it to render anything. Here is what I have done:

1 Cloned spectacle-boilerplate

2 Replaced the default /presentation/index.js with the code in the "Usage" section of spectacle-code-slide, namely (1)

import React from 'react';
import { Spectacle, Deck } from 'spectacle';
import CodeSlide from 'spectacle-code-slide';

export default class Presentation extends React.Component {
  render() {
    return (
      <Spectacle theme={theme}>
        <Deck transition={[]} transitionDuration={0} progress="bar">
          // ...
          <CodeSlide
            transition={[]}
            lang="js"
            code={require("raw!../assets/code.example")}
            ranges={[
              { loc: [0, 270], title: "Walking through some code" },
              { loc: [0, 1], title: "The Beginning" },
              { loc: [1, 2] },
              { loc: [1, 2], note: "Heres a note!" },
              { loc: [2, 3] },
              { loc: [4, 7] },
              { loc: [8, 10] },
              // ...
            ]}/>
          // ...
        </Deck>
      </Spectacle>
    );
  }
}

3 Ran npm install followed by npm install --save spectacle-code-slide.

4 Added (1) to assets/code.example.

5 Ran npm start.

I got:

Listening at http://localhost:3000
webpack built 966ffe50dc640fdaec4a in 4726ms

Checked localhost:3000 and there is only a blank page. No other errors are reported. What is going on?

Answer 1

Well, you can't just replace that whole file. You should just change the section that matters, the render method. And import the components of course..
For example, if you really did replace the whole file, you don't even have the theme variable declared..

You can see an example of that working here
https://github.com/andrejunges/react-presentation/blob/master/presentation/index.js