Summary
Client-side runtimes for the Hero Slider and Search Form do not use the React shim plugin during the build process. This results in multiple copies of React being loaded on a single page, leading to “Minified React error #31” (Objects are not valid as a React child) and “Invalid Hook Call” errors when these components interact with the global React environment.
Steps to Reproduce
Configure a Canopy site with a Hero slider on the home page (index.mdx).
Build the site using @canopy-iiif/app v1.7.0.
Load the home page in a browser.
Observe “Minified React error #31” in the console and a “Something went wrong” crash where the Hero or Search components
should be.
Root Cause
In lib/build/mdx.js, the function ensureHeroRuntime calls esbuild.build but does not include plugins:
[createReactShimPlugin()]. Similarly, in lib/build/runtimes.js, the function prepareSearchFormRuntime also omits
this plugin.
Because these runtimes are bundled without shimming react and react-dom to window.React, they bundle their own local
copies of React. When the page also loads react-globals.js, there is a conflict. React Error #31 occurs specifically because an
element created by one instance of React is passed to a component (like a Slider) managed by a different instance of React, and the
$$typeof Symbol check fails.
Proposed Fix
Ensure all client-side runtimes that involve React components utilize the createReactShimPlugin.
Export createReactShimPlugin from lib/build/mdx.js.
Update ensureHeroRuntime in lib/build/mdx.js: javascript await esbuild.build({ // ... plugins:
[createReactShimPlugin()], });
Update prepareSearchFormRuntime in lib/build/runtimes.js: javascript await esbuild.build({ // ...
plugins: [require("./mdx").createReactShimPlugin()], });
Impact
This fix is critical for any Canopy site using React 18+ where multiple interactive components (Search, Hero, Related Items) exist on the same page
Summary
Client-side runtimes for the Hero Slider and Search Form do not use the React shim plugin during the build process. This results in multiple copies of React being loaded on a single page, leading to “Minified React error #31” (Objects are not valid as a React child) and “Invalid Hook Call” errors when these components interact with the global React environment.
Steps to Reproduce
Configure a Canopy site with a Hero slider on the home page (index.mdx).
Build the site using @canopy-iiif/app v1.7.0.
Load the home page in a browser.
Observe “Minified React error #31” in the console and a “Something went wrong” crash where the Hero or Search components
should be.
Root Cause
In lib/build/mdx.js, the function ensureHeroRuntime calls esbuild.build but does not include plugins:
[createReactShimPlugin()]. Similarly, in lib/build/runtimes.js, the function prepareSearchFormRuntime also omits
this plugin.
Because these runtimes are bundled without shimming react and react-dom to window.React, they bundle their own local
copies of React. When the page also loads react-globals.js, there is a conflict. React Error #31 occurs specifically because an
element created by one instance of React is passed to a component (like a Slider) managed by a different instance of React, and the
$$typeof Symbol check fails.
Proposed Fix
Ensure all client-side runtimes that involve React components utilize the createReactShimPlugin.
Export createReactShimPlugin from lib/build/mdx.js.
Update ensureHeroRuntime in lib/build/mdx.js: javascript await esbuild.build({ // ... plugins:
[createReactShimPlugin()], });
Update prepareSearchFormRuntime in lib/build/runtimes.js: javascript await esbuild.build({ // ...
plugins: [require("./mdx").createReactShimPlugin()], });
Impact
This fix is critical for any Canopy site using React 18+ where multiple interactive components (Search, Hero, Related Items) exist on the same page