Skip to content

Build failed because of webpack errors. Webpack build fails with ENOENT error due to missing semver module #13070

Closed as not planned

Description

Is there an existing issue for this?

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:

  1. Set up a Next.js 13.5.6v with React 18.2.0 project with Sentry integration as per the Sentry documentation.
  2. Add a Dockerfile to containerize the application.
  3. Set up a GitLab CI/CD pipeline to build the project inside a Docker container.
  4. 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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    • Status

      Waiting for: Community

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions