diff --git a/packages/cli/src/lib/bundler/config.ts b/packages/cli/src/lib/bundler/config.ts
index 2aac38732d..882926d051 100644
--- a/packages/cli/src/lib/bundler/config.ts
+++ b/packages/cli/src/lib/bundler/config.ts
@@ -139,14 +139,24 @@ export async function createConfig(
     new LinkedPackageResolvePlugin(paths.rootNodeModules, externalPkgs),
   ];
 
-  if (!isDev) {
-    resolvePlugins.push(
-      new ModuleScopePlugin(
-        [paths.targetSrc, paths.targetDev],
-        [paths.targetPackageJson],
-      ),
-    );
-  }
+  // These files are required by the transpiled code when using React Refresh.
+  // They need to be excluded to the module scope plugin which ensures that files
+  // that exist in the package are required.
+  const reactRefreshFiles = [
+    require.resolve(
+      '@pmmmwh/react-refresh-webpack-plugin/lib/runtime/RefreshUtils.js',
+    ),
+    require.resolve('@pmmmwh/react-refresh-webpack-plugin/overlay/index.js'),
+    require.resolve('react-refresh'),
+  ];
+
+  resolvePlugins.push(
+    new ModuleScopePlugin(
+      [paths.targetSrc, paths.targetDev],
+      [paths.targetPackageJson, ...reactRefreshFiles],
+    ),
+  );
+
   return {
     mode: isDev ? 'development' : 'production',
     profile: false,
@@ -228,17 +238,12 @@ export async function createBackendConfig(
 
   const resolvePlugins: webpack.ResolvePluginInstance[] = [
     new LinkedPackageResolvePlugin(paths.rootNodeModules, externalPkgs),
+    new ModuleScopePlugin(
+      [paths.targetSrc, paths.targetDev],
+      [paths.targetPackageJson],
+    ),
   ];
 
-  if (!isDev) {
-    resolvePlugins.push(
-      new ModuleScopePlugin(
-        [paths.targetSrc, paths.targetDev],
-        [paths.targetPackageJson],
-      ),
-    );
-  }
-
   return {
     mode: isDev ? 'development' : 'production',
     profile: false,