Fix re-loading of source maps with "-fast-refresh" flag enabled

Summary: Fixed loading of source maps when dev server is running with --fast-refresh flag set. Looks like it was broken after last metro upgrade because it changed the way how module paths are passed to dev server. We also had a hack to workaround bug when requested module paths were malformed, but it looks this hack is not needed now, so I deleted it as well.

Reviewed By: passy

Differential Revision: D28120080

fbshipit-source-id: 03a39c9840da8f4c8c72be6189c0b71c62fac7f0

desktop/app/src/init-fast-refresh.js

@@ -12,7 +12,7 @@ import {default as ReactRefreshRuntime} from 'react-refresh/runtime';
 
 HmrClient.setup(
   'web',
-  '/src/init-fast-refresh.bundle',
+  '/app/src/init-fast-refresh.bundle',
   'localhost',
   '3000',
   true,

desktop/scripts/start-dev-server.ts

@@ -23,8 +23,7 @@ import {hostname} from 'os';
 import {compileMain, generatePluginEntryPoints} from './build-utils';
 import Watchman from './watchman';
 import Metro from 'metro';
-import MetroResolver from 'metro-resolver';
+import {staticDir, babelTransformationsDir, rootDir} from './paths';
-import {staticDir, appDir, babelTransformationsDir} from './paths';
 import isFB from './isFB';
 import getAppWatchFolders from './get-app-watch-folders';
 import {getPluginSourceFolders} from 'flipper-plugin-lib';
@@ -167,7 +166,7 @@ function looksLikeDevServer(): boolean {
 function launchElectron(port: number) {
   const entry = process.env.FLIPPER_FAST_REFRESH ? 'init-fast-refresh' : 'init';
   const devServerURL = `http://localhost:${port}`;
-  const bundleURL = `http://localhost:${port}/src/${entry}.bundle?platform=web&dev=true&minify=false`;
+  const bundleURL = `http://localhost:${port}/app/src/${entry}.bundle?platform=web&dev=true&minify=false`;
   const electronURL = `http://localhost:${port}/index.dev.html`;
   const args = [
     path.join(staticDir, 'index.js'),
@@ -210,7 +209,7 @@ async function startMetroServer(app: Express, server: http.Server) {
   );
   const baseConfig = await Metro.loadConfig();
   const config = Object.assign({}, baseConfig, {
-    projectRoot: appDir,
+    projectRoot: rootDir,
     watchFolders,
     transformer: {
       ...baseConfig.transformer,
@@ -220,16 +219,6 @@ async function startMetroServer(app: Express, server: http.Server) {
       ...baseConfig.resolver,
       resolverMainFields: ['flipperBundlerEntry', 'module', 'main'],
       blacklistRE: /\.native\.js$/,
-      resolveRequest: (context: any, moduleName: string, platform: string) => {
-        if (moduleName.startsWith('./localhost:3000')) {
-          moduleName = moduleName.replace('./localhost:3000', '.');
-        }
-        return MetroResolver.resolve(
-          {...context, resolveRequest: null},
-          moduleName,
-          platform,
-        );
-      },
       sourceExts: ['js', 'jsx', 'ts', 'tsx', 'json', 'mjs', 'cjs'],
     },
     watch: true,
@@ -376,6 +365,7 @@ function outputScreen(socket?: socketIo.Server) {
   // output screen
   if (hasErrors()) {
     const errorScreen = buildErrorScreen();
+    // eslint-disable-next-line flipper/no-console-error-without-context
     console.error(errorScreen);
 
     // notify live clients of errors