Named export 'Alignment' not found In Remix Run

[lenniezelk]

Getting this error when using '@rive-app/react-canvas' in Remix run

Typescript version: 5.1.6 React version: 18.2.0 Remix Run version: 2.3.1

[giancarlosisasi]

Same issue with rsbuild

https://github.com/web-infra-dev/rspack/issues/7022

[mckayreedmoore]

I have the same issue.

Error:

Internal server error: [vite] Named export 'Alignment' not found. The requested module '@rive-app/react-canvas' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using: import pkg from '@rive-app/react-canvas'; const {Layout, Fit, Alignment} = pkg;

Using the suggested changes doesn't work. When they are implemented it says that the names don't exist in the package.

@rive-app/react-canvas : 4.14.8 typescript : 5.1.6 remix-run : 2.11.2 react : 18.2.20

[DanAndreasson]

Running into this error as well. Anyone who found a solution?

[lexarocks]

the same issue with Vite

[kaori-igawa]

I got a similar error when using Rive in the astro react component.

[ERROR] [vite] Named export 'Alignment' not found. The requested module '@rive-app/react-canvas' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@rive-app/react-canvas';
const {Layout, Fit, Alignment} = pkg;

[rryando]

I figured out that in Vite, Fit, Layout, and other modules except useRive only exist after rive canvas is initialized. so as workaround, we need to create a default import for module only,

// rive-shim.ts
// bypass vite module export problem
import * as RiveModule from "@rive-app/react-canvas";

export const Layout = RiveModule.Layout;
export const Fit = RiveModule.Fit;
export const Alignment = RiveModule.Alignment;

// add any other modules that not exist before canvas initialize if needed

in the script that load the rive / going to load module

import { useRive } from "@rive-app/react-canvas";
import { Fit, Layout } from "./rive-shim";

let canvasLayout: any;

export default function RiveTest() {
	// load in client only - bypass SSR module not found
	try {
		canvasLayout = new Layout({
			fit: Fit.Layout,
			layoutScaleFactor: 0.95,
		});
	} catch {

	}

	const { rive, RiveComponent } = useRive({
		src: quizRiv,
		stateMachines: STATE_MACHINE_NAME,
		autoplay: true,
		layout: canvasLayout,
	});

...
}

the idea is, (in my case remix) we bypass module not found in the SSR rive load, when client-side hydration, the Layout module should exist and initialized properly within useRive hook

[ankitsahu01]

There is an alternative way as well. Install this @loadable/component package:

npm i @loadable/component @types/loadable__component

Then Just import your animation file like this, (It will load your component on client side)

const RiveAnimation = loadable(() => import("./your-animation-file"), { ssr: false });

Then you will be able to import Layout, Fit, Alignment, etc in your animation file directly like below code:

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

[!IMPORTANT] Its working, I used this solution. This will work for charts as well.