Add esbuild banner for ESM+NodeJS builds, to work around "dynamic require not supported" issue

[brettdh]

Bug report and failing test

Having type: "module" in package.json along with serverDependenciesToBundle: "all" in remix.config.js causes a build error:

Error: Dynamic require of "http" is not supported

Oddly, in this integration test, it appears to happen at run time (unless I'm misreading the stack trace), whereas in the description of #7467, the error appears at build time. However, the error did appear at run time in my earlier testing as well, as indicated in the AWS Lambda logs in my comment.

Bug fix

The general Dynamic require of <pkg> not supported issue is discussed at length in evanw/esbuild#1921, and it appears that several other projects have had to apply a workaround for this problem. I first attempted to apply this async IIFE approach, but I realized that Remix already has a similar workaround applied for the __file and __dirname globals, so I removed those bits.

I'm not confident that this is the "right" fix (or a complete fix), but it makes the new integration test pass, and it doesn't appear to cause any other failures. It may also become irrelevant in the future if the esbuild issue is fixed, or if Remix fully moves to Vite, but I'm hoping it will at least unblock my current progress.

Closes: #7467

Tasks

• Tests
  • Add bugreport test that repros the issue
  • Move bugreport test to integration test
  • Test this fix using patch-package with a real (proprietary) project where I'm also encountering the issue
• Docs
  • Not sure what would be appropriate to add here; happy to add something if someone can point me in the right direction
• Changeset
  • Waiting to see if folks think this looks like the right fix.

Testing Strategy

Ran all the integration tests several times. Saw some flaky failures, and one not-as-flaky failure:

  1) [chromium] › defer-test.ts:823:3 › non-aborted › routes are interactive when deferred promises are suspended and after rejection in subsequent payload

    Test timeout of 30000ms exceeded.

    Error: page.waitForSelector: Target closed
    =========================== logs ===========================
    waiting for locator('#MANUAL_FALLBACK_ID') to be visible
fix: apply workaround for 'dynamic require not supported' error
    ============================================================

      830 |     await page.waitForSelector(`#${ROOT_ID}`);
      831 |     await page.waitForSelector(`#${DEFERRED_ID}`);
    > 832 |     await page.waitForSelector(`#${MANUAL_FALLBACK_ID}`);
          |                ^
      833 |     let idElement = await page.waitForSelector(`#${RESOLVED_DEFERRED_ID}`);
      834 |     let id = await idElement.innerText();
      835 |     expect(id).toBeTruthy();

        at /Users/brhiggins/src/remix/integration/defer-test.ts:832:16

    Pending operations:
      - page.waitForSelector at integration/defer-test.ts:832:16

Confirmed that this test also fails (pretty reliably) without my changes.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 28a7e11

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[remix-cla-bot]

Hi @brettdh,

Welcome, and thank you for contributing to Remix!

Before we consider your pull request, we ask that you sign our Contributor License Agreement (CLA). We require this only once.

You may review the CLA and sign it by adding your name to contributors.yml.

Once the CLA is signed, the CLA Signed label will be added to the pull request.

If you have already signed the CLA and received this response in error, or if you have any questions, please contact us at [email protected].

Thanks!

- The Remix team

[remix-cla-bot]

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

[brettdh]

Updated PR with a patch that works around the issue; also updated the description with testing details and feedback requests; PTAL

[brettdh]

I haven't been following closely, but I'm wondering about:

1. the expected pace of the Vite transition
2. whether it's likely to become stable "soon"
3. whether that means this PR will be quickly obsoleted
4. whether that's why it's not getting much attention 🙂

[THOUSAND-SKY]

As far as I can tell, there isn't a way to pass this rule to esbuild from remix.config.js without this patch, is there? Because I'm encountering this issue as well.