[SOLVED] Spectacle Code Slide extension not working

I've built a presentation using the spectacle boilerplate. spectacle github This all works as expected. The problem I have is when I try to use spectacle code-slide extension. I've included a prism css file and the code is loaded and highlighted. However I'm unable to step through the blocks of code defined in the presentation. I can't arrow down through the defined blocks.

Any help greatly appreciated.

// Import React
import React from 'react';
import CodeSlide from 'spectacle-code-slide';
import preloader from 'spectacle/lib/utils/preloader';


// Import Spectacle Core tags
import {
  BlockQuote,
  Cite,
  Deck,
  Heading,
  Image,
  List,
  ListItem,
  Notes,
  Quote,
  Slide,
  Text
} from 'spectacle';

// Import theme
import createTheme from 'spectacle/lib/themes/default';

const images = {
  formidagon: require('../assets/formidable-logo.svg'),
  goodWork: require('../assets/good-work.gif'),
  jobs: require('../assets/stevejobs.gif'),
  library: require('../assets/library-dub.jpg'),
  conference: require('../assets/conference.png'),
  uxdx: require('../assets/uxdx.png'),
  aws: require('../assets/aws.png'),
  bbc: require('../assets/bbc.png'),
  agile: require('../assets/agile.png'),
  nix: require('../assets/nix.png')
};


preloader(images);

// Require CSS
require('normalize.css');
require('../themes/prism-atom-dark.css');


const theme = createTheme(
  {
    primary: 'black',
    secondary: '#1F2022',
    tertiary: '#03A9FC',
    quaternary: '#CECECE',
    quinterary: '#E07CE6'
  },
  {
    primary: 'Montserrat',
    secondary: 'Helvetica'
  }
);

export default class Presentation extends React.Component {
  render() {
    return (
      <Deck
        theme={theme}
      >
        <Slide transition={['zoom']} bgColor="primary">
          <Heading size={1} fit caps lineHeight={1} textColor="secondary">
            UXDX
          </Heading>
          <Text margin="10px 0 0" textColor="tertiary" fit bold>
          October 7 - 8, 2019
          </Text>
          <Text size={5} margin="10px 0 0" textColor="quinterary" bold>
          Royal Dublin Society
          </Text>
        </Slide>
        <Slide bgImage={images.library} bgLighten="0.5">
          <Image src={images.jobs} width={500} />
        </Slide>
        <Slide transition={['fade']} bgColor="secondary" textColor="primary">
          <BlockQuote>
            <Quote>Sometimes life is going to hit you in the head with a brick. Don't lose faith.</Quote>
            <Cite margin="10px 0 0 30px">Steve Jobs</Cite>
          </BlockQuote>
        </Slide>
        <Slide bgImage={images.conference}>
        </Slide>
        <Slide bgImage={images.uxdx}>
        </Slide>
        <Slide bgImage={images.library} bgLighten="0.5">
          <Image src={images.jobs} width={500} />
        </Slide>
        <Slide transition={['fade']} bgColor="secondary" textColor="primary">
          <BlockQuote>
            <Quote>It's really hard to design products by focus groups. A lot of times, people don't know what they want until you show it to them.</Quote>
            <Cite margin="10px 0 0 30px">Steve Jobs</Cite>
          </BlockQuote>
        </Slide>
        <Slide transition={[]} bgColor="primary" textColor="tertiary">
          <Heading size={6} textColor="secondary" transition={['fade']} caps>
            How long is a piece of string?: The key to solving the conundrum of software estimation
          </Heading>
          <List>
            <ListItem>Estimation = Hard </ListItem>
            <ListItem>#noestimates</ListItem>
            <ListItem>Trust = Good</ListItem>
          </List>
        </Slide>
        <Slide transition={['fade']} bgColor="tertiary">
          <Heading size={6} textColor="primary" caps>
            Typography
          </Heading>
          <Slide>
            <div>
              <Image src={images.nix} width={250} />
              <Image src={images.aws} width={250} />
            </div>
          </Slide>
          <Heading size={1} textColor="secondary">
            Heading 1
          </Heading>
        </Slide>
        <Slide>
          <Image src={images.bbc} width={500} />
        </Slide>
        <Slide>
          <Image src={images.agile} width={500} />
        </Slide>
        <Slide>
          <Image src={images.duolingo} width={500} />
        </Slide>
        <Slide>
          <CodeSlide
            lang="js"
            code={require('!raw-loader!../assets/code.js')}
            overflow="overflow"
            textSize=".6em"
            ranges={[
              { loc: [0, 10], 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], title: 'images.stevejobs' },
              { loc: [8, 10] }]}
          />
        </Slide>
      </Deck>
    );
  }
}

Here's my output when starting the dev server. Not sure if extension is installed properly. Will try redo from scratch.

Listening at http://localhost:3000
Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade caniuse-lite browserslist`
webpack built 84507422d0bfe70c0b73 in 4869ms
ℹ ｢wdm｣: Hash: 84507422d0bfe70c0b73
Version: webpack 4.20.2
Time: 4869ms
Built at: 17/10/2019 07:27:04
        Asset      Size  Chunks             Chunk Names
    bundle.js   9.4 MiB    main  [emitted]  main
bundle.js.map  9.32 MiB    main  [emitted]  main
Entrypoint main = bundle.js bundle.js.map
[0] multi @babel/polyfill webpack-hot-middleware/client react-hot-loader/patch ./index 64 bytes {main} [built]
[./index.js] 1.42 KiB {main} [built]
[./node_modules/@babel/polyfill/lib/index.js] 893 bytes {main} [built]
[./node_modules/core-js/es6/index.js] 5.74 KiB {main} [built]
[./node_modules/core-js/fn/array/includes.js] 109 bytes {main} [built]
[./node_modules/core-js/fn/object/entries.js] 109 bytes {main} [built]
[./node_modules/core-js/fn/object/get-own-property-descriptors.js] 148 bytes {main} [built]
[./node_modules/core-js/fn/object/values.js] 107 bytes {main} [built]
[./node_modules/core-js/fn/promise/finally.js] 166 bytes {main} [built]
[./node_modules/core-js/fn/string/pad-end.js] 108 bytes {main} [built]
[./node_modules/core-js/fn/string/pad-start.js] 112 bytes {main} [built]
[./node_modules/core-js/fn/symbol/async-iterator.js] 123 bytes {main} [built]
[./node_modules/core-js/web/index.js] 157 bytes {main} [built]
[./node_modules/react-hot-loader/patch.js] 228 bytes {main} [built]
[./node_modules/webpack-hot-middleware/client.js] (webpack)-hot-middleware/client.js 7.59 KiB {main} [built]
    + 1137 hidden modules
ℹ ｢wdm｣: Compiled successfully.