Next dynamic loading breaks with experimental-serverless-trace

[afzalsayed96]

Describe the bug
When using experimental-serverless-trace along with preview mode on Next v10.0.3, lazy loading components with dynamic breaks.

To Reproduce
Steps to reproduce:

1. demo: https://suspicious-goodall-701115.netlify.app/api/preview?slug=/
2. repo: https://github.com/afzalsayed96/next-on-netlify-repro

Versions

• Next: 10.0.3
• next-on-netlify: 2.6.3

[lindsaylevine]

heyo @afzalsayed96, started to dig into this but not quite sure yet what exactly is going on and why and how to fix it, lol. i see what's different in the source/next dist between serverless and e-s-t, but not sure why. it seems in serverless the dynamic import is almost treated as a normal import in the generated .js. in e-s-t, it is explicitly trying to require that long generated ${code}.js representing the dynamic import.

Next 9.5.3 e-s-t with preview mode

  loadableGenerated: {
    webpack: () => [/*require.resolve*/("aIN1")],
    modules: ["../components/footer"]
  }
});

and earlier in that file:

/******/ 			var chunk = require("../" + ({}[chunkId]||chunkId) + "." + {"5":"048e8065a392725aec21"}[chunkId] + ".js");

aka the actual line that errors out and the file that shows up in the error output

Next 9.5.3 serverless with preview mode

function Footer() {
  return /*#__PURE__*/Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__["jsx"])("footer", {
    children: "a footer"
  });
}

will try to figure out how best to handle soon. hopefully this isn't blocking you too much! the issues you open on here are always so tricky! 🤪

[FinnWoelm]

Thanks for reporting, @afzalsayed96! 😊

My personal understanding of this issue is that next-on-netlify does not bundle into the Netlify Function any files that are dynamically imported. This should affect not just pages with getStaticProps, but any page type that is rendered via Netlify Function when using target: "experimental-serverless-trace".

When you hit /api/preview, we enter Next.js Preview Mode. The getStaticProps page /index is then rendered in preview mode via the Netlify Function next_index. The code for /index runs and hits the require("../ + chunk...) statement. This chunk file was not bundled into the Netlify Function, so the code cannot find the chunk and fails.

The require statement in the code for /index is unfortunately quite cryptic, as @lindsaylevine already pointed out:

var chunk = require("../" + ({}[chunkId]||chunkId) + "." + {"5":"048e8065a392725aec21"}[chunkId] + ".js");

I don't have an immediate fix in mind... Maybe we need to add some code to next-on-netlify that identifies that Next.js has generated some chunks. For each chunk, we then we search all our Netlify Functions for this chunk hash. If present, copy the chunk to that function.

[spencewood]

I am in a situation where I need to use target: "experimental-serverless-trace" along with SSR and dynamic imports, so this doesn't only affect preview mode. I've created an example repo that shows it here: https://github.com/spencewood/next-serverless-test. This is simply Cassidy's next/netlify starter where I:

• switched the Header to a dynamic import
• used the Netlify plugin instead of next export
• changed the build target to experimental-serverless-trace
• added getServerSideProps for SSR

The resulting deployment looks like this: https://main--zen-neumann-0e124c.netlify.app/

{"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"Error: Cannot find module '../header.5110717fb5008af91c61.js'\nRequire stack:\n- /var/task/src/netlify/functions/next_index/nextPage.js\n- /var/task/src/netlify/functions/next_index/renderNextPage.js\n- /var/task/src/netlify/functions/next_index/next_index.js\n- /var/task/next_index.js\n- /var/runtime/UserFunction.js\n- /var/runtime/index.js","trace":["Runtime.UnhandledPromiseRejection: Error: Cannot find module '../header.5110717fb5008af91c61.js'","Require stack:","- /var/task/src/netlify/functions/next_index/nextPage.js","- /var/task/src/netlify/functions/next_index/renderNextPage.js","- /var/task/src/netlify/functions/next_index/next_index.js","- /var/task/next_index.js","- /var/runtime/UserFunction.js","- /var/runtime/index.js","    at process.<anonymous> (/var/runtime/index.js:35:15)","    at process.emit (events.js:314:20)","    at processPromiseRejections (internal/process/promises.js:209:33)","    at processTicksAndRejections (internal/process/task_queues.js:98:32)"]}

When bundling this locally using next build, the issue is pretty clear: the dynamic chunk is not included in the built next_index.zip.

Do note that by simply removing the getServerSideProps (it would be static) or changing the target to serverless (the chunk is inlined) everything works just fine. I deployed the above repo as-is to Vercel and everything works as expected: https://next-serverless-test.vercel.app/

[lindsaylevine]

@spencewood @afzalsayed96 opened a PR. if yall wanna install the branch ll/est-dynamic-imports and give it a shot let me know if it does in fact solve your issue!

[spencewood]

@lindsaylevine yep, that fixes it! I look forward to it being included with the Netlify plugin. Thanks!