dynamic imports break when using esbuild

[l3aconator]

Describe the bug
I am using "@netlify/plugin-nextjs": "3.3.0" and "next": "10.2.2" with webpack5. I have a thank you page that is forced to accept a POST request from Salesforce Pardot using getServerSideProps. They don't send back a typical redirect but rather a POST request. This was working fine until the latest @netlify/plugin-nextjs. See error at the link below.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://60a81fe7f9b70f00079a6771--ts-marketing.netlify.app/teamlink-thank-you-3 <- you will see a JSON blob of the error

{"errorType":"Runtime.ImportModuleError","errorMessage":"Error: Cannot find module '../chunks/4343.js'\nRequire stack:\n- /var/task/src/netlify/functions/next_teamlinkthankyou3/next_teamlinkthankyou3.js\n- /var/task/next_teamlinkthankyou3.js\n- /var/runtime/UserFunction.js\n- /var/runtime/index.js","trace":["Runtime.ImportModuleError: Error: Cannot find module '../chunks/4343.js'","Require stack:","- /var/task/src/netlify/functions/next_teamlinkthankyou3/next_teamlinkthankyou3.js","- /var/task/next_teamlinkthankyou3.js","- /var/runtime/UserFunction.js","- /var/runtime/index.js","    at _loadUserApp (/var/runtime/UserFunction.js:100:13)","    at Object.module.exports.load (/var/runtime/UserFunction.js:140:17)","    at Object.<anonymous> (/var/runtime/index.js:43:30)","    at Module._compile (internal/modules/cjs/loader.js:999:30)","    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)","    at Module.load (internal/modules/cjs/loader.js:863:32)","    at Function.Module._load (internal/modules/cjs/loader.js:708:14)","    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)","    at internal/main/run_main_module.js:17:47"]}

Expected behavior
Returns our thank you page (we redirect it to a GET request so the pages does not render a 404 page)
https://teamsnap.com/teamlink-thank-you-2

Versions

• Next.js: "next": "10.2.2"
• plugin (if installed at fixed version): "@netlify/plugin-nextjs": "3.3.0"

Here's a minimal next.js page that we use:

import Layout from '../../components/Layout';

export default function TeamlinkThankYou3() {
  return (
    <Layout
      frontmatter={{
        title: 'Thank you!',
        robots: 'noindex, nofollow',
        metadata: {
          description: 'Thanks for submitting a form',
        },
      }}
    >
      <section className="pb30" id="thankYou">
        <div className="container">
          <div className="row">
            <section className="col-md-9 mb10">
              <h1 className="thin mb10 js-thank-you-heading">Thank You!</h1>
              <p className="js-thank-you-content h5 mb30">
                Check out what TeamSnap Registration can do for you.
              </p>
              <div className="youtube-wrapper">
                <div
                  className="youtube--lazy js-thank-you-video"
                  data-embed="7Z1xUHBCHRM"
                >
                  <div className="play-button"></div>
                </div>
              </div>
            </section>
            <aside className="col-md-3 mt20" id="sidebar">
              <div className="center-text hidden-xs hodden-sm">
                <a href="/blog/general-sports/national-girls-women-in-sports-day-stories">
                  <img
                    alt="Sign Up For Free"
                    className="img-thumbnail img-cta mb15 img-responsive"
                    src="/images/TS_NationalWomensSportsDay_235x276_A.jpg"
                  />
                </a>
              </div>
            </aside>
            <div className="clear"></div>
          </div>
        </div>
      </section>
    </Layout>
  );
}

export async function getServerSideProps(context) {
  if (context.req.method === 'POST') {
    context.res.setHeader('Location', '/teamlink-thank-you-2');
    context.res.statusCode = 302;
    context.res.method = 'GET';
    context.res.end();
    return { props: {} };
  }

  return {
    props: {},
  };
}

[lindsaylevine]

@l3aconator hello again kyle! can you downgrade next for the timebeing? and also let me know the last version of next where this was working for you?

