Skip to content

Externalize React/ReactDOM and add en-US locale fallback to support Silverstripe 6#79

Open
tomstgeorge wants to merge 4 commits intosyntro-opensource:6from
tomstgeorge:6
Open

Externalize React/ReactDOM and add en-US locale fallback to support Silverstripe 6#79
tomstgeorge wants to merge 4 commits intosyntro-opensource:6from
tomstgeorge:6

Conversation

@tomstgeorge
Copy link
Copy Markdown

Summary

This PR resolves two critical issues that block the SEO module's analysis features in Silverstripe 6 environments.

The Problem

  1. React Hook Conflict (Error #321): The module was bundling its own copy of React/ReactDOM into main.js. In Silverstripe 6 (React 18), this causes an "Invalid hook call" crash because the component tries to use a different React context than the one provided by the CMS admin.
  2. Missing en-US Locale: The module hardcodes a fallbackLng: 'en-US' in i18n.js, but the package only contained an en folder, leading to 404 errors that prevent the analysis field from initializing.

The Fix

  • Webpack Externals: Updated webpack.config.js to treat react, react-dom, and react-dom/client as external dependencies.
  • Global Variable Mapping: Mapped these externals to the specific global variables exposed by silverstripe-admin in SS6:
    • react -> React
    • react-dom -> ReactDom
    • react-dom/client -> ReactDomClient
  • Fixed Locales: Added the missing en-US translation files to the source to resolve 404 errors.
  • Updated Dist: Compiled a fresh production build of main.js with these mappings applied.

Verification

  • Tested on Silverstripe 6.1.
  • Confirmed the "Minified React error #321" is resolved.
  • Confirmed the Keyword Analysis and SERP Preview features now initialize and fetch page data correctly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant