fix(addon-bangumi): runtime error in browser

[WRXinYue]

Restored valaxy-addon-bangumi to a basic working state.

At this line, the following error occurs:

valaxy/packages/valaxy-addon-bangumi/components/ValaxyBangumi.vue

Line 10 in a58ca38

import { defineCustomElements } from 'bilibili-bangumi-component/dist/cjs/loader.cjs'

Uncaught (in promise) SyntaxError: The requested module '/@fs/home/wrxinyue/Documents/my_project/valaxy-theme-sakura/node_modules/.pnpm/bilibili-bangumi-component@0.3.0/node_modules/bilibili-bangumi-component/dist/cjs/loader.cjs.js?v=29b10672' does not provide an export named 'defineCustomElements' (at ValaxyBangumi.vue:2:10)

In this case, a wildcard import should be used:

import * as bilibiliBangumi from 'bilibili-bangumi-component/dist/cjs/loader.cjs';

bilibiliBangumi.defineCustomElements();

However, this change causes a ReferenceError: exports is not defined in the browser environment when running the code, which stems from the following loader.cjs file:

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-a58f24cb.js');

const defineCustomElements = (win, options) => {
  if (typeof window === 'undefined') return undefined;
  return index.bootstrapLazy([["bilibili-bangumi.cjs",[[1,"bilibili-bangumi",{"api":[1],"bilibiliUid":[1,"bilibili-uid"],"bgmUid":[1,"bgm-uid"],"bilibiliEnabled":[4,"bilibili-enabled"],"bgmEnabled":[4,"bgm-enabled"],"pageSize":[2,"page-size"],"customEnabled":[4,"custom-enabled"],"customLabel":[1,"custom-label"],"loading":[32],"error":[32],"pageNumber":[32],"responseData":[32],"activePlatform":[32],"activeSubject":[32],"collectionLabels":[32],"activeCollection":[32]}]]]], options);
};

exports.setNonce = index.setNonce;
exports.defineCustomElements = defineCustomElements;

In general, using CommonJS in browser environments is problematic and would require additional configuration in tsconfig.json. Therefore, it's better to stick to ESM when possible.

Regarding issue #346, it’s important to clarify that in Vite 6, ESM modules should use the .mjs or .mts extensions; otherwise, they might be treated as CJS. As mentioned in the Vite CJS Node API deprecated notice, using the .mjs/.mts extensions for ESM files is recommended. Although setting "type": "module" in package.json is an option, it may have unintended consequences for the bilibili-bangumi-component CommonJS module.

Given that this is a Vite-specific issue, and since the browser environment natively supports ESM, a dynamic import in the browser can be used as a workaround. Nonetheless, this is a hacky solution, and it’s preferable for bilibili-bangumi-component to receive broader support for ESM.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
valaxy-docs-dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 22, 2024 9:39am

[github-actions]