1

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?

Bertrand Martel
  • 42,756
  • 16
  • 135
  • 159
Dair
  • 15,910
  • 9
  • 62
  • 107

1 Answers1

2

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

André Junges
  • 5,297
  • 3
  • 34
  • 48
  • Sorry for the late reply. Your Github presentation seems to work, and I think I should be able to adapt it, but how do you traverse the code? When I get to the slide labeled "Importing React" the arrow keys don't appear to work. What key combination is supposed to be used to step through the code? – Dair Jun 16 '16 at 00:47
  • oh you should use the `up` and `down` arrows. There is an open discussion about use the `right` and `left` arrow as well https://github.com/thejameskyle/spectacle-code-slide/issues/5 – André Junges Jun 16 '16 at 00:49
  • Interesting... What browser are you using? The right and left arrows work well for traversing each slide, but the up and down don't appear to work on traversing the code. I'll look into this. – Dair Jun 16 '16 at 00:51
  • @Dair Im using chrome - take a look in here http://sordid-zephyr.surge.sh/ Its the app deployed.. and it works (at least in chrome) – André Junges Jun 16 '16 at 00:53
  • wait, this http://aspiring-increase.surge.sh/ is the last one - check this one :D – André Junges Jun 16 '16 at 00:54
  • Weird, the website does appear to work. Running `npm install` then `npm start` then loading it on localhost doesn't on Chrome or Safari with my computer... – Dair Jun 16 '16 at 00:58
  • "Uncaught TypeError: Cannot read property 'slide' of undefined" – Dair Jun 16 '16 at 01:00
  • strange, there is no variables with that name (in my code at least), maybe check your packages version.. – André Junges Jun 16 '16 at 01:04
  • 1
    Probably related to this: https://github.com/thejameskyle/spectacle-code-slide/pull/18 – Dair Jun 16 '16 at 01:27
  • Andre can you please share the github repo of the above deployed URL eith code slide? Its working fine locally for me but when I deployed it is giving error on code Code Slide – Preeti Wadhwani Mar 04 '19 at 21:55
  • @GPW the repo is the one mentioned in the answer itself, https://github.com/andrejunges/react-presentation. (maybe the problem is related to an updated package?) – André Junges Mar 05 '19 at 23:23