Next.js Amplify JS build failing installing Sentry

[adeelejaz]

Is there an existing issue for this?

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

How do you use Sentry?

Self-hosted/on-premise

Which package are you using?

@sentry/nextjs

SDK Version

7.9.0

Framework Version

17.0.2

Link to Sentry event

No response

Steps to Reproduce

Followed the configuration guide, added and configured as per docs. Project locally running fine, test errors showing up fine in Sentry console. But when using Amplify JS, the build fails.

Expected Result

Build completing as expected

Actual Result

[INFO]: λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
[INFO]: Starting SSR Build...
[ERROR]: Error: Command failed with exit code 1: node_modules/.bin/next build
                                  warn  - The `target` config is deprecated and will be removed in a future version.
                                  See more info here https://nextjs.org/docs/messages/deprecated-target-config
                                  Failed to compile.
                                  ./node_modules/next/dist/compiled/@next/react-refresh-utils/ReactRefreshWebpackPlugin.js:109:69
                                  Module not found: Can't resolve 'webpack'
                                  Import trace for requested module:
                                  ./node_modules/next/dist/build/webpack-config.js
                                  ./node_modules/next/dist/server/dev/hot-reloader.js
                                  ./node_modules/next/dist/server/dev/next-dev-server.js
                                  ./node_modules/next/dist/server/next.js
                                  ./node_modules/@sentry/nextjs/cjs/utils/instrumentServer.js
                                  ./node_modules/@sentry/nextjs/cjs/index.server.js
                                  ./sentry.server.config.js
                                  https://nextjs.org/docs/messages/module-not-found
                                  ./node_modules/next/dist/compiled/@vercel/nft/LICENSE
                                  Module parse failed: Unexpected token (1:10)

[lforst]

Hi @adeelejaz, thanks for writing in! A few questions to help us troubleshoot this:

• Could you share your next/webpack configuration?
• What version of nextjs are you on?
• How are you exactly using Amplify JS? It's the first time I've heard of the library so I'm just trying to get a little bit of context here.

[adeelejaz]

Hi @lforst,

• I didn't have a webpack configuration section, but I added one for Sentry but still no luck

// next.config.js
const SentryCliPlugin = require("@sentry/webpack-plugin");
const { withSentryConfig } = require("@sentry/nextjs");

const moduleExports = {
  webpack: (config) => {
    config.plugins.push(
      new SentryCliPlugin({
        include: ".",
        ignoreFile: ".sentrycliignore",
        ignore: ["node_modules", "webpack.config.js"],
        configFile: "sentry.properties",
      })
    );

    return config;
  }
};

const sentryWebpackPluginOptions = {
  silent: true, // Suppresses all logs
};

module.exports = withSentryConfig(moduleExports, sentryWebpackPluginOptions);

• Version of Next: 12.0.10
• AWS Amplify is a JS library that has builtin support with AWS for pluggable backend services. But the key benefit is it ships with AWS Amplify Hosting (https://aws.amazon.com/blogs/mobile/host-a-next-js-ssr-app-with-real-time-data-on-aws-amplify/), this lets you host Next.js SSR application on AWS using using Cloudfront and Lambda@Edge (similar to how Vercel may do it)

[lforst]

The config looks fine to me.

The error message you posted however hints that the build has trouble resolving webpack. Can you check whether it is installed at runtime or maybe even add it to your dependencies?

Another thing I wanna try: It is a bit hacky but can you try setting the following env var: VERCEL=1? The SDK still has some problems running on Vercel and I am wondering if it's the same with the runtime you're using. With that env var we're simulating running on Vercel.

[landyrev]

I'm experiencing the same issue with Next.js project using Sentry on Amplify build environment.

@lforst setting the VERCEL var to 1 didn't help, unfortunately.

[adeelejaz]

I also tried adding webpack in but I started getting weird error with vercel/nft module. I also checked my package-lock.json file and I do not have a webpack as a dependency.

After a bit of searching found this comment on Amplify JS (#2343), and added the following environment variable to get it working:

AMPLIFY_NEXTJS_EXPERIMENTAL_TRACE=true

Going to close this issue. Thank you for your help.

[landyrev]

Thanks, @adeelejaz! Setting AMPLIFY_NEXTJS_EXPERIMENTAL_TRACE to true helped