3 files changed, 90 insertions, 12 deletions

diff --git a/scripts/frontend/create_jsconfig.js b/scripts/frontend/create_jsconfig.js
index 7e2d0eb02c4..be95c5cb2d3 100755
--- a/scripts/frontend/create_jsconfig.js
+++ b/scripts/frontend/create_jsconfig.js
@@ -30,8 +30,19 @@ async function createJsConfig() {
   // eslint-disable-next-line global-require
   const webpackConfig = require('../../config/webpack.config');
 
-  const paths = {}; // aliases
-  const WEBPACK_ALIAS_EXCEPTIONS = ['jquery$', '@gitlab/svgs/dist/icons.svg'];
+  // Aliases
+  const paths = {
+    // NOTE: Sentry is exposed via a wrapper, which has a limited API.
+    '@sentry/browser': [
+      path.relative(PATH_PROJECT_ROOT, 'app/assets/javascripts/sentry/sentry_browser_wrapper.js'),
+    ],
+  };
+  const WEBPACK_ALIAS_EXCEPTIONS = [
+    'jquery$',
+    '@gitlab/svgs/dist/icons.svg',
+    '@apollo/client$',
+    '@sentry/browser$',
+  ];
   Object.entries(webpackConfig.resolve.alias)
     .filter(([key]) => !WEBPACK_ALIAS_EXCEPTIONS.includes(key))
     .forEach(([key, value]) => {
@@ -40,6 +51,7 @@ async function createJsConfig() {
       paths[alias] = target;
     });
 
+  // JS/TS config. See more: https://www.typescriptlang.org/tsconfig
   const jsConfig = {
     // As we're introducing jsconfig to the project, as a precaution we add both:
     // 'include' and 'exclude' options. This might be simplified in the future.
@@ -52,13 +64,22 @@ async function createJsConfig() {
       'ee/app/assets/javascripts',
       'spec/frontend',
       'ee/spec/frontend',
-      'tmp/tests/frontend/fixtures/',
-      'tmp/tests/frontend/fixtures-ee/',
+      'tmp/tests/frontend/fixtures',
+      'tmp/tests/frontend/fixtures-ee',
     ],
+
+    // Explicitly enable automatic type acquisition
+    // See more: https://www.typescriptlang.org/tsconfig#type-acquisition
+    typeAcquisition: {
+      enable: true,
+    },
+
     compilerOptions: {
       baseUrl: '.', // Define the project root
       checkJs: false, // Disable type checking on JavaScript files
       disableSizeLimit: true, // Disable memory size limit for the language server
+      skipLibCheck: true, // Skip type checking all .d.ts files
+      resolveJsonModule: true, // Enable importing .json files
       paths, // Aliases
     },
   };
diff --git a/scripts/frontend/preinstall.mjs b/scripts/frontend/preinstall.mjs
new file mode 100644
index 00000000000..09d980344ea
--- /dev/null
+++ b/scripts/frontend/preinstall.mjs
@@ -0,0 +1,59 @@
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { readFile, rm } from 'node:fs/promises';
+
+const ROOT_PATH = join(dirname(fileURLToPath(import.meta.url)), '..', '..');
+const NODE_MODULES = join(ROOT_PATH, 'node_modules');
+const INTEGRITY_FILE = join(NODE_MODULES, '.yarn-integrity');
+const PACKAGE_JSON = join(ROOT_PATH, 'package.json');
+
+function isAliasedDependency(x) {
+  return x.includes('@npm:');
+}
+function serializeAliasedDependencyPatterns(obj) {
+  return Object.entries(obj).map(([key, version]) => `${key}@${version}`);
+}
+
+async function readJSON(file) {
+  return JSON.parse(await readFile(file, { encoding: 'utf-8' }));
+}
+
+async function getPrevTopLevelPatterns() {
+  try {
+    return (await readJSON(INTEGRITY_FILE))?.topLevelPatterns?.filter(isAliasedDependency);
+  } catch {
+    return [];
+  }
+}
+async function getCurrentTopLevelPatterns() {
+  try {
+    const { dependencies, devDependencies } = await readJSON(PACKAGE_JSON);
+
+    return serializeAliasedDependencyPatterns(dependencies)
+      .concat(serializeAliasedDependencyPatterns(devDependencies))
+      .filter(isAliasedDependency);
+  } catch {
+    return [];
+  }
+}
+
+function arraysHaveSameItems(a1, a2) {
+  return JSON.stringify(a1.sort()) === JSON.stringify(a2.sort());
+}
+
+const [prevTopLevelPatterns, currentTopLevelPatterns] = await Promise.all([
+  getPrevTopLevelPatterns(),
+  getCurrentTopLevelPatterns(),
+]);
+
+/**
+ * Yarn seems to have problems at times, if one uses an <alias>@npm:<name>
+ *  and those packages are being updated. In case one switches branches the
+ *  node_modules folder seems to end up being a corrupted somehow
+ */
+if (!arraysHaveSameItems(prevTopLevelPatterns, currentTopLevelPatterns)) {
+  console.error(
+    '[WARNING] package.json changed significantly. Removing node_modules to be sure there are no problems.',
+  );
+  await rm(NODE_MODULES, { recursive: true, force: true });
+}
diff --git a/scripts/frontend/webpack_dev_server.js b/scripts/frontend/webpack_dev_server.js
index a76e6dc024a..ae73c14b501 100755
--- a/scripts/frontend/webpack_dev_server.js
+++ b/scripts/frontend/webpack_dev_server.js
@@ -30,17 +30,15 @@ if (STATIC_MODE) {
 
 // run webpack through webpack-dev-server, optionally compiling a DLL to reduce memory
 else {
-  const watch = ['config/webpack.config.js'];
+  const watch = [
+    'config/webpack.config.js',
+    // ensure we refresh when running yarn install
+    'node_modules/.yarn-integrity',
+  ];
 
   // if utilizing the vendor DLL, we need to restart the process when dependency changes occur
   if (DLL_MODE) {
-    watch.push(
-      'config/webpack.vendor.config.js',
-      // ensure we refresh when running yarn install
-      'node_modules/.yarn-integrity',
-      'package.json',
-      'yarn.lock',
-    );
+    watch.push('config/webpack.vendor.config.js', 'package.json', 'yarn.lock');
   }
   nodemon({
     exec: 'webpack-dev-server --config config/webpack.config.js',