fix(ui|git-changelog): missing configurations for @rive-app/canvas

[nekomeowww]

Summaries and troubleshooting steps

When I was working on #124, I found out that the @rive-app/canvas break the other components then came up the temporarily fix at #128. However, the issue didn't went off, after fixing issues with fast-glob, I noticed that the CJS / UMD limitations for @rive-app/canvas where I may have a solution to fix.

According to @rive-app/canvas's documentation, developers should use the package like this:

import * as rive from '@rive-app/canvas'

However, the error will appear as follow or either as what users had described in #124:

 Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'rive')
    at webpackUniversalModuleDefinition (universalModuleDefinition:9:1)
    at universalModuleDefinition:10:2

This seems weird for me, because @rive-app/canvas didn't cause any problems at the very first time I introduce it into Nolebase Integration, it worked really well. The error / issue would only appear when importing as dependency of dependency (for example wrapped the @rive-app/canvas into a component and then install the component into other packages or projects).

I went to search for some advices and suggestions about how the similar issue could get resolved:

• [SSR] window is undefined · Issue #45 · rive-app/rive-wasm
• Vite: "Uncaught TypeError: Cannot read properties of undefined (reading 'Rive')" · Issue #342 · rive-app/rive-wasm

After reading those issues, I noticed that the API / export mode has changed to named exports:

import { Rive } from '@rive-app/canvas'

I tried to use the named exports. But error remained:

Uncaught SyntaxError: The requested module '/node_modules/.pnpm/@[email protected]/node_modules/@rive-app/canvas/rive.js?v=85efb5f9' does not provide an export named 'Rive' (at MyWrappedRiveCanvas.vue:4:10)

It may even produce errors like this when building:

Named export 'Rive' not found. The requested module '@rive-app/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/canvas';
const { Rive } = pkg;

I thought there may be a delay of the changes to package, I switch back to default exports:

import Rive from '@rive-app/canvas'

The error / issue remained still! And even changed every time I change the solution to import it:

Uncaught SyntaxError: The requested module '/node_modules/.pnpm/@[email protected]/node_modules/@rive-app/canvas/rive.js?v=1bcc8ace' does not provide an export named 'default'

At this time, I carefully opened the node_modules to find out why, and saw that the @rive-app/canvas contains no ESM module as exports, with a .d.mjs as definiations.

Until now, I still didn't realize what caused the issue, I thought there might be an issue about SSR, so I changed to dynamic import:

const rive = await import('@rive-app/canvas')

But the issue still remained:

 Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'rive')
    at webpackUniversalModuleDefinition (universalModuleDefinition:9:1)
    at universalModuleDefinition:10:2

I went to check the code that throwed the error:

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory();
	else if(typeof define === 'function' && define.amd)
		define([], factory);
	else if(typeof exports === 'object')
		exports["rive"] = factory();
	else
		root["rive"] = factory();
})

and added breakpoints to inspect the scoped values, found that the root itself is truely undefined:

From this time, I realized that might be issues about interpolation with esbuild that used by Vite:

• Can't use webpackUniversalModuleDefinition in worker · Issue #2350 · vitejs/vite
• Unable to import UMD library · Issue #14605 · vitejs/vite
• javascript - Unable to import webpack-bundled UMD library as an ES6 import - Stack Overflow
• javascript - Every imported function comes up as "undefined", though the import is clearly being made - Stack Overflow

I went to search again to find out more, and finally understand the limitations, scope difference between UMD and ESM. I tried to override the this to typeof window !== "undefined" ? window : this:

console.log('rive this:', this);
(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory();
	else if(typeof define === 'function' && define.amd)
		define([], factory);
	else if(typeof exports === 'object')
		exports["rive"] = factory();
	else
		root["rive"] = factory();
--})(this, () => {
++})(typeof window !== "undefined" ? window : this, () => {

Then the imported module became this:

Module {Symbol(Symbol.toStringTag): 'Module'}

At the end, I went to read how the CJS interpolation works for Dep Optimization Options | Vite, eventually understood the needed and requirements for nested CJS modules:

export default defineConfig({
  optimizeDeps: {
    include: ['esm-dep > cjs-dep'],
  },
})

[github-actions]

✅ Successfully deployed to Netlify

Platform	Status	URL
Ubuntu	Success	https://66040263d72ffe9848254883--nolebase-integrations.netlify.app
Windows	Success	https://6604026b09222399e50a13ba--nolebase-integrations.netlify.app