sentry-javascript Build failed because of webpack errors. Webpack build fails with ENOENT error due to missing semver module

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 SDK are you using?

@sentry/nextjs

SDK Version

8.20.0

Framework Version

React 18.2.0v | Next 13.4.6v

Link to Sentry event

No response

Reproduction Example/SDK Setup

We are encountering an issue where our Webpack build fails in our GitLab CI/CD pipeline due to a missing semver module. This issue appears to be related to the integration of Sentry in our Next.js project.

I show you my sentry.client.config.ts. Other configs are not touched after auto generation via npx @sentry/wizard@latest -i nextjs:

import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  environment: process.env.NEXT_PUBLIC_ENV,

  // Adjust this value in production, or use tracesSampler for greater control
  tracesSampleRate: 0.25,
  debug: false,
  replaysOnErrorSampleRate: 1.0,
  replaysSessionSampleRate: 0.1,

  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
  integrations: [
    Sentry.replayIntegration({
      // Additional Replay configuration goes in here, for example:
      maskAllText: true,
      blockAllMedia: true,
      maxReplayDuration: 300000,
    }),
  ],
});

My nextConfig:

const nextConfig = {
  output: 'standalone',
  typescript: {
    ignoreBuildErrors: true,
  },
  webpack(config, { dev, isServer }) {
    config.module.rules.push({
      test: /\.svg$/,
      include: [path.resolve(__dirname, './assets/icons/normalized')],
      use: [
        {
          loader: '@svgr/webpack',
          options: {
            svgoConfig: {
              plugins: [
                {
                  name: 'preset-default',
                  params: {
                    overrides: {
                      // disable plugins
                      removeViewBox: false,
                    },
                  },
                },
              ],
            },
          },
        },
      ],
    });

    return config;
  },

Then my sentryWebpackPluginOptions:

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

const sentryWebpackPluginOptions = {
  silent: true,
  org: 'myOrg',
  project: 'next-front',
  sentryUrl: 'https://mysentryurl.kz',
  authToken: process.env.NEXT_PUBLIC_SENTRY_AUTH_TOKEN,
  widenClientFileUpload: true,
  hideSourceMaps: true,
  disableLogger: true,
  release: {          // Without these flags Sentry CLI tries to send POST request and if there is no such project I've got 404 and webpack error.
    create: false, // This is very annoying behavior, because if there is some problem with Sentry host, then your build just stops. WHY?? 
    finalize: false, // I don't want to be depended on Sentry at all.
  },
};

module.exports = withSentryConfig(nextConfig, sentryWebpackPluginOptions);

During docker build it creates release and probably is going send it to sentryUrl.

However, we don't want to become dependent on sentry.
release config helped me with 404 error. But release flags are available in 8.x versions.

I know how to solve this issue for 7.x versions with these fields in sentry config. This works fine, but as I know it disables hideSourceMaps.

{
  disableServerWebpackPlugin: true,
  disableClientWebpackPlugin: true
}

That's why I decided to update "@sentry/nextjs" lib up to latest 8.20.0v. Here is another problem: if your self-hosted Sentry is not working, then you will get 404. Project not found error. And with release fields, I've got solved this problem

release: {        
    create: false, 
    finalize: false,
  },

But now CI/CD process is interrupted and failed due to this error Error: Cannot find module '/app/node_modules/semver/index.js'. Please verify that the package.json has a valid "main" entry

To solve this error I included next field into my sentry config, because there are no disableClientWebpackPlugin / disableServerWebpackPlugin for 8x versions. That unstable_sentryWebpackPluginOptions didn't help me.

unstable_sentryWebpackPluginOptions: {
    disable: true,
  },

What can I do? I do not want to disable hideSourceMaps by adding disableClientWebpackPlugin / disableServerWebpackPlugin by using 7.x version.

Steps to Reproduce

Steps to Reproduce:

Set up a Next.js 13.5.6v with React 18.2.0 project with Sentry integration as per the Sentry documentation.
Add a Dockerfile to containerize the application.
Set up a GitLab CI/CD pipeline to build the project inside a Docker container.
Run the pipeline.

FROM node:20.11-alpine as BUILD_IMAGE
WORKDIR /app
ARG NODE_ENV=production

COPY package.json package-lock.json ./
RUN yarn install --frozen-lockfile --production
COPY . .

# Set Sentry log level and build the application
RUN SENTRY_LOG_LEVEL=debug yarn run build

FROM node:20.11-alpine as PRODUCTION
WORKDIR /app

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=BUILD_IMAGE /app/package.json .
COPY --from=BUILD_IMAGE /app/package-lock.json .
COPY --from=BUILD_IMAGE /app/next.config.js ./
COPY --from=BUILD_IMAGE /app/public ./public
COPY --from=BUILD_IMAGE --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=BUILD_IMAGE --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENTRYPOINT ["node", "./server.js"]

Expected Result

The build process completes successfully without any errors.

Actual Result

The build process fails with the following error:

Failed to compile.
./assets/icons/normalized/arrow-link.svg
Error: Cannot find module '/app/node_modules/semver/index.js'. Please verify that the package.json has a valid "main" entry
    at tryPackage (node:internal/modules/cjs/loader:444:19)
    at Module._findPath (node:internal/modules/cjs/loader:715:18)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1130:27)
    at /app/node_modules/next/dist/server/require-hook.js:55:36
    at Module._load (node:internal/modules/cjs/loader:985:27)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at mod.require (/app/node_modules/next/dist/server/require-hook.js:65:28)
    at require (node:internal/modules/helpers:176:18)
    at _semver (/app/node_modules/@babel/core/lib/config/files/module-types.js:31:16)
    at Object.<anonymous> (/app/node_modules/@babel/core/lib/config/files/module-types.js:45:21)
