feat(plugin): add react-devtools to plugin bundle for standalone clie…

…nt in iframe
dhis2 · May 8, 2024 · 5ce4e27 · 5ce4e27
1 parent 37c75e4
commit 5ce4e27
Show file tree

Hide file tree

Showing 3 changed files with 538 additions and 8 deletions.
diff --git a/cli/config/plugin.webpack.config.js b/cli/config/plugin.webpack.config.js
@@ -95,10 +95,18 @@ module.exports = ({ env: webpackEnv, config, paths }) => {
         ].filter(Boolean)
     }
 
+    // DHIS2: in dev, add 'react-devtools' to the entry
+    // to enabled standalone React Dev Tools to work in iframes
+    // Intro: https://stackoverflow.com/a/71513012
+    // https://github.com/facebook/react/tree/main/packages/react-devtools#usage-with-react-dom
+    const resolvedEntry = isDevelopment
+        ? ['react-devtools', paths.shellPluginBundleEntrypoint]
+        : paths.shellPluginBundleEntrypoint
+
     return {
         mode: webpackEnv,
         bail: isProduction,
-        entry: paths.shellPluginBundleEntrypoint,
+        entry: resolvedEntry,
         output: {
             path: paths.shellBuildOutput,
             filename: isProduction

diff --git a/cli/package.json b/cli/package.json
@@ -61,6 +61,7 @@
         "parse-gitignore": "^1.0.1",
         "postcss-loader": "^7.0.1",
         "react-dev-utils": "^12.0.0",
+        "react-devtools": "^5.2.0",
         "react-refresh": "^0.11.0",
         "style-loader": "^3.3.1",
         "styled-jsx": "^4.0.1",