Module not found error including Sentry in NextJs application

[gabrieleciolinosv]

Hi, I have a problem including Sentry in a NextJs application (version 12.1.6). I tried both the manual and automatic configuration but keep receiving the same error:

[next] You're using a Node.js module (path) which is not supported in the Edge Runtime.
[next] Learn more: https://nextjs.org/docs/api-reference/edge-runtime
[next] wait  - compiling...
[next] error - Error: Cannot find module for page: /
[next] error - ./node_modules/@sentry/cli/js/helper.js:3:0
[next] Module not found: Can't resolve 'path'

[next] Import trace for requested module:
[next] ./node_modules/@sentry/cli/js/index.js
[next] ./node_modules/@sentry/webpack-plugin/src/index.js
[next] ./node_modules/@sentry/webpack-plugin/src/cjs.js
[next] ./node_modules/@sentry/nextjs/esm/config/webpack.js
[next] ./node_modules/@sentry/nextjs/esm/config/withSentryConfig.js
[next] ./node_modules/@sentry/nextjs/esm/index.server.js
[next] ./pages/_middleware.ts

This is the next.config.js:

/* eslint-disable no-console */
/* eslint-disable @typescript-eslint/no-unsafe-argument */
/* eslint-disable @typescript-eslint/no-var-requires */
const { PerformanceObserver, performance } = require('perf_hooks')
const withYarn1Workspaces = require('@graphcommerce/next-config').withYarn1Scopes()
const { withSentryConfig } = require('@sentry/nextjs')

require('dotenv').config({ path: `${__dirname}/.env` })

const withPWA = require('next-pwa')

const obs = new PerformanceObserver((entryList) => {
  entryList.getEntries().forEach((item) => {
    console.log(`${item.name}: ${Math.round(item.duration)}ms`)
  })
  performance.clearMarks()
})
obs.observe({ entryTypes: ['measure'] })

if (!process.env.GRAPHCMS_URL || !process.env.MAGENTO_ENDPOINT) {
  throw Error('Please specify GRAPHCMS_URL and MAGENTO_ENDPOINT in your .env')
}

if (
  !process.env.NEXT_PUBLIC_LOCALE_STORES ||
  !Object.keys(JSON.parse(process.env.NEXT_PUBLIC_LOCALE_STORES)).length > 0
) {
  throw Error('Please specify NEXT_PUBLIC_LOCALE_STORES in your .env')
}

if (process.env.VERCEL_ENV !== 'production' && process.env.VERCEL_URL) {
  process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT = `https://${process.env.VERCEL_URL}/api/graphql`
}

if (!process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT) {
  throw Error('Please specify NEXT_PUBLIC_GRAPHQL_ENDPOINT in your .env')
}

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    scrollRestoration: true,
  },
  compiler: {
    emotion: {
      labelFormat: '[filename]--[local]',
    },
  },
  swcMinify: false,
  pwa: {
    dest: 'public',
    disable: process.env.NODE_ENV === 'development',
  },
  images: {
    domains: (process.env.IMAGE_DOMAINS ?? '').split(',').map((s) => s.trim()),
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    dangerouslyAllowSVG: true,
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
  },
  i18n: {
    locales: Object.keys(JSON.parse(process.env.NEXT_PUBLIC_LOCALE_STORES)),
    defaultLocale: Object.keys(JSON.parse(process.env.NEXT_PUBLIC_LOCALE_STORES))[0],
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
  webpack: (config) => {
    config.optimization.minimize = true
    config.optimization.providedExports = true

    config.resolve.alias = {
      ...config.resolve.alias,
      '@mui/base': '@mui/base/modern',
      '@mui/lab': '@mui/lab/modern',
      '@mui/material': '@mui/material/modern',
      '@mui/styled-engine': '@mui/styled-engine/modern',
      '@mui/system': '@mui/system/modern',
    }

    return config
  },
  typescript: {
    // !! WARN !!
    // Dangerously allow production builds to successfully complete even if
    // your project has type errors.
    // !! WARN !!
    ignoreBuildErrors: true,
  },
  async redirects() {
    return [
      {
        source: '/cart',
        destination: '/',
        permanent: true,
      },
    ]
  },
  sentry: {
    // Use `hidden-source-map` rather than `source-map` as the Webpack `devtool`
    // for client-side builds. (This will be the default starting in
    // `@sentry/nextjs` version 8.0.0.) See
    // https://webpack.js.org/configuration/devtool/ and
    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-hidden-source-map
    // for more information.
    // hideSourceMaps: true,
  },
}

const sentryWebpackPluginOptions = {
  // Additional config options for the Sentry Webpack plugin. Keep in mind that
  // the following options are set automatically, and overriding them is not
  // recommended:
  //   release, url, org, project, authToken, configFile, stripPrefix,
  //   urlPrefix, include, ignore

  silent: true, // Suppresses all logs
  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options.
}

/** @type {import('next').NextConfig} */
module.exports = withSentryConfig(
  withPWA(withYarn1Workspaces(nextConfig)),
  sentryWebpackPluginOptions,
)

This is a very basic configuration, but it seems that adding Sentry middleware in webpack broke things, if I remove it the build runs successfully. Please could you have suggestions?

[lforst]

Are you getting this error locally or on Vercel?