Vite: "Uncaught TypeError: Cannot read properties of undefined (reading 'Rive')"

[mandrasch]

Description

Hi! I'm just getting started with Rive.

I wanted to create a simple demo with Vite (vanilla-ts) and I ran into the following error locally:

Uncaught TypeError: Cannot read properties of undefined (reading 'Rive')
    at main.ts:30:22

Line 30, main.ts:

const canvas = document.getElementById("canvas") as HTMLCanvasElement|null; 
if(canvas !== null){
  const r = new rive.Rive({

I found another post on Discord, same error: Discord Post

I suspect this is because I'm trying to play a Rive file before the WASM file is loaded. But how do I check if that file is loaded?

Provide a Repro

• Stackblitz reproduction: https://stackblitz.com/edit/vitejs-vite-kmmmbl?file=index.html
• Repo GitHub: https://github.com/mandrasch/rive-vite-demo

The production build works fine though: https://rive-vite-demo.vercel.app/

Source .riv/.rev file

• See https://github.com/mandrasch/rive-vite-demo, example .riv file used

Expected behavior

• No error, Rive should load locally on Vite for local development

Screenshots

Browser & Versions (please complete the following information)

• Browser: Chrome Stable 120
• OS: macOS 13.5.2
• NPM Version: 9.8.0

Additional context

Thanks in advance for any hints! 👋 Cheers! 🙂

[Aratmany]

Hi, you can try doing it like this and it will work fine

1. change import like this
2. change this code to const r = new rive.Rive changes to this => const r = new Rive

[mandrasch]

Thanks very much, @Aratmany!

Updated my repo. Works great! 🥳

Info:

I followed this guide here (https://help.rive.app/runtimes/overview/web-js#id-1.-install-the-dependency), maybe an info box for Vite users would be helpful when getting started with Rive. Cheers!

[zplata]

Thanks for the repro! Was trying to dig into Vite docs on why this might be an issue. First guess is that it has to do with Vite serving as ESM, and having issues with default imports on UMD builds. But we'll work on adding a blurb in the web docs to make this clearer for Vite config.

[mandrasch]

👍 you're welcome!

I'm not a pro in the field of ESM vs UMD unfortunately. Would be cool to find out what's going on.

---

Maybe Dep Optimization Options and Dependency Pre-Bundling is also relevant.

Also tried it with this Vite setting

 optimizeDeps: {
    include: ["@rive-app/canvas"],
  },

But

import rive from "@rive-app/canvas";
let layout = new rive.Layout({
// etc.

also still gave Vite: "Uncaught TypeError: Cannot read properties of undefined (reading 'Rive') with that in the browser.

---

Btw: I just added Layout as well and needed to use

  import { Rive, Layout, Fit } from "@rive-app/canvas";
  // ...
  let layout = new Layout({
    fit: Fit.Cover,
  });  

instead of the functions described for Web in https://help.rive.app/runtimes/layout like let layout = new rive.Layout({

So it affects all functions described in the docs.

[zplata]

Hey @mandrasch - had to take a step back and refresh on what the main exports are here, but this is a docs issue mainly. The new rive.Rive({...}) occasionally used in code snippets across docs comes from rive being exposed as a global variable if you include the unpkg script to pull in the library in plain HTML/JS projects, for example.

When importing the high-level @rive-app/canvas library however, you'll need to import the named exports to use the API, so like it was suggested above (and as you discovered with the Layout scenario too), you'll need to do:

import {Rive, Layout, Fit, Alignment} from "@rive-app/canvas";

or alternatively, if you want a "default import" of a sort, you could do:

import * as rive from "@rive-app/canvas";

We updated docs now to reflect this clarification

[mandrasch]

Hi @zplata,

ah, makes sense. Thanks very much for explanation! 👍 👍