nextjs - 💡(How to fix) Fix Blank pages on module export, error 404 Failed to load _next/statis/chunks [4 comments, 3 participants]

TL;DR

The issue can be mitigated by adjusting the webpack configuration to ensure consistent chunk filenames across different environments.

Guidance

• Verify that the chunkFilename configuration is correctly applied in both development and production environments to prevent discrepancies in chunk filenames.
• Check the nextConfig object for any other settings that might be causing the issue, such as output or distDir.
• Consider setting output.chunkFilename to a consistent value, regardless of the environment, to prevent filename mismatches.
• Investigate the transpilePackages option and its potential impact on chunk generation.

Example

webpack: (config, { dev, isServer, webpack }) => {
  config.output.chunkFilename = "static/chunks/[name]-[contenthash].js";
  return config;
},

Notes

The provided nextConfig object seems to be using a mix of development and production settings, which might be causing the issue. The webpack configuration is only applied when !isServer, which could lead to inconsistencies between environments.

Recommendation

Apply workaround: Adjust the webpack configuration to use a consistent chunkFilename across environments, as shown in the example above. This should help mitigate the issue, but further investigation may be necessary to identify the root cause.