fix: make react refresh babel plugin optional (#761)

Co-authored-by: Kevin Hazy <[email protected]>
egoist · Oct 25, 2020 · 9d22b03 · 9d22b03
1 parent cf6279b
commit 9d22b03
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 16 deletions.
diff --git a/core/poi/lib/babel/preset.js b/core/poi/lib/babel/preset.js
@@ -25,12 +25,16 @@ module.exports = (
     flow,
     typescript,
     env,
-    namedImports = process.env.POI_NAMED_IMPORTS
+    namedImports = process.env.POI_NAMED_IMPORTS,
+    reactRefresh = process.env.POI_REACT_REFRESH
   } = {}
 ) => {
   if (typeof namedImports === 'string') {
     namedImports = JSON.parse(namedImports)
   }
+  if (typeof reactRefresh === 'string') {
+    reactRefresh = reactRefresh === 'true'
+  }
 
   const isVueJSX = jsx === 'vue'
   const isReactJSX = jsx === 'react'
@@ -41,6 +45,8 @@ module.exports = (
   const isFlowEnabled = validateBoolOption('flow', flow, true)
   const isTypeScriptEnabled = validateBoolOption('typescript', typescript, true)
 
+  const isReactRefreshEnabled = isDevelopment && reactRefresh
+
   const presets = [
     [
       require('@babel/preset-env'),
@@ -126,7 +132,7 @@ module.exports = (
       }
     ],
     require('@babel/plugin-proposal-optional-chaining'),
-    isDevelopment && require('react-refresh/babel')
+    isReactRefreshEnabled && require('react-refresh/babel')
   ].filter(Boolean)
 
   return {

diff --git a/core/poi/lib/plugins/config-react-refresh.js b/core/poi/lib/plugins/config-react-refresh.js
@@ -8,19 +8,22 @@ exports.when = api => api.config.reactRefresh && api.mode === 'development'
 
 exports.apply = api => {
   api.hook('createWebpackChain', config => {
-    const reactRefresh = require('@pmmmwh/react-refresh-webpack-plugin')
-    config.plugin('react-refresh').use(reactRefresh, [
-      {
-        overlay: {
-          entry: require.resolve('@poi/dev-utils/hotDevClient'),
-          // The expected exports are slightly different from what the overlay exports,
-          // so an interop is included here to enable feedback on module-level errors.
-          module: require.resolve('@poi/dev-utils/refreshOverlayInterop'),
-          // Since we ship a custom dev client and overlay integration,
-          // the bundled socket handling logic can be eliminated.
-          sockIntegration: false
+    process.env.POI_REACT_REFRESH = api.hasDependency('react')
+
+    config
+      .plugin('react-refresh')
+      .use(require('@pmmmwh/react-refresh-webpack-plugin'), [
+        {
+          overlay: {
+            entry: require.resolve('@poi/dev-utils/hotDevClient'),
+            // The expected exports are slightly different from what the overlay exports,
+            // so an interop is included here to enable feedback on module-level errors.
+            module: require.resolve('@poi/dev-utils/refreshOverlayInterop'),
+            // Since we ship a custom dev client and overlay integration,
+            // the bundled socket handling logic can be eliminated.
+            sockIntegration: false
+          }
         }
-      }
-    ])
+      ])
   })
 }
diff --git a/core/poi/lib/utils/validateConfig.js b/core/poi/lib/utils/validateConfig.js
@@ -155,7 +155,8 @@ module.exports = (api, config) => {
     {
       cache: true,
       parallel: false,
-      publicFolder: 'public'
+      publicFolder: 'public',
+      reactRefresh: false
     }
   )