fix(remix): Rework dynamic imports of react-router-dom (#5897)

Added import by name as the first priority (which will work in monorepos) and relative imports as the second if the former fails. Logging error at the end if the latter fails too, without breaking the whole application. This implementation is similar to the loadModule implementation below, only the priorities are swapped. (The other way works too).

Author: onurtemizkan

packages/remix/rollup.npm.config.js

@@ -3,5 +3,12 @@ import { makeBaseNPMConfig, makeNPMConfigVariants } from '../../rollup/index.js'
 export default makeNPMConfigVariants(
   makeBaseNPMConfig({
     entrypoints: ['src/index.server.ts', 'src/index.client.tsx'],
+    packageSpecificConfig: {
+      external: ['react-router', 'react-router-dom'],
+      output: {
+        // make it so Rollup calms down about the fact that we're combining default and named exports
+        exports: 'named',
+      },
+    },
   }),
 );

packages/remix/src/utils/serverAdapters/express.ts

@@ -43,7 +43,15 @@ function wrapExpressRequestHandler(
     next: ExpressNextFunction,
   ): Promise<void> {
     if (!pkg) {
-      pkg = await import(`${cwd()}/node_modules/react-router-dom`);
+      try {
+        pkg = await import('react-router-dom');
+      } catch (e) {
+        pkg = await import(`${cwd()}/node_modules/react-router-dom`);
+      } finally {
+        if (!pkg) {
+          __DEBUG_BUILD__ && logger.error('Could not find `react-router-dom` package.');
+        }
+      }
     }
 
     // eslint-disable-next-line @typescript-eslint/unbound-method