Next.js: Use source maps for errors during build/pre-render

Question

Is it possible to get full stack traces for errors that are emitted from pre-rendering during build, using source maps for the generated code?

Currently, if pre-rendering a page fails during next build, the error stack trace output is from the minified code rather than the actual source of the project, making it very hard to trace errors.

Even with productionBrowserSourceMaps enabled in next.config.js, it seems that the pre-rendering still emits errors with minified stack traces which make finding the source very hard.

Matt Cowley · Accepted Answer · 2022-11-02 20:53:30Z

6

After a lot of digging and experimenting, yes, it seems you can!

I got proper source mapped errors logging from pre-render build errors by forcibly enabling source maps in the Webpack config being used by Next.js (only in the server context, we don't want to leak the source to the client):

// next.config.js
module.exports = {
  webpack(config, options) {
    if (options.isServer) config.devtool = 'source-map';
    return config;
  },
};

This will ensure Next.js generates the source maps for all the JS files used for the pre-render during build. To get the error stack traces to then use these, Node.js' source map support needs to be enabled when Next.js builds, which can be done by passing NODE_OPTIONS=--enable-source-maps next build.

answered Nov 2, 2022 at 20:53

Matt Cowley

2,3732 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Next.js: Use source maps for errors during build/pre-render

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related