Parse react-frame-component as CommonJS so 5.3 bundles correctly (#10467)

* Parse react-frame-component as CommonJS so 5.3 bundles correctly

react-frame-component 5.3 added "type": "module" to its package.json
whilst mapping the "require" condition of its exports to a UMD build.
Babel compiles our imports to require(), so webpack resolves the UMD
file and, honouring the package type, parses it as an ES module. With no
exports object in scope, the UMD wrapper falls through to its browser
global branch and the module exports nothing, so <Frame> is undefined.
Opening the Query Tool then throws React error #130 and unmounts the
whole app, which is why every feature test timed out with the 5.3.2
bump in #10460. Node shows the same packaging fault: require() of the
package returns an empty object.

Tell webpack to parse the package as javascript/auto so the UMD takes
its CommonJS branch. Jest is unaffected, as it loads the UMD as CommonJS.

* Bump react-frame-component to 5.3.2.

Take the version the webpack rule exists for in the same change, so CI
exercises the rule against it.

web/package.json

@@ -138,7 +138,7 @@
     "react-dom": "^19.2.8",
     "react-draggable": "^4.7.1",
     "react-dropzone": "^15.0.0",
-    "react-frame-component": "~5.2.6",
+    "react-frame-component": "~5.3.2",
     "react-leaflet": "^4.2.1",
     "react-new-window": "^1.0.1",
     "react-resize-detector": "^12.3.0",

web/webpack.config.js

@@ -134,6 +134,14 @@ module.exports = [{
       resolve: {
         fullySpecified: false
       },
+    },{
+      // react-frame-component 5.3 declares "type": "module" but maps its
+      // "require" export to a UMD build. Babel compiles our imports to
+      // require(), so webpack picks the UMD file and, honouring the package
+      // type, parses it as ESM, where the UMD wrapper finds no exports object
+      // and exports nothing. Parse it as CommonJS/auto so the UMD works.
+      test: /[\\/]node_modules[\\/]react-frame-component[\\/].*\.js$/,
+      type: 'javascript/auto',
     },{
       test: /\.tsx?$|\.ts?$|\.jsx?$/,
       exclude: [/node_modules/, /vendor/],

web/yarn.lock

@@ -13904,14 +13904,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-frame-component@npm:~5.2.6":
-  version: 5.2.7
-  resolution: "react-frame-component@npm:5.2.7"
+"react-frame-component@npm:~5.3.2":
+  version: 5.3.2
+  resolution: "react-frame-component@npm:5.3.2"
   peerDependencies:
-    prop-types: ^15.5.9
-    react: ">= 16.3"
-    react-dom: ">= 16.3"
-  checksum: 10c0/e138602aa98557c021ae825f51468026c53b9939140c5961d5371b65ad07ff9a5adaf2cd4e4a8a77414a05ae0f95a842939c8e102aa576ef21ff096368b905a3
+    prop-types: ^15.8.1 || ^16.0.0 || ^17.0.0 || ^18.0.0
+    react: ">= 16.8 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+    react-dom: ">= 16.8 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+  checksum: 10c0/c158117f832c82ee4e17584b1a8a90ac2080d8fdf8bf9708c1fea5dc38052763e71f378cc09e1e82b8cf67715d9933dde64c011cf7331d2edc33b3383f711206
   languageName: node
   linkType: hard
 
@@ -14534,7 +14534,7 @@ __metadata:
     react-dom: "npm:^19.2.8"
     react-draggable: "npm:^4.7.1"
     react-dropzone: "npm:^15.0.0"
-    react-frame-component: "npm:~5.2.6"
+    react-frame-component: "npm:~5.3.2"
     react-leaflet: "npm:^4.2.1"
     react-new-window: "npm:^1.0.1"
     react-resize-detector: "npm:^12.3.0"