Summary
The client-side viewer runtime fails to load in the browser with a TypeError: (0 , Y.jsx) is not a function error. This is
caused by the build process (lib/build/mdx.js) missing a shim for react/jsx-runtime in the esbuild configuration for the
viewer, unlike the search runtime build which includes it.
Steps to Reproduce
Initialize a new Canopy project using @canopy-iiif/app v1.7.0.
Ensure React 18.x is installed.
Run npm run build.
Serve the site and navigate to any Item page (/works/...).
Observe the “Something went wrong” error on the page and the TypeError in the browser console.
Root Cause
The function buildCloverHydrationRuntimes in lib/build/mdx.js uses createReactShimPlugin. This plugin shims
react, react-dom, and react-dom/client, but fails to shim react/jsx-runtime.
When esbuild bundles the viewer components (which use jsx: "automatic"), it emits imports for react/jsx-runtime.
Without the shim, these imports fail or resolve incorrectly in the browser bundle context.
Proposed Fix
Update createReactShimPlugin in lib/build/mdx.js to include the same jsx-runtime shim used in lib/build
search.js:
// In lib/build/mdx.js
build.onResolve({ filter: /^react/jsx-runtime$/, namespace: "file" }, () => ({ path: "react-jsx-runtime",build.onResolve({ filter: /^react/jsx-runtime$/ }, () => ({ path: "react-jsx-runtime", namespace: ns }));
build.onLoad({ filter: /^react-jsx-runtime$/, namespace: ns }, () => ({
contents: var R = (typeof window !== "undefined" && window.React) || {}; export var jsx = R.createElement; export var jsxs = R.createElement; export var Fragment = R.Fragment;,
loader: "js"
}));
Summary
The client-side viewer runtime fails to load in the browser with a TypeError: (0 , Y.jsx) is not a function error. This is
caused by the build process (lib/build/mdx.js) missing a shim for react/jsx-runtime in the esbuild configuration for the
viewer, unlike the search runtime build which includes it.
Steps to Reproduce
Initialize a new Canopy project using @canopy-iiif/app v1.7.0.
Ensure React 18.x is installed.
Run npm run build.
Serve the site and navigate to any Item page (/works/...).
Observe the “Something went wrong” error on the page and the TypeError in the browser console.
Root Cause
The function buildCloverHydrationRuntimes in lib/build/mdx.js uses createReactShimPlugin. This plugin shims
react, react-dom, and react-dom/client, but fails to shim react/jsx-runtime.
When esbuild bundles the viewer components (which use jsx: "automatic"), it emits imports for react/jsx-runtime.
Without the shim, these imports fail or resolve incorrectly in the browser bundle context.
Proposed Fix
Update createReactShimPlugin in lib/build/mdx.js to include the same jsx-runtime shim used in lib/build
search.js:
// In lib/build/mdx.js
build.onResolve({ filter: /^react/jsx-runtime$/, namespace: "file" }, () => ({ path: "react-jsx-runtime",build.onResolve({ filter: /^react/jsx-runtime$/ }, () => ({ path: "react-jsx-runtime", namespace: ns }));
build.onLoad({ filter: /^react-jsx-runtime$/, namespace: ns }, () => ({
contents:
var R = (typeof window !== "undefined" && window.React) || {}; export var jsx = R.createElement; export var jsxs = R.createElement; export var Fragment = R.Fragment;,loader: "js"
}));