Import trace for requested module:
./assets/icons/normalized/arrow-link.svg
./assets/icons/normalized/ sync nonrecursive \.svg$
./providers/theme/AppThemeProvider.tsx
./providers/index.tsx
.....Some other warnings
 > [build_image 6/6] RUN SENTRY_LOG_LEVEL=debug yarn run build:
118.2 ./assets/icons/normalized/circle.svg
118.2 ./assets/icons/normalized/ sync nonrecursive \.svg$
118.2 ./providers/theme/AppThemeProvider.tsx
118.2 ./providers/index.tsx
118.2 ./pages/_app.tsx
118.2 
118.2 
118.2 > Build failed because of webpack errors
118.3 error Command failed with exit code 1.
118.3 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
------
Dockerfile:11
--------------------
   9 |     
  10 |     # Set Sentry log level and build the application
  11 | >>> RUN SENTRY_LOG_LEVEL=debug yarn run build
  12 |     
  13 |     FROM node:20.11-alpine as PRODUCTION
--------------------
ERROR: failed to solve: process "/bin/sh -c SENTRY_LOG_LEVEL=debug yarn run build" did not complete successfully: exit code: 1
Cleaning up project directory and file based variables
00:00
ERROR: Job failed: exit status 1

I have never had that problem before.

Jul 26 '24 16:07 Rakhymbek

Hey @Rakhymbek thanks for writing in!

There's a lot going on in this issue description which makes it a bit hard to identify the concrete ask. Just for me to confirm: Are these the individual issues we're talking about:

You want to entirely disable source maps upload and release creation in Sentry at build time? Some thoughts:
- Uploading source maps is enabled by default because it makes errors in Sentry much easier to understand. Without uploading source maps, your errors will only show minified source code which makes debugging stack traces very tedious.
- Did you follow the documentation to disable source maps upload?
- I think your config for disabling release creating is correct
You get the semver error and think this is related to Sentry?
- I'm not saying this isn't related to Sentry but looking at the error message and stack trace, this much rather looks like there's a problem with svg files, leading me to believe @svgr/webpack might be responsible?

Jul 29 '24 08:07 Lms24

@Rakhymbek additionally I also noticed that in your dockerfile you are using yarn install but keep referencing package-lock.json. Setting this to yarn.lock did result in a successful build with the settings you have provided.

Jul 29 '24 08:07 chargome

@Rakhymbek additionally I also noticed that in your dockerfile you are using yarn install but keep referencing package-lock.json. Setting this to yarn.lock did result in a successful build with the settings you have provided.

Hi, @chargome ! Sorry for the late reply. Thank you very much for your help!

Indeed, we have mixed lock files and I tried to use only yarn-lock. However, it keeps to fail while docker-building on gitlab.

I used 8.26.0 sentry version with such config. I purposely set a dummy URL to ensure that the build step doesn't depend on the Sentry configuration.

  silent: true,
  org: 'dsa',
  project: 'dsadas',
  sentryUrl: 'sadsa',
  authToken: process.env.NEXT_PUBLIC_SENTRY_AUTH_TOKEN,
  widenClientFileUpload: true,
  hideSourceMaps: true,
  disableLogger: true,
  release: {
    create: false,
    finalize: false,
  },
};

Aug 19 '24 16:08 Rakhymbek

Hey @Rakhymbek thanks for writing in!

There's a lot going on in this issue description which makes it a bit hard to identify the concrete ask. Just for me to confirm: Are these the individual issues we're talking about:

You want to entirely disable source maps upload and release creation in Sentry at build time? Some thoughts:

Uploading source maps is enabled by default because it makes errors in Sentry much easier to understand. Without uploading source maps, your errors will only show minified source code which makes debugging stack traces very tedious.

Did you follow the documentation to disable source maps upload?

I think your config for disabling release creating is correct

You get the semver error and think this is related to Sentry?

I'm not saying this isn't related to Sentry but looking at the error message and stack trace, this much rather looks like there's a problem with svg files, leading me to believe @svgr/webpack might be responsible?

