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 🙏