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.

Prism error in CodePane component using spectacle-scripts

See original GitHub issue

Title sums it up. I used spectacle-scripts to create the slide deck and added this codepane slide:

        <CodePane lang="reason" source={interop} />

To be thorough I tried this too:

        <CodePane lang="js" source="var foo = 'bar';" />

The slide crashes with the following:

Uncaught TypeError: Cannot read property 'buildPlaceholders' of undefined
    at prism-handlebars.js:30
    at Object.run (prism-core.js:451)
    at highlight (prism-core.js:280)
    at prism (react-live.es.js:23)
    at Editor.componentWillMount (react-live.es.js:393)
    at callComponentWillMount (react-dom.development.js:6860)
    at mountClassInstance (react-dom.development.js:6956)
    at updateClassComponent (react-dom.development.js:8325)
    at beginWork (react-dom.development.js:8966)
    at performUnitOfWork (react-dom.development.js:11798)
    at workLoop (react-dom.development.js:11827)
    at HTMLUnknownElement.callCallback (react-dom.development.js:104)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:142)
    at invokeGuardedCallback (react-dom.development.js:191)
    at replayUnitOfWork (react-dom.development.js:11302)
    at renderRoot (react-dom.development.js:11869)
    at performWorkOnRoot (react-dom.development.js:12422)
    at performWork (react-dom.development.js:12343)
    at performSyncWork (react-dom.development.js:12320)
    at requestWork (react-dom.development.js:12220)
    at scheduleWorkImpl (react-dom.development.js:12095)
    at scheduleWork (react-dom.development.js:12055)
    at scheduleRootUpdate (react-dom.development.js:12683)
    at updateContainerAtExpirationTime (react-dom.development.js:12711)
    at Object.updateContainer (react-dom.development.js:12730)
    at ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:16030)
    at react-dom.development.js:16449
    at Object.unbatchedUpdates (react-dom.development.js:12530)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:16445)
    at Object.render (react-dom.development.js:16513)
    at Object../src/index.js (index.js:6)
    at __webpack_require__ (bootstrap 18113f8090508b41993d:678)
    at fn (bootstrap 18113f8090508b41993d:88)
    at Object.0 (registerServiceWorker.js:108)
    at __webpack_require__ (bootstrap 18113f8090508b41993d:678)
    at ./node_modules/acorn/dist/acorn.es.js.Object.defineProperty.value (bootstrap 18113f8090508b41993d:724)
    at bootstrap 18113f8090508b41993d:724

Happy to provide more information on request. Thanks for this fantastic presentation lib and for taking the time to read this issue.

Issue Analytics

State:
Created 5 years ago
Reactions:2
Comments:8

Top GitHub Comments

6reactions

MarcelCuttscommented, Apr 19, 2018

For folks looking for a solution that works right now, you’ll have to add something like this to your package.json

"resolutions": {
    "spectacle/**/prismjs": "1.6.0"
  }

Then run yarn again. I do not think a solution like this exists for NPM users but may be wrong.

This will enforce all your sub-dependencies of spectacle to use prism at exactly 1.6.0, which does not have these issues.

N.B. You may have to eject first, but I am unsure about this and have not tested it on an un-ejected instance.

2reactions

sslotskycommented, Apr 15, 2018

I built this project locally with a few different versions of prism. The latest release, 1.14.0, is the first with the issue I reported. The previous release, 1.13.0, seemed not to work at all. But 1.6.0 and 1.12.0 both appear to work fine.

Top Results From Across the Web

Prism Documentation - CodePen

Requiring prismjs will load the default languages: markup , css , clike and javascript . You can load more languages with the loadLanguages()...

prism.js example - CodePen

Insecure Resource. The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https....

Trie Data Structure - CodePen

Performant loading and insertion of large datasets. Inserts 274918 words in ~0.85 seconds and can search for wildcard strings like a*********, returni...

A Pen by stevenlundy - CodePen

Insecure Resource. The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https....

Prism.js example - CodePen

Insecure Resource. The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https....