Missing ESM dependencies in standalone bundle

[PavelVanecek]

👋 Hello from Recharts!

We have this problem where Recharts fails to build using next.js standalone.

The situation is:

• Recharts provides both ESM and CJS bundles (https://github.com/recharts/recharts/blob/main/package.json)
• Recharts depends on Redux toolkit, which also provides both ESM and CJS bundles (https://github.com/reduxjs/redux-toolkit/blob/master/packages/toolkit/package.json)
• All works fine when using next dev but fails to run when using next build && node .next/standalone/server.js

The cause seems to be that the Recharts code is referencing redux/toolkit ESM bundle but those files are not included in the standalone build. Copying the appropriate files to the standalone folder fixes it.

Also adding exports to Recharts package.json would fix this - but it breaks so many other places that we can't do that just yet.

Here's a summary with more details: recharts/recharts#6117 (comment)

Here's a reproduction: recharts/recharts-integ#88

Do you have any recommendation what can we do to have everything compile in nextjs? Thanks!

[guisehn]

One thing I noticed in my application is that this error only happens when my page exports a getServerSideProps. If I remove getServerSideProps, the dependencies are correctly bundled in the standalone build.

I have a repo with a minimum reproducible example:

https://github.com/guisehn/recharts-nextjs-issue-mre

[styfle]

Can you share the inputs into @vercel/nft?

It sounds like this might be a Next.js but though so you could file an issue in https://github.com/vercel/next.js

[mischnic]

Here are the inputs and the return value of the vercel/nft call

vercel-nft.json

I did this by adding

        require("fs").writeFileSync(
          "vercel-nft.json",
          JSON.stringify(
            {
              _entries: chunksToTrace,
              _options: {
                base: outputFileTracingRoot,
                processCwd: dir,
                mixedModules: true,
              },
              fileList: Array.from(result.fileList),
              reasons: Object.fromEntries(
                Array.from(result.reasons).map(([k, r]) => [
                  k,
                  {
                    ...r,
                    parents:
                      (console.log(Array.from(r.parents), r.parents),
                      Array.from(r.parents)),
                  },
                ])
              ),
              esmFileList: Array.from(result.esmFileList),
              warnings: Array.from(result.warnings).map((e) => e.message),
            },
            null,
            2
          )
        );

in node_modules/next/dist/build/collect-build-traces.js after (0, _nft.nodeFileTrace)(chunksToTrace