diff --git a/.changeset/tame-icons-default.md b/.changeset/tame-icons-default.md new file mode 100644 index 00000000..1e21de25 --- /dev/null +++ b/.changeset/tame-icons-default.md @@ -0,0 +1,12 @@ +--- +'@modelscope-studio/frontend': patch +'@modelscope-studio/antdx': patch +'modelscope_studio': patch +--- + +fix(antdx): resolve `Think` component React #130 error in production build + +- Fix default import mapping in the Vite plugin so namespace-style globals + (e.g. `@ant-design/icons`) correctly resolve `import X from 'mod'` to + `.default` instead of the namespace object itself. +- Forward `children` to `XThink` so user-provided content renders. diff --git a/frontend/antdx/think/think.tsx b/frontend/antdx/think/think.tsx index c7c2cd0a..fc01b721 100644 --- a/frontend/antdx/think/think.tsx +++ b/frontend/antdx/think/think.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { Think as XThink, type ThinkProps } from '@ant-design/x'; export const Think = sveltify( - ({ slots, ...props }) => { + ({ slots, children, ...props }) => { return ( <> ( } icon={slots.icon ? : props.icon} title={slots.title ? : props.title} - /> + > + {children} + ); } diff --git a/frontend/plugin.js b/frontend/plugin.js index 3678ea99..3f6554c3 100644 --- a/frontend/plugin.js +++ b/frontend/plugin.js @@ -2,21 +2,48 @@ import { parse, transformFromAstSync, traverse, types as t } from '@babel/core'; import path from 'node:path'; import url from 'node:url'; +// Each entry mirrors how the global is exposed in +// `frontend/svelte-preprocess-react/inject.ts`: +// - namespace: true -> registered via `import * as X from 'mod'` +// (`window.ms_globals.` is the namespace object) +// - namespace: false -> registered via `import X from 'mod'` (or a single +// named binding stored directly), so +// `window.ms_globals.` already is the value. const baseGlobals = { - react: 'window.ms_globals.React', - 'react-dom': 'window.ms_globals.ReactDOM', - 'react-dom/client': 'window.ms_globals.ReactDOMClient', - antd: 'window.ms_globals.antd', - antdx: 'window.ms_globals.antdx', - '@ant-design/cssinjs': 'window.ms_globals.antdCssinjs', - '@ant-design/icons': 'window.ms_globals.antdIcons', + react: { ref: 'window.ms_globals.React', namespace: false }, + 'react-dom': { ref: 'window.ms_globals.ReactDOM', namespace: false }, + 'react-dom/client': { + ref: 'window.ms_globals.ReactDOMClient', + namespace: false, + }, + antd: { ref: 'window.ms_globals.antd', namespace: true }, + antdx: { ref: 'window.ms_globals.antdx', namespace: true }, + '@ant-design/cssinjs': { + ref: 'window.ms_globals.antdCssinjs', + namespace: true, + }, + '@ant-design/icons': { + ref: 'window.ms_globals.antdIcons', + namespace: true, + }, - '@svelte-preprocess-react/react-contexts': - 'window.ms_globals.internalReactContexts', - dayjs: 'window.ms_globals.dayjs', - '@utils/createItemsContext': 'window.ms_globals.createItemsContext', - '@globals/components': 'window.ms_globals.components', - '@monaco-editor/loader': 'window.ms_globals.monacoLoader', + '@svelte-preprocess-react/react-contexts': { + ref: 'window.ms_globals.internalReactContexts', + namespace: true, + }, + dayjs: { ref: 'window.ms_globals.dayjs', namespace: false }, + '@utils/createItemsContext': { + ref: 'window.ms_globals.createItemsContext', + namespace: true, + }, + '@globals/components': { + ref: 'window.ms_globals.components', + namespace: true, + }, + '@monaco-editor/loader': { + ref: 'window.ms_globals.monacoLoader', + namespace: false, + }, }; const dirname = path.dirname(url.fileURLToPath(import.meta.url)); @@ -56,8 +83,8 @@ export const ModelScopeStudioVitePlugin = ({ external = true } = {}) => { ...userConfig.define, 'process.env.NODE_ENV': JSON.stringify('production'), }; + userConfig.build ??= {}; if (external) { - userConfig.build ??= {}; userConfig.build.rollupOptions ??= {}; userConfig.build.rollupOptions.external = [ ...(userConfig.build.rollupOptions.external || []), @@ -90,8 +117,8 @@ export const ModelScopeStudioVitePlugin = ({ external = true } = {}) => { enterPath.traverse({ ExportNamedDeclaration(nodePath) { const source = nodePath.node.source?.value; - const variable = globals[source]; - if (!variable) { + const entry = globals[source]; + if (!entry) { return; } const { specifiers } = nodePath.node; @@ -100,7 +127,7 @@ export const ModelScopeStudioVitePlugin = ({ external = true } = {}) => { return t.variableDeclarator( specifier.local, t.memberExpression( - t.identifier(variable), + t.identifier(entry.ref), specifier.local ) ); @@ -113,9 +140,9 @@ export const ModelScopeStudioVitePlugin = ({ external = true } = {}) => { }, ImportDeclaration(nodePath) { const source = nodePath.node.source.value; - const variable = globals[source]; + const entry = globals[source]; - if (!variable) { + if (!entry) { return; } @@ -128,22 +155,30 @@ export const ModelScopeStudioVitePlugin = ({ external = true } = {}) => { const decls = specifiers.map((specifier) => { switch (specifier.type) { case 'ImportDefaultSpecifier': + // For namespace-style globals, the default export + // lives at `.default`. For value-style globals, + // `` itself already is the default value. return t.variableDeclarator( specifier.local, - t.identifier(variable) + entry.namespace + ? t.memberExpression( + t.identifier(entry.ref), + t.identifier('default') + ) + : t.identifier(entry.ref) ); case 'ImportSpecifier': return t.variableDeclarator( specifier.local, t.memberExpression( - t.identifier(variable), + t.identifier(entry.ref), specifier.imported ) ); case 'ImportNamespaceSpecifier': return t.variableDeclarator( specifier.local, - t.identifier(variable) + t.identifier(entry.ref) ); default: throw new Error(