Spectacle: React Presentation Framework

Common errors

• Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

  cause Incorrectly importing Spectacle components, e.g., using `import Component from 'spectacle';` instead of `import { Component } from 'spectacle';`.
  fix Ensure all Spectacle components are imported as named exports: `import { Deck, Slide } from 'spectacle';`.

• TypeError: Cannot read properties of undefined (reading 'Fragment')

  cause React version mismatch. Spectacle versions >=10.2.2 require React 18 or higher. If your project uses an older React version, this error can occur.
  fix Upgrade your project's `react` and `react-dom` dependencies to `^18.0.0` or higher to match Spectacle's peer dependency requirements. Example: `npm install react@^18 react-dom@^18`.

• Module not found: Error: Can't resolve 'spectacle' in '...' OR `ReferenceError: exports is not defined`

  cause Mixing CommonJS `require()` syntax with an ESM-first library, or incorrect module resolution configuration in older bundlers.
  fix Ensure your project is configured for ESM and use `import { ... } from 'spectacle';` syntax. If using webpack, ensure `resolve.fullySpecified: false` is not set or that your `tsconfig.json` `module` option is appropriate (e.g., `esnext`, `node16`).

Warnings

• breaking Spectacle v10.2.2 replaced `defaultProps` with the `attrs` method for React 19 compatibility. While primarily an internal change, consumers relying on direct access or manipulation of `defaultProps` on Spectacle components in older versions (pre-10.2.2) may experience unexpected behavior or build failures when upgrading to React 19. Ensure you are on Spectacle `10.2.2` or newer for React 19 support.
  Fix: Upgrade `spectacle` to `10.2.2` or later. Review your component code for any direct access or reliance on `defaultProps` on Spectacle components; prefer using props directly.
• gotcha The `create-spectacle` CLI tool, used for scaffolding new projects, was updated in `create-spectacle@0.4.0` to use an ESM/import map-based one-page setup. Older `create-spectacle` versions might generate projects with outdated configurations or module resolution patterns.
  Fix: Always use the latest version of `create-spectacle` for scaffolding new projects: `npx create-spectacle@latest`.
• gotcha Spectacle requires `react` and `react-dom` as peer dependencies. Mismatched versions between Spectacle and your project's React installation (e.g., Spectacle expecting React 18 but your project using React 17) can lead to various runtime errors, including issues with hooks or rendering.
  Fix: Ensure your project's `react` and `react-dom` versions satisfy Spectacle's peer dependency requirement (`>=18.0.0`). Use `npm ls react react-dom` to check installed versions and `npm install react@^18.0.0 react-dom@^18.0.0` to update if necessary.
• gotcha The `Heading` component's secondary color styling was inadvertently lost in v10.2.2 due to the internal `defaultProps` replacement. This was fixed in v10.2.3. If using v10.2.2, your headings might not apply the correct theme color.
  Fix: Upgrade to `spectacle@10.2.3` or newer to restore correct heading styling.

Install

• npm install spectacle npm
• yarn add spectacle yarn
• pnpm add spectacle pnpm

Imports

• Deck
  wrong:

  const { Deck } = require('spectacle');

  correct:

  import { Deck, Slide, Heading, Text } from 'spectacle';

  Spectacle is an ESM-first library. CommonJS `require` may lead to incorrect bundling or runtime errors, especially with named exports.
• FlexBox
  wrong:

  import FlexBox from 'spectacle';

  correct:

  import { FlexBox } from 'spectacle';

  Most Spectacle components are named exports. Attempting to import them as default exports will result in undefined.
• createTheme
  wrong:

  import * as spectacle from 'spectacle'; const theme = spectacle.createTheme(...);

  correct:

  import { createTheme } from 'spectacle';

  While `import * as` works, directly importing `createTheme` is the idiomatic way to configure themes for your presentation.

Quickstart

This quickstart demonstrates how to create a basic Spectacle presentation using the `Deck`, `Slide`, `Heading`, `Text`, `Box`, and `FlexBox` components, along with a custom theme.

import React from 'react';
import {
  Deck,
  Slide,
  Heading,
  Text,
  Box,
  FlexBox,
  createTheme,
} from 'spectacle';

const theme = createTheme(
  {
    primary: 'white',
    secondary: '#1F2022',
    tertiary: '#03A9F4',
    quaternary: '#CECECE',
  },
  {
    primary: 'Inter',
    secondary: 'Helvetica',
  }
);

function Presentation() {
  return (
    <Deck theme={theme}>
      <Slide backgroundColor="primary">
        <Heading color="secondary">Welcome to Spectacle!</Heading>
        <Text color="tertiary">
          A ReactJS Powered Presentation Framework
        </Text>
      </Slide>
      <Slide backgroundColor="secondary">
        <FlexBox height="100%" flexDirection="column" justifyContent="center" alignItems="center">
          <Heading fontSize="h2" color="primary">Key Features</Heading>
          <Box margin="20px 0">
            <Text color="quaternary">🔥 Full React Ecosystem</Text>
            <Text color="quaternary">🎨 Highly Customizable Themes</Text>
            <Text color="quaternary">🚀 Interactive Slides</Text>
          </Box>
        </FlexBox>
      </Slide>
      <Slide backgroundColor="tertiary">
        <Heading fontSize="h3" color="primary">Get Started</Heading>
        <Text color="secondary">
          Install with `npm install spectacle react react-dom`
        </Text>
        <Text color="secondary">
          Then run your React app!
        </Text>
      </Slide>
    </Deck>
  );
}

export default Presentation;