作成日: 2025/09/18 最終更新日: 2026/02/04
文書種別
不具合
発生環境
- React 19でのみ発生
- FlexGridのCellTemplate、TabPanelのコンテンツテンプレート、MenuのMenuItemテンプレートなど、テンプレート機能を使用するすべてのWijmo Reactコンポーネントを使用した場合に発生
状況
修正済み
詳細
テンプレート機能を使用するWijmo Reactコンポーネントを使用したときに、React 19 + Viteプロジェクトの本番環境では動作しません。(※テンプレートを使用しないコンポーネントは影響を受けません。)
コントロールがページに読み込まれず、下記エラーがコンソールに発生します。
Uncaught TypeError: Xu.createRoot is not a function
at HC (main.Dop4oM-I.js:71:9257)
at e._renderCell (main.Dop4oM-I.js:136:7066)
at e.renderTemplate (main.Dop4oM-I.js:136:6179)
at e._processTemplate (main.Dop4oM-I.js:125:4823)
at e.updateCell (main.Dop4oM-I.js:125:3648)
at l._renderCell (main.Dop4oM-I.js:103:28215)
at l._renderRow (main.Dop4oM-I.js:103:26241)
at a (main.Dop4oM-I.js:103:20968)
at l._updateCells (main.Dop4oM-I.js:103:21229)
at l._updateContent (main.Dop4oM-I.js:103:20794)
回避方法
この問題はバージョン5.20252.44で修正されました。
修正版を適用しない場合の回避方法は次の通りです。
「vite.config.ts」ファイルに下記のコードを追加してカスタムプラグインを使用します。
function wijmoWorkaroundPlugin() {
return {
name: 'wijmo-plugin',
transform(code: string, id: string) {
if (id.includes('wijmo.react.base') || code.includes('lazyImportDomClient')) {
const functionStart = 'function lazyImportDomClient()';
const startIndex = code.indexOf(functionStart);
if (startIndex !== -1) {
let braceCount = 0;
let endIndex = startIndex;
let inFunction = false;
for (let i = startIndex; i < code.length; i++) {
if (code[i] === '{') {
braceCount++;
inFunction = true;
} else if (code[i] === '}') {
braceCount--;
if (inFunction && braceCount === 0) {
endIndex = i + 1;
break;
}
}
}
const newFunction = `async function lazyImportDomClient() {
try {
const reactDomClientModule = await import("react-dom/client");
reactDomClient = reactDomClientModule.default || reactDomClientModule || ReactDOM || ReactDomPolyfill;
flushSync = reactDomClientModule.flushSync || flushSync;
} catch (error) {
console.warn("Failed to import react-dom/client:", error);
reactDomClient = ReactDOM || ReactDomPolyfill;
}
}`;
const transformedCode = code.substring(0, startIndex) +
newFunction +
code.substring(endIndex);
return transformedCode;
}
}
return null;
}
}
}
・・・
export default defineConfig(({ mode }) = {
・・・
return {
plugins: [
wijmoWorkaroundPlugin(), // workaround
・・・