Next 13 + App Router + static export results in a build error (Specified "rewrites" cannot be used with "output: export")

[metalmarker]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/nextjs

SDK Version

7.54.0

Framework Version

Next 13.4.4

Link to Sentry event

No response

SDK Setup

I've used the wizard to create the sentry.*.config.js files. My next.config.js is:
{ images: { unoptimized: true }, experimental: { externalDir: true }, output: 'export', reactStrictMode: true }

Steps to Reproduce

I'm using the Next with the App Router in a static configuration (output: 'export' in next.config.js).
When attempting to build the app, I'm getting:

> Build error occurred Error: Specified "rewrites" cannot be used with "output: export". See more info here: https://nextjs.org/docs/messages/export-no-custom-routes at assignDefaults (/Users/eran/Dev/Butterfly/Website/node_modules/.pnpm/next@13.4.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/config.js:218:19) at loadConfig (/Users/eran/Dev/Butterfly/Website/node_modules/.pnpm/next@13.4.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/config.js:550:32) at async Span.traceAsyncFn (/Users/eran/Dev/Butterfly/Website/node_modules/.pnpm/next@13.4.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/trace/trace.js:103:20) at async /Users/eran/Dev/Butterfly/Website/node_modules/.pnpm/next@13.4.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/index.js:150:28 at async Span.traceAsyncFn (/Users/eran/Dev/Butterfly/Website/node_modules/.pnpm/next@13.4.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/trace/trace.js:103:20) at async build (/Users/eran/Dev/Butterfly/Website/node_modules/.pnpm/next@13.4.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/index.js:145:29)

This error started following the integration of the Sentry SDK. This error is suppressed when I remove the output: 'export' option.

Expected Result

No errors when building a static website.

Actual Result

N/A

[alikazi88]

Hey Can you please try the below changes and updates

Option 1:

Use "target: serverless" instead of "output: export"
Instead of using "output: export", you can try setting the "target" configuration to "serverless" in your Next.js configuration file (usually next.config.js). This target is compatible with the Sentry SDK and may resolve the build error. Here's an example of how you can set the "target" configuration:
javascript
Copy code

// next.config.js
module.exports = {
  target: "serverless",
  // ...other configurations
};

or

// next.config.js
module.exports = {
target: "experimental-serverless-trace",
};

Option 2:

Update Sentry SDK version
It's possible that the issue is related to the version of the Sentry SDK you're using. Try updating to the latest version of the Sentry SDK to see if it resolves the conflict with "output: export". You can update the package by running the following command in your project directory:

npm install @sentry/react@latest @sentry/tracing@latest

[metalmarker]

No go:

• Option 1: Results in "Error: The "target" property is no longer supported in next.config.js.".
• Option 2: I'm already using the latest @sentry/nextjs. The react and tracing libraries are not needed anyway.

[lforst]

Hi @metalmarker, please ignore @alikazi88's responses. It looks like they copied & pasted this issue into something like chat GPT and their answer is straight-up wrong and not helpful.

Can you please share your next.config.js? You probably have the tunnelRoute option set which is an option that uses the server runtime and the server runtime is obviously not available when doing a static export.

[metalmarker]

@lforst - thanks for the quick reply. The tunnelRoute was indeed set (it was added by the Next configuration wizard) and upon removal I was able to build the static code without that error.

After generating the static export, I served it from my local machine. Now, however, I see no source code at all when triggering an error. I verified that the source maps for the last build were added under the project (under "Release bundles", not Artifact bundles).

Here is my next.config.js:

/** @type {import('next').NextConfig} */

const { withSentryConfig } = require('@sentry/nextjs');

module.exports = withSentryConfig(
  {
    images: {
      unoptimized: true
    },

    experimental: {
      externalDir: true
    },

    output: 'export',
    distDir: 'build',
    reactStrictMode: true,

    sentry: {
      // Upload a larger set of source maps for prettier stack traces (increases build time)
      widenClientFileUpload: true,

      // Transpiles SDK to be compatible with IE11 (increases bundle size)
      transpileClientSDK: true, // TODO: false

      // Hides source maps from generated client bundles
      hideSourceMaps: true,

      // Automatically tree-shake Sentry logger statements to reduce bundle size
      disableLogger: true,
      autoInstrumentServerFunctions: false,
    }
  },
  {
    silent: true,
    org: 'XXXX',
    project: 'XXXX'
  }
);

[lforst]

Hey, I recommend turning off the silent flag and taking a look at the logs when building. Maybe there's something there that will tell us what's wrong.

[metalmarker]

I've turned silent off and there are no errors or warnings. According to the logs the source maps are successfully uploaded to your server for processing (and they do appear right afterwards under the project / source maps / release bundles).

[lforst]

Can you share a link to the event that doesn't have a stacktrace? Thanks.

[metalmarker]

Here are two errors, one in local "production" and one in development mode, triggered by the same code:

This error was generated by a static export that I’m serving from my local machine. Source code is not displayed.

This error was generated when I run Next in development mode. Source code is displayed, but there’s an error: “We've encountered 1 problem un-minifying your applications source code / Invalid absolute path URL.

[lforst]

@metalmarker since you're doing an export and likely serving stuff from a different path than when just doing next start you need to play around with the webpack plugin options to make the stack trace filenames line up with the uploaded artifacts.

https://www.npmjs.com/package/@sentry/webpack-plugin/v/1.20.1

[metalmarker]

@lforst, I've invested several hours in trying to crack this, but was unsuccessful so far.
Can you point me to the options that might be off for the export scenario? Also, I'm not sure why the source maps appear under the deprecated "release bundles" instead of the "artifact bundles". Perhaps that's related. Thanks!

[metalmarker]

@lforst, bumping this up... surely this is something that others would encounter on similar configuration

[aaarichter]

Hi @metalmarker, please ignore @alikazi88's responses. It looks like they copied & pasted this issue into something like chat GPT and their answer is straight-up wrong and not helpful.

Can you please share your next.config.js? You probably have the tunnelRoute option set which is an option that uses the server runtime and the server runtime is obviously not available when doing a static export.

this solved the problem for me as well. The tunnelRoute option is set by the Sentry wizard