[lindsaylevine]

and also a repo please 🙏 i know you gave a sample page but due to little bandwidth, being able to fork and clone something that reliably reproduces is fastest/super helpful 🙏 🙏

[l3aconator]

Howdy! I'll try get to that this weekend, it will have to be very minimal though to avoid leaking any internal info.

Thanks to y'all for this great deploy mechanism, btw. ❤️

[l3aconator]

Almost done with the reproduction repo, it has taken way longer to rip things out.

[l3aconator]

@lindsaylevine I will DM you the repo link, we are being a little security conscious.

Here is the deployment:
https://cranky-benz-061546.netlify.app/teamlink-thank-you-3 <- page with the error
https://cranky-benz-061546.netlify.app/teamlink-thank-you <- what it should be

I am also assuming this API route is related as well: https://cranky-benz-061546.netlify.app/api/blog/feed

If you make your own netlify deployment, only env var is the NODE_VERSION=16.0.0 (also use node 16 for local dev)

[lindsaylevine]

@l3aconator yo kyle! we've discovered that dynamic imports break in sites using esbuild. that said, we synced with our resident esbuild engineer and he says dynamic imports support is coming to esbuild next week. that said, a temporary workaround for you til then would be to either (a) disable esbuild for now or (b) enable esbuild only for your own custom functions (if that's a use case you have). cc @chris-erickson

[l3aconator]

@lindsaylevine Ah got it, no prob I have a few future tasks blocked, but def running okay in production since 95% of the site is static at this point. I def love esbuild as it cut our build time from 20min to under 10! Super exciting that is coming next week. Thanks for digging into this @lindsaylevine and @chris-erickson

[l3aconator]

I saw zip-it-and-ship-it deployed out the dynamic imports today. (Hell yeah and thank you!)

As with any compliment sandwich, I am now getting the following on deploys:

2:16:59 PM: Uncaught exception, the process will now terminate…
2:16:59 PM: Error: ENOENT: no such file or directory, open '/tmp/zisi-60d2506d51c717009c884a4d/index-2KBZW4CI-1.js'
2:16:59 PM: Caching artifacts

[lindsaylevine]

@l3aconator hey kyle! i pinged @eduardoboucas who took care of the zisi imports work :). he'll take a look soon! thanks for letting us know 🙏

[chris-erickson]

I'm still seeing a ton of errors when switching to esbuild, generally of this form:

should be marked as external for use with "require.resolve"

but the site seems functional at a glance. Happy to take this to a new issue if this is diverging too far here.

[l3aconator]

Sorry to be a pest, 😬 any updates on this?

[lindsaylevine]

@l3aconator wait. OMG. YES. KYLE. thanks for commenting on this. @eduardoboucas JUST pinged us about support for this under a feature flag this morning and i only commented on a more recent issue to suggest they test it out. how'd i forget about this one!? if you don't mind, i'm going to change the title to reflect that it's esbuild-related.

to enable the flag, add NETLIFY_EXPERIMENTAL_PROCESS_DYNAMIC_IMPORTS as an environment variable with the value set to true. please let us know if this works!

[lindsaylevine]

@chris-erickson hey, sorry i missed your comment! i'll ping about your use case as well, and i'll let yk if we should move to a new issue.

[l3aconator]

@lindsaylevine Hell yeah! https://60dcb42e809a1d769570b772--ts-marketing.netlify.app/teamlink-thank-you-3 is rendering.

and the underlying POST -> GET redirect works.

Thanks for all of the hard work on your team + you!

[lindsaylevine]

awesome!! we'll leave this open til it's officially out for everyone then :)

[lindsaylevine]

related: https://answers.netlify.com/t/error-cannot-find-module-esbuild-when-page-crashes-upon-deploy/39889

[adedaniel]

Hey guys, I had this same issue too. It got fixed when I changed my next.config.js target from experimental-serverless-trace to serverless

That was of course after I did a lot of the other things above in this thread