Sentry for Nextjs messes up the build process

[filipjakov]

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.24.1

Framework Version

Nextjs v12.3.1

Link to Sentry event

No response

Steps to Reproduce

I'm using Rive for animations, and in order to not download their runtime (wasm) from the CDN, I use the following article methodology. The gist of it is the following webpack config in next.config:

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.wasm$/,
      use: ['url-loader'],
    });

    return config;
  },
};

When I updated sentry to the latest version (7.24.1) next build gives the following error:

web:build: Failed to compile.
web:build: 
web:build: ./node_modules/@rive-app/canvas/rive.wasm
web:build: Module parse failed: Unexpected character '' (1:0)
web:build: The module seem to be a WebAssembly module, but module is not flagged as WebAssembly module for webpack.
web:build: BREAKING CHANGE: Since webpack 5 WebAssembly is not enabled by default and flagged as experimental feature.
web:build: You need to enable one of the WebAssembly experiments via 'experiments.asyncWebAssembly: true' (based on async modules) or 'experiments.syncWebAssembly: true' (like webpack 4, deprecated).
web:build: For files that transpile to WebAssembly, make sure to set the module type in the 'module.rules' section of the config (e. g. 'type: "webassembly/async"').
web:build: (Source code omitted for this binary file)

Since everything worked as expected with 7.16.0, I downgraded back and there was no build error. I am not able to further narrow down the version in which this error appears atm.

Expected Result

Sentry shouldn't mess with the rest of my build process, the url-loader for the Rive runtime shouldn't error in the build.

Actual Result

No build error.

[lforst]

Hi, can you please share your complete Next.js config? Even better would be a reproduction example we can pull to try to reproduce the error ourselves.

[filipjakov]

@lforst here is the config:

// @ts-check
const { withSentryConfig } = require('@sentry/nextjs');
const nextSafe = require('next-safe');
const nextTranslate = require('next-translate');
const { defaultLocale, locales } = require('./i18n');
// @ts-ignore
const withRoutes = require('nextjs-routes/config')({
	outDir: 'types',
	i18n: {
		defaultLocale,
		locales,
	},
});
const withBundleAnalyzer = require('@next/bundle-analyzer');

const packageJson = require('./package.json');

// @ts-ignore
const secureHeaders = nextSafe({
	isDev: process.env.NODE_ENV !== 'production',
	contentSecurityPolicy: false, // Will be dynamically set in the app
	permissionsPolicyDirectiveSupport: [], // TODO: create a reasonable permission policy
});

/**
 * Generics are necessary here in order to narrow down properties (publicRuntimeConfig for example)
 *
 * @template {import('next').NextConfig} T
 * @param {T} config - A generic parameter that flows through to the return type
 * @constraint {{import('next').NextConfig}}
 */
function getConfig(config) {
	return config;
}

/**
 * @param {string} name
 * @returns string | null
 */
function getEnv(name) {
	return process.env[name] ?? '!!missing!!';
}

let config = getConfig({
	// trailingSlash: true,
	optimizeFonts: false,
	reactStrictMode: true,
	poweredByHeader: false,
	images: {
		formats: ['image/avif', 'image/webp'],
	},
	httpAgentOptions: {
		keepAlive: false,
	},
	// Environment
	serverRuntimeConfig: {},
	publicRuntimeConfig: {
		appName: packageJson.name,
		appVersion: packageJson.version,
		appEnv: getEnv('APP_ENV'),
	},
	// SWC
	swcMinify: true,
	compiler: {
		// emotion: true by default since 12.2.0
	},

	experimental: {
		legacyBrowsers: false,
		browsersListForSwc: true,
		esmExternals: true,
	},

	async headers() {
		return [
			{ source: '/(.*)', headers: secureHeaders },
                ]
	},

	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,
		disableServerWebpackPlugin: !process.env['SENTRY_SOURCE_MAPS_UPLOAD'],
		disableClientWebpackPlugin: !process.env['SENTRY_SOURCE_MAPS_UPLOAD'],
	},

	webpack: (config, { webpack, isServer }) => {
		if (!isServer) {
			// Fixes npm packages that depend on `fs` module
			// @link https://github.com/vercel/next.js/issues/36514#issuecomment-1112074589
			config.resolve.fallback = { ...config.resolve.fallback, fs: false };
		}

		// https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking/
		config.plugins.push(
			new webpack.DefinePlugin({
				__SENTRY_DEBUG__: process.env['NODE_ENV'] !== 'production',
				__SENTRY_TRACING__: true, // TODO: remove if not used? Big bundle chunk
			})
		);

		config.module.rules.push({
			test: /\.wasm$/,
			use: ['url-loader'],
		});

		return config;
	},
});

// Disable sentry for dev mode and local builds
if (
	process.env['NODE_ENV'] === 'production' &&
	config.publicRuntimeConfig.appEnv !== 'development'
) {
	/**
	 * @link https://github.com/getsentry/sentry-webpack-plugin#options
	 * @type {Partial<import("@sentry/nextjs/types/config/types").SentryWebpackPluginOptions>}
	 */
	const sentryConfig = {
		// 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: false, // Don't suppresses logs
		// dryRun: true,
	};

	// @ts-ignore
	config = withSentryConfig(config, sentryConfig);
	console.info('Sentry On!');
}

if (process.env['ANALYZE'] === 'true') {
	config = withBundleAnalyzer({
		enabled: true,
	})(config);
}

/**
 * @module next.config
 * @type {config}
 */
// @ts-ignore
module.exports = withRoutes(nextTranslate(config));

[lforst]

Hi, please refer to this issue or this one as to why your Next.js config doesn't work anymore. withSentryConfig() may return a function (I recommend you remove the ts-ignore).

[filipjakov]

Hi @lforst , sorry for the late response. The links you provided, unfortunately, don't address the problem and didn't help. I'll try to create a sandbox for reproduction as soon as I manage.

In the meantime, I'll stick with the 7.16.0 version since it's the last that still works.

[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 🥀