diff --git a/config/webpack.config.js b/config/webpack.config.js
index f922c0e70ca0872b2db0daa208b4ed9de2bbc4ce..ca5506a1e3910ac8b6bea89a6eb6c23f14506a1a 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -347,7 +347,7 @@ module.exports = {
         },
       },
       {
-        test: /@swagger-api\/apidom-.*\.(js|cjs)$/,
+        test: /@swagger-api\/apidom-.*\.[mc]?js$/,
         include: /node_modules/,
         loader: 'babel-loader',
         options: {
@@ -664,6 +664,42 @@ module.exports = {
       resource.request = path.join(ROOT_PATH, 'app/assets/javascripts/lib/markdown_it.js');
     }),
 
+    /*
+     The following `NormalModuleReplacementPlugin` adds support for exports field in `package.json`.
+     It might not necessarily be needed for all packages which expose it, but some packages
+     need it because they use the exports internally.
+
+     Webpack 4 doesn't have support for it, while vite does.
+     See also: https://github.com/webpack/webpack/issues/9509
+     */
+    ...['@swagger-api/apidom-reference'].map((packageName) => {
+      const packageJSON = fs.readFileSync(
+        path.join(ROOT_PATH, 'node_modules', packageName, 'package.json'),
+        'utf-8',
+      );
+      const { exports } = JSON.parse(packageJSON);
+      const regex = new RegExp(`^${packageName}`);
+      return new webpack.NormalModuleReplacementPlugin(regex, (resource) => {
+        const { request } = resource;
+        if (!request.endsWith('.js') && !request.endsWith('.mjs') && !request.endsWith('.cjs')) {
+          const relative = `./${path.relative(packageName, request)}`;
+          if (exports[relative]?.browser?.import || exports[relative]?.import) {
+            const newRequest = path.join(
+              packageName,
+              exports[relative]?.browser?.import || exports[relative]?.import,
+            );
+            console.log(`[exports-replacer]: ${request} => ${newRequest}`);
+            // eslint-disable-next-line no-param-reassign
+            resource.request = newRequest;
+          } else {
+            console.warn(
+              `[exports-replacer]: Could not find import field for ${relative} in exports of [${packageName}]`,
+            );
+          }
+        }
+      });
+    }),
+
     !IS_JH &&
       new webpack.NormalModuleReplacementPlugin(/^jh_component\/(.*)\.vue/, (resource) => {
         // eslint-disable-next-line no-param-reassign