Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

[zx-zx22]

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?

Self-hosted/on-premise

Which package are you using?

@sentry/nextjs

SDK Version

7.28.0

Framework Version

No response

Link to Sentry event

No response

Steps to Reproduce

1. nextjs Version 13.0.5
2. react Version 18.2.0
3. upgrade @sentry/nextjs 7.14.0 ==> 7.28.1

Expected Result

升级后能正常启动

Actual Result

升级后项目报错，回退到7.14.0能正常启动

[lforst]

Hi, thanks for writing in! Could you share your Next.js config or even better provide a small reproduction app so we can debug this further? Thank you!

[zx-zx22]

next.config.js
const { withSentryConfig } = require("@sentry/nextjs");
const withLess = require('next-with-less');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: [
        {
          loader: '@svgr/webpack',
          options: {
            prettier: false,
            svgo: true,
            svgoConfig: {
              plugins: [
                {
                  name: 'preset-default',
                  params: {
                    overrides: {
                      removeViewBox: false,
                    },
                  },
                },
                'prefixIds',
              ],
            },
            titleProp: true,
            ref: true,
          },
        },
        'file-loader',
      ],
      issuer: {
        and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
      },
    });

    return config;
  },
};

const urlPrefix =
  (process.env.NEXT_PUBLIC_PROD ? 'https:' : 'http:') +
  process.env.PUBLIC_URL +
  '/_next';

const sentryWebpackPluginOptions = {
  authToken: process.env.SENTRY_AUTH_TOKEN,
  org: "xxx",
  project: "xxx",
  url: "xxx",
  include: [".next"],
  ignore: ["node_modules", "next.config.js"],
  release:
    process.env.NEXT_PUBLIC_ENVIRONMENT + "@" + process.env.SENTRY_RELEASE,
  urlPrefix: urlPrefix,
  silent: true, // Suppresses all logs
};

module.exports = withLess(withSentryConfig(nextConfig, sentryWebpackPluginOptions));

发现，报错的是 @svgr/webpack组件。

[lforst]

First of all, I recommend you switch the order in which you wrap your next config. Like this:

module.exports = withSentryConfig(withLess(nextConfig), sentryWebpackPluginOptions);

Otherwise, we will release a new update soon (probably on monday) that will change a lot of things and this regard and might even fix the issue. Stay tuned!

[github-actions]

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 label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

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