Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Import Spectacle in server-side

See original GitHub issue

I want to use next.js to render a presentation with spectacle, but I get an error because the hash history is used.

Hash history needs a DOM
Invariant Violation: Hash history needs a DOM
    at invariant (/home/romelperez/projects/prhone/romelperez.com/node_modules/invariant/invariant.js:42:15)
    at createHashHistory (/home/romelperez/projects/prhone/romelperez.com/node_modules/history/createHashHistory.js:69:27)
    at Object.<anonymous> (/home/romelperez/projects/prhone/romelperez.com/node_modules/spectacle/lib/utils/controller.js:50:47)
    at Module._compile (module.js:643:30)
    at Module._compile (/home/romelperez/projects/prhone/romelperez.com/node_modules/source-map-support/source-map-support.js:492:25)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)

I don’t mind not rendering it from the server, but I need it to work in the client.

Is there any workaround?

Issue Analytics

State:
Created 6 years ago
Comments:11 (1 by maintainers)

Top GitHub Comments

3reactions

tim-softcommented, Apr 10, 2018

SSR support would be excellent, conditional require in componentDidMount is obviously not great on performance

Edit: Why not assume you’re on the first slide on the server, then goto the correct slide in the DOM if the hash is different? In most cases, the initial render where SSR comes into play will be the beginning.

1reaction

iamstarkovcommented, Sep 19, 2018

@dharmeshkakadia you do not import anything from spectacle manually, you should utilise (like I use Deck from the callback argument) render prop’s callback’s arguments which reflects spectacle’s exports and they are:

const spectacleExports = [
  "Anim",
  "Appear",
  "BlockQuote",
  "Cite",
  "CodePane",
  "Code",
  "ComponentPlayground",
  "Deck",
  "Fill",
  "Fit",
  "Heading",
  "Image",
  "GoToAction",
  "Layout",
  "Link",
  "ListItem",
  "List",
  "Magic",
  "Markdown",
  "MarkdownSlides",
  "Notes",
  "Quote",
  "S",
  "Slide",
  "SlideSet",
  "TableBody",
  "TableHeader",
  "TableHeaderItem",
  "TableItem",
  "TableRow",
  "Table",
  "Text",
  "Typeface",
  "themes"
];

and I dont see createTheme in this list