sentry-javascript: My application is broken in production with Sentry error: Uncaught ReferenceError: Cannot access 'ye' before initialization at types.js:3:16 (anonymous) @ types.js:3

Is there an existing issue for this?

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using? If you use the CDN bundles, please specify the exact bundle (e.g. bundle.tracing.min.js) in your SDK setup.

@sentry/react

SDK Version

7.44.2

Framework Version

18.2.0

Link to Sentry event

No response

SDK Setup

import.meta.env.PROD &&
  init({
    dsn: import.meta.env.VITE_SENTRY_DNS,
    integrations: [
      new BrowserTracing({
        routingInstrumentation: reactRouterV6Instrumentation(
          useEffect,
          useLocation,
          useNavigationType,
          createRoutesFromChildren,
          matchRoutes
        ),
      }),
    ],
    debug: true,
    tracesSampleRate: 1.0,
  });

Steps to Reproduce

In your browser type: https://dev.eino.ai/

Expected Result

No Sentry errors and the application loads correctly.

Actual Result

The application is broken with the error:

types.js:3 Uncaught ReferenceError: Cannot access ‘ye’ before initialization at types.js:3:16 (anonymous) @ types.js:3

Screenshot 2023-03-23 at 19 56 21

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 16 (8 by maintainers)

Most upvoted comments

I’ve adapted the below from https://github.com/philipwalton/rollup-native-modules-boilerplate

manualChunks(id) {
	if (id.includes('node_modules')) {
		// The directory name following the last `node_modules`.
		// Usually this is the package, but it could also be the scope.
		const directories = id.split(path.sep);
		const name = directories[directories.lastIndexOf('node_modules') + 1];

		// Group react dependencies into a common "react" chunk.
		// NOTE: This isn't strictly necessary for this app, but it's included
		// as an example to show how to manually group common dependencies.
	
		if (name.match(/^react/) || ['prop-types', 'scheduler'].includes(name)) {
			return 'react';
		}

		if (name.match(/^@sentry/)) {
			return 'sentry';
		}
	
		// Group `tslib` and `dynamic-import-polyfill` into the default bundle.
		// NOTE: This isn't strictly necessary for this app, but it's included
		// to show how to manually keep deps in the default chunk.
		if (name === 'tslib' || name === 'dynamic-import-polyfill') {
			return;
		}
	
		// Otherwise just return the name.
		return name;
	}
}

Yes - from the snippet above it looks like we are both splitting the packages using manualChunks.

Very rough diagnosis - one of the changes (maybe 2f886f613fc81a799c1d5556bc803f0d6df5045c?) causes Rollup to split the Sentry packages causing some import issues. You can either fix how you did (by getting rid of the manualChunks splitting), or you can adjust the manual splitting process to put all Sentry related items in a single file (which works for me).

I am getting a similar error, only with a slightly different error message:

Uncaught ReferenceError: Cannot access ‘GLOBAL_OBJ’ before initialization at types.js:3:16

7.44.0 was the release where the issue appeared. Going to do a little digging and report back.