Not working in production build

[BenocxX]

I made a basic React (SWC) project using Vite.

I have the following main.tsx:

import { RevealSlides } from "react-reveal-slides";

// Make sure reveal.js is installed with npm for the following imports to work
// Plugins
import RevealNotes from "reveal.js/plugin/notes/notes";
import RevealZoom from "reveal.js/plugin/zoom/zoom";

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <div className="h-screen">
      <App />
    </div>
  </StrictMode>
);

function App() {
  return (
    <RevealSlides
      controls={false}
      plugins={[RevealZoom, RevealNotes]}
      onStateChange={(state) => console.log(state)}
    >
      <section key="0" data-background-color="#0c1821">
        <section key="0-0">
          <h2>react-reveal-slides</h2>
          <p>Create dynamic Reveal.js slides</p>
        </section>
        <section key="0-1">
          <ul>
            <li className="fragment">
              Easily make presentation content dynamic
            </li>
            <li className="fragment">Easily add presentations to React apps</li>
            <li className="fragment">
              Embed React components inside presentations
            </li>
          </ul>
        </section>
      </section>
      <section key="1" data-background-color="#bf4f41">
        <section key="1-0">
          <h2>Free reign over your presentation</h2>
          <p>
            This package makes no efforts to impead or restrict what you can do.
          </p>
        </section>
        <section key="1-1">
          <p>
            Since React creates HTML DOM elements out of JSX, there should be no
            reason we cant just put JSX inside of our RevealSlides component
            instead of the HTML markup Reveal.js normally expects.
          </p>
        </section>
        <section key="1-2">
          <p>
            Simply put, React already takes care of converting JSX into
            something Reveal.js can work with.
          </p>
          <aside className="notes">Shhh, these are your private notes 📝</aside>
        </section>
      </section>
    </RevealSlides>
  );
}

When I run npm run dev it works correctly but when I build the project nothing is shown.

I run:

npm run build
npm run preview

I get:

Thanks for the help :)

[bouzidanas]

Try importing the black theme and then look at the elements. It seems that the slides initialized which means stuff should be there.

import 'reveal.js/css/theme/black.css'

[bouzidanas]

Also, make sure the h-screen & #root divs cover the whole screen or a significant part of it. This was all I needed to get it working.

I ran your code and my setup did not like the way you setup createRoot and hotreloading doesnt work unless you put the App component in another file. So I suggest doing that to eliminate any other hindrances.

[BenocxX]

Thanks for the quick answer!

Do you have an example repo I could check out? I created a brand new project and followed the README and made sure my div covered the whole screen, yet it does not work in production, only in dev mode... I also move the App component in it's own file. I kept the default createRoot setup that's there when you create a new React project with Vite. I'm probably doing something wrong, I'd like to check a full example to spot the problem.

[BenocxX]

Also for the theme, I get the following error when I import:

import 'reveal.js/css/theme/black.css'

That being said, I can import it like this:

import "reveal.js/dist/theme/black.css";

[bouzidanas]

Yes, actually there are a few new issues that I have uncovered thanks to investigating your issue.

1. Reveal.js package has updated structure and now the css files are found deeper in the package.
2. To avoid this issue, I had previously copied the css files into react-reveal-slides and when said file was finished loading, the opacity of the slides would transition to 1.

Point 2 is the reason you dont see anything. In your console, it shows that the theme loading failed and so the slides are left completely transparent. They are there but are invisible.

I have added a temporary work around that will be in the next version of the package.

For now, a quick fix for you is to force the opacity of .reveal-viewport to 1. Basically, anywhere in the css add

.reveal-viewport { 
  opacity: 1!important;
}

Once the new version of the package is up on npm, then you can just update to the latest and the issue should be gone. I just need to do some testing to make sure everything is good.

[BenocxX]

Awesome! Thanks a lot for the really quick fix!