Hi, @Lms24 !

Sorry for the late response🙏🏻🙏🏻🙏🏻 And Thanks for the quick reaction!

I don't want to disable uploading source maps. But as far as I am concerned, my solution with adding those 2 flags would lead to disabling of uploading source maps:

disableServerWebpackPlugin: true,
disableClientWebpackPlugin: true,

It solved my problems on the building step. I used 7.118 version and set them in nextConfig.sentry. That was the reason why I decided to update up to 8x, now I test on 8.26.0 specifically. And I hoped disabling release feature could help me, but another problem arose from semver and svgr that I did not encounter before.

release: {
    create: false,
    finalize: false,
  },

I've tried to remove webpack svgr configs in nextConfig, however without any results. By the way, When I used npx @sentry/wizard@latest -i nextjs with the 8.26.0 version it created instrumentation.ts: // inside instrumentation.ts

  if (process.env.NEXT_RUNTIME === 'nodejs') {
    await import('./sentry.server.config');
  }

  if (process.env.NEXT_RUNTIME === 'edge') {
    await import('./sentry.edge.config');
  }
}

Recently, I noticed on the docker-building step such warning message:

- warn You have enabled experimental feature (instrumentationHook) in next.config.js.
- warn Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

I did next, disabled instrumentationHook:

experimental: {
    instrumentationHook: false,
  },

Now it successfully built. And I see such message while building:

#13 2.353 [@sentry/nextjs] You turned off the `instrumentationHook` option. Note that Sentry will not be initialized if you did not set it up inside `instrumentation.ts`.

After that, I see requests with 200 status and logs at sentry.OurInternalDomain.kz. It seems it works, but I am not sure If am I doing it right?

I just want to ensure that our build process does not depend on Sentry configurations. In cases, where sentry.OurInternalDomain.kz is unavailable(e.g. ,503, 502 errors or if it just drops), we could be sure that app continues building and work without any interruptions.

  silent: true,
  org: 'dsa',
  project: 'dsadas',
  sentryUrl: 'sadsa', // I purposely set a dummy URL to ensure that the build step doesn't depend on the Sentry configuration.
  authToken: process.env.NEXT_PUBLIC_SENTRY_AUTH_TOKEN,
  widenClientFileUpload: true,
  hideSourceMaps: true,
  disableLogger: true,
  release: {
    create: false,
    finalize: false,
  },
};

Aug 19 '24 16:08 Rakhymbek

@Rakhymbek disabling instrumentationHook will basically disable all server-side instrumentation for your next.js app, you want to keep that to true and initialize sentry in the instrumentation.ts file

Sep 13 '24 13:09 chargome

@Rakhymbek disabling instrumentationHook will basically disable all server-side instrumentation for your next.js app, you want to keep that to true and initialize sentry in the instrumentation.ts file

Do you mean I should not modify the instrumentation.ts file and just keep the default setup?

Sep 14 '24 17:09 Rakhymbek

@Rakhymbek Yes, if you need server-side performance instrumentation you will need to keep instrumentationHook: true

Sep 16 '24 14:09 chargome

@Rakhymbek Yes, if you need server-side performance instrumentation you will need to keep instrumentationHook: true

As I understand it, there’s no direct solution from Sentry for my issue with semver and svgr conflicts. It seems the problem might lie entirely with my dependencies.

Just a few questions:

Assuming I resolve the semver and svgr issues, can you confirm that with the flags below (for version 8.26.0), my Next.js app will continue building without crashing, even if sentry.OurInternalDomain.kz is unavailable?

    create: false,
    finalize: false,
  },

If the answer is YES, can we do the same for v7.x.x versions as well?

Sep 17 '24 21:09 Rakhymbek

@Rakhymbek if the domain is not available, by default an error will be thrown.

You can however handle build errors in your withSentryConfig via:

unstable_sentryWebpackPluginOptions: {
    errorHandler: // handle your error
}

Sep 19 '24 07:09 chargome

@Rakhymbek if the domain is not available, by default an error will be thrown.

You can however handle build errors in your withSentryConfig via:

unstable_sentryWebpackPluginOptions: { errorHandler: // handle your error }

Thank you, @chargome ! This option sounds as a solution! :)

So, I just need to add a function to handle the error, correct? Where can I find an example?
Is this option also available for v7.x.x versions?

Sep 19 '24 08:09 Rakhymbek

Good to hear! I think the only documentation for that is probably here – this should also be available in v7.

Sep 19 '24 11:09 chargome

Good to hear! I think the only documentation for that is probably here – this should also be available in v7.

Thanks for the help, @chargome ! I’ll try out everything I’ve learned, and if anything goes sideways, I’ll let you know.

Appreciate it!

Sep 19 '24 14:09 Rakhymbek

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you remove the label Waiting for: Community, I will leave it alone ... forever!

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

Nov 23 '24 08:11 getsantry[bot]