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

onurtemizkan · web-flow · commit e4061309c712 · 2022-10-07T12:41:53.000+02:00
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).
diff --git a/packages/remix/rollup.npm.config.js b/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',
+      },
+    },
   }),
 );
diff --git a/packages/remix/src/utils/serverAdapters/express.ts b/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
