createReduxEnhancer is not a function when using @sentry/nextjs with sentryReduxEnhancer

[DominicGBauer]

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?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/nextjs

SDK Version

7.33

Framework Version

Next 12.3.4

Link to Sentry event

https://nomanini-1w.sentry.io/issues/3887540095/?environment=development&project=5239130&query=is%3Aunresolved&referrer=issue-stream

SDK Setup

Client

// This file configures the initialization of Sentry on the browser.
// The config you add here will be used whenever a page is visited.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

import * as Sentry from '@sentry/nextjs'

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN

Sentry.init({
  dsn: SENTRY_DSN',
  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 0.3,
  environment: process.env.NODE_ENV,
  // ...
  // Note: if you want to override the automatic release value, do not set a
  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
  // that it will also get attached to your source maps
})

Server

// This file configures the initialization of Sentry on the server.
// The config you add here will be used whenever the server handles a request.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

import * as Sentry from '@sentry/nextjs'

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN

Sentry.init({
  dsn: SENTRY_DSN,
  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 0.3,
  environment: process.env.NODE_ENV,
  // ...
  // Note: if you want to override the automatic release value, do not set a
  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
  // that it will also get attached to your source maps
})

Steps to Reproduce

When I import * as Sentry from @sentry/nextjs and run this

const sentryReduxEnhancer = Sentry.createReduxEnhancer({
  stateTransformer: (state: RootState) => {
    const transformedState = {
      ...state,
      auth: {
        session: {
          ...state.auth.session,
          token: null,
        },
      },
    }

    return transformedState
  },
})


export const setupStore = (preloadedState?: PreloadedState<RootState>) => {
  return configureStore({
    ...,
    enhancers: [sentryReduxEnhancer],
}

I get createReduxEnhancer is not a function error.

However, it works when I import * as Sentry from @sentry/react.

I'm thinking it's because it thinks it's in a server context so @sentry/nextjs is using @sentry/node instead of @sentry/react

Expected Result

I can us import * as Sentry from @sentry/nextjs with Sentry.createReduxEnhancer and I do not get createReduxEnhancer is not a function error.

Actual Result

TypeError: createReduxEnhancer is not a function

[lforst]

Ah, I can see how this is a problem. I think you are correct in the assumption that this only happens in a server context as we're not exporting it there. As a workaround for now you can check for the existence of sentryReduxEnhancer before using it. On the server, it probably won't be of much use anyways.

[DominicGBauer]

Thanks for the feedback @lforst!

[ramsaysewell]

Is this issue going to be worked on anytime soon? I would really appreciate not having to install @sentry/react as well as @sentry/nextjs as a workaround

[lforst]

It's not on our immediate backlog. PRs welcome!

[iliapnmrv]

hi! any updates on this?