fix(gatsby): Use import for gatsby-browser.js instead of require (#7889)

Author: mydea

packages/gatsby/.eslintrc.js

@@ -15,6 +15,16 @@ module.exports = {
         project: ['../../tsconfig.dev.json'],
       },
     },
+    {
+      files: ['./gatsby-browser.js'],
+      env: {
+        browser: true,
+        node: false,
+      },
+      parserOptions: {
+        sourceType: 'module',
+      },
+    },
   ],
   extends: ['../../.eslintrc.js'],
 };

packages/gatsby/gatsby-browser.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
-const Sentry = require('@sentry/gatsby');
+import { init } from '@sentry/gatsby';
 
-exports.onClientEntry = function (_, pluginParams) {
+export function onClientEntry(_, pluginParams) {
   const isIntialized = isSentryInitialized();
   const areOptionsDefined = areSentryOptionsDefined(pluginParams);
 
@@ -24,12 +24,12 @@ exports.onClientEntry = function (_, pluginParams) {
     return;
   }
 
-  Sentry.init({
+  init({
     // eslint-disable-next-line no-undef
     dsn: __SENTRY_DSN__,
     ...pluginParams,
   });
-};
+}
 
 function isSentryInitialized() {
   // Although `window` should exist because we're in the browser (where this script

packages/gatsby/jest.config.js

@@ -4,4 +4,8 @@ module.exports = {
   ...baseConfig,
   setupFiles: ['<rootDir>/test/setEnvVars.ts'],
   testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.js$': 'ts-jest',
+    ...baseConfig.transform,
+  },
 };

packages/gatsby/package.json

@@ -50,10 +50,10 @@
     "clean": "rimraf build coverage *.d.ts sentry-gatsby-*.tgz",
     "fix": "run-s fix:eslint fix:prettier",
     "fix:eslint": "eslint . --format stylish --fix",
-    "fix:prettier": "prettier --write \"{src,test,scripts}/**/**.ts\"",
+    "fix:prettier": "prettier --write \"{src,test,scripts}/**/**.{ts,tsx,js}\"",
     "lint": "run-s lint:prettier lint:eslint",
     "lint:eslint": "eslint . --format stylish",
-    "lint:prettier": "prettier --check \"{src,test,scripts}/**/**.ts\"",
+    "lint:prettier": "prettier --check \"{src,test,scripts}/**/**.{ts,tsx,js}\"",
     "test": "yarn ts-node scripts/pretest.ts && yarn jest",
     "test:watch": "yarn ts-node scripts/pretest.ts && yarn jest --watch",
     "yalc:publish": "ts-node ../../scripts/prepack.ts && yalc publish build --push"

packages/gatsby/test/integration.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import { useEffect } from 'react';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import * as React from 'react';
-import { TextDecoder,TextEncoder } from 'util';
+import { TextDecoder, TextEncoder } from 'util';
 
 import { onClientEntry } from '../gatsby-browser';
 import * as Sentry from '../src';

packages/gatsby/tsconfig.test.json

@@ -5,8 +5,11 @@
 
   "compilerOptions": {
     // should include all types from `./tsconfig.json` plus types for all test frameworks used
-    "types": ["node", "jest"]
+    "types": ["node", "jest"],
 
     // other package-specific, test-specific options
+
+    // Needed to parse ESM from gatsby-browser.js
+    "allowJs": true
   }
 }