TokContext is not a constructor

Hi there!

I’m eager to try out spectacle but unfortunately I’m running into some problems that I can not seem to fix!

Prerequisites

Feel free to delete this section if you have checked off all of the following.

• [V] I’ve searched open issues to make sure I’m not opening a duplicate issue
• [V] This issue not specific to spectacle-boilerplate (those issues should be opened here).
• [V] I have read through the docs before asking a question
• [V] I am using the latest version of Spectacle

Describe Your Environment

What version of Spectacle are you using? (can be found by running npm list spectacle) └─┬ spectacle-scripts@2.0.0 └── spectacle@4.4.1

What version of React are you using? (can be found by running npm list react) talk-251018-workers@0.1.0 /Users/timkuilman/Projects/talk-251018-workers └── react@16.5.2 What browser are you using? Firefox / Chrome

What machine are you on? Macbook

Describe the Problem

I created a new project running npx create-react-app my-presentation --scripts-version spectacle-scripts. After that I ran yarn and yarn start. The browser pops up opening localhost:3000 but outputs an error. (Included at the end of this issue)

Expected behavior: [What you expect to happen] No errors 😃

Actual behavior: [What actually happens] See the error at ‘browser output’

browser output

TypeError: TokContext is not a constructor
./node_modules/buble/dist/buble-browser.es.js/<
node_modules/buble/dist/buble-browser.es.js:271

  268 | var isIdentifierStart = require$$0.isIdentifierStart;
  269 | var isIdentifierChar = require$$0.isIdentifierChar;
  270 | 
> 271 | var tc_oTag = new TokContext('<tag', false);
  272 | var tc_cTag = new TokContext('</tag', false);
  273 | var tc_expr = new TokContext('<tag>...</tag>', true, true);
  274 | 

./node_modules/buble/dist/buble-browser.es.js
node_modules/buble/dist/buble-browser.es.js:1

> 1 | import require$$0, { Parser } from 'acorn';
  2 | import MagicString from 'magic-string';
  3 | 
  4 | var xhtml = {

__webpack_require__
/Users/timkuilman/Projects/talk-251018-workers/webpack/bootstrap f65e30097adc8a72858b:678

  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;

fn
/Users/timkuilman/Projects/talk-251018-workers/webpack/bootstrap f65e30097adc8a72858b:88

  85 | 		console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 | 		hotCurrentParents = [];
  87 | 	}
> 88 | 	return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 | 	return {

./node_modules/react-live/dist/react-live.es.js
node_modules/react-live/dist/react-live.es.js:1

> 1 | import { highlight, languages } from 'prismjs/components/prism-core';
  2 | import 'prismjs/components/prism-clike';
  3 | import 'prismjs/components/prism-javascript';
  4 | import 'prismjs/components/prism-markup';

__webpack_require__
/Users/timkuilman/Projects/talk-251018-workers/webpack/bootstrap f65e30097adc8a72858b:678

  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;

fn
/Users/timkuilman/Projects/talk-251018-workers/webpack/bootstrap f65e30097adc8a72858b:88

  85 | 		console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 | 		hotCurrentParents = [];
  87 | 	}
> 88 | 	return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 | 	return {

./node_modules/spectacle/es/components/code-pane.js
node_modules/spectacle/es/components/code-pane.js:1

> 1 | function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
  2 | 
  3 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  4 | 

__webpack_require__
/Users/timkuilman/Projects/talk-251018-workers/webpack/bootstrap f65e30097adc8a72858b:678

  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;

fn
/Users/timkuilman/Projects/talk-251018-workers/webpack/bootstrap f65e30097adc8a72858b:88

  85 | 		console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 | 		hotCurrentParents = [];
  87 | 	}
> 88 | 	return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 | 	return {

./node_modules/spectacle/es/index.js
node_modules/spectacle/es/index.js:1

> 1 | import Anim from './components/anim';
  2 | import Appear from './components/appear';
  3 | import BlockQuote from './components/block-quote';
  4 | import Cite from './components/cite';

__webpack_require__
/Users/timkuilman/Projects/talk-251018-workers/webpack/bootstrap f65e30097adc8a72858b:678

  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;

fn
/Users/timkuilman/Projects/talk-251018-workers/webpack/bootstrap f65e30097adc8a72858b:88

  85 | 		console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 | 		hotCurrentParents = [];
  87 | 	}
> 88 | 	return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 | 	return {

./src/presentation.js
http://localhost:3000/static/js/bundle.js:107362:68
__webpack_require__
/Users/timkuilman/Projects/talk-251018-workers/webpack/bootstrap f65e30097adc8a72858b:678

  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;

fn
/Users/timkuilman/Projects/talk-251018-workers/webpack/bootstrap f65e30097adc8a72858b:88

  85 | 		console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 | 		hotCurrentParents = [];
  87 | 	}
> 88 | 	return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 | 	return {

./src/index.js
http://localhost:3000/static/js/bundle.js:107332:72
__webpack_require__
/Users/timkuilman/Projects/talk-251018-workers/webpack/bootstrap f65e30097adc8a72858b:678

  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;

fn
/Users/timkuilman/Projects/talk-251018-workers/webpack/bootstrap f65e30097adc8a72858b:88

  85 | 		console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 | 		hotCurrentParents = [];
  87 | 	}
> 88 | 	return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 | 	return {

0
http://localhost:3000/static/js/bundle.js:107772:18
__webpack_require__
/Users/timkuilman/Projects/talk-251018-workers/webpack/bootstrap f65e30097adc8a72858b:678

  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;

(anonymous function)
/Users/timkuilman/Projects/talk-251018-workers/webpack/bootstrap f65e30097adc8a72858b:724

  721 | __webpack_require__.h = function() { return hotCurrentHash; };
  722 | 
  723 | // Load entry module and return exports
> 724 | return hotCreateRequire(0)(__webpack_require__.s = 0);
  725 | 
  726 | 
  727 | 

(anonymous function)
http://localhost:3000/static/js/bundle.js:1:11
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

[ssmyczynski]

Found solution somewhere else:

npm install buble@0.19.4

Works for me. (https://github.com/pedronauck/docz/issues/416#issuecomment-430520805)

[jtiscione]

Success here also, with the “classic setup” created by npx create-react-app my-presentation --scripts-version spectacle-scripts. I inserted “buble”: “0.19.4” in package.json (i.e. the exact version).