Skip to content

Commit

Permalink
fix(nextjs): Avoid importing SentryWebpackPlugin in dev mode (#8557)
Browse files Browse the repository at this point in the history
As reported in #8541, our NextJS SDK currently breaks dev mode for the
newest NextJS 13.4.10 version

I still have absolutely no idea which of the changes in
[13.4.10](https://github.com/vercel/next.js/releases/tag/v13.4.10) is
causing this.
However, I traced the error back and it happens as soon as our NextJS
SDK package requires @sentry/webpack-plugin:

* @sentry/nextjs calls `require('@sentry/webpack-plugin')`
* @sentry/webpack-plugin calls `const { RawSource } =
require('webpack-sources');`
* For _whatever_ reason, NextJS can't require `webpack-sources` and
throws

Since we don't enable our Webpack plugin [in dev

mode](https://github.com/getsentry/sentry-javascript/blob/723f851f358b75cd39da353804c51ff27ebb0c11/packages/nextjs/src/config/webpack.ts#L305)
anyway, one way to get rid of this error is to only require it if we're
_not_ in dev mode.

This hotfix therefore moves the top-level require of
`@sentry/webpack-plugin` to a dynamic require. This isn't a great
solution and honestly quite ugly but if it unblocks users for now I'd
say we merge it. I think we should definitely revisit this though once
we know more about why NextJS suddenly isn't able to import
`webpack-sources`.

closes #8541
  • Loading branch information
Lms24 committed Jul 17, 2023
1 parent 2919511 commit 0ca7389
Showing 1 changed file with 7 additions and 2 deletions.
9 changes: 7 additions & 2 deletions packages/nextjs/src/config/webpack.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
/* eslint-disable complexity */
/* eslint-disable max-lines */
import { getSentryRelease } from '@sentry/node';
import { arrayify, dropUndefinedKeys, escapeStringForRegex, logger } from '@sentry/utils';
import { default as SentryWebpackPlugin } from '@sentry/webpack-plugin';
import { arrayify, dropUndefinedKeys, escapeStringForRegex, loadModule, logger } from '@sentry/utils';
import * as chalk from 'chalk';
import * as fs from 'fs';
import * as path from 'path';
Expand Down Expand Up @@ -313,8 +312,11 @@ export function constructWebpackConfigFunction(
// without, the option to use `hidden-source-map` only applies to the client-side build.
newConfig.devtool = userSentryOptions.hideSourceMaps && !isServer ? 'hidden-source-map' : 'source-map';

const SentryWebpackPlugin = loadModule('@sentry/webpack-plugin');

newConfig.plugins = newConfig.plugins || [];
newConfig.plugins.push(
// @ts-expect-error - this exists, the dynamic import just doesn't know about it
new SentryWebpackPlugin(
getWebpackPluginOptions(buildContext, userSentryWebpackPluginOptions, userSentryOptions),
),
Expand Down Expand Up @@ -767,6 +769,9 @@ function shouldEnableWebpackPlugin(buildContext: BuildContext, userSentryOptions
// architecture-specific version of the `sentry-cli` binary. If `yarn install`, `npm install`, or `npm ci` are run
// with the `--ignore-scripts` option, this will be blocked and the missing binary will cause an error when users
// try to build their apps.
const SentryWebpackPlugin = loadModule('@sentry/webpack-plugin');

// @ts-expect-error - this exists, the dynamic import just doesn't know it
if (!SentryWebpackPlugin.cliBinaryExists()) {
// eslint-disable-next-line no-console
console.error(
Expand Down

0 comments on commit 0ca7389

Please sign in to comment.