diff --git a/packages/cypress/src/plugins/preprocessor.spec.ts b/packages/cypress/src/plugins/preprocessor.spec.ts
index 04043d82d6..18a207be3e 100644
--- a/packages/cypress/src/plugins/preprocessor.spec.ts
+++ b/packages/cypress/src/plugins/preprocessor.spec.ts
@@ -20,7 +20,7 @@ describe('getWebpackConfig', () => {
     });
     expect(config.module.rules).toContainEqual({
       test: /\.(j|t)sx?$/,
-      loader: 'ts-loader',
+      loader: require.resolve('ts-loader'),
       exclude: [/node_modules/],
       options: {
         configFile: './tsconfig.json',
diff --git a/packages/cypress/src/plugins/preprocessor.ts b/packages/cypress/src/plugins/preprocessor.ts
index 02123d7e15..7776c3a78a 100644
--- a/packages/cypress/src/plugins/preprocessor.ts
+++ b/packages/cypress/src/plugins/preprocessor.ts
@@ -37,7 +37,7 @@ export function getWebpackConfig(config: any) {
       rules: [
         {
           test: /\.(j|t)sx?$/,
-          loader: 'ts-loader',
+          loader: require.resolve('ts-loader'),
           exclude: [/node_modules/],
           options: {
             configFile: config.env.tsConfig,
diff --git a/packages/next/src/utils/config.ts b/packages/next/src/utils/config.ts
index 13cf3e1e3a..b8a04f4bc3 100644
--- a/packages/next/src/utils/config.ts
+++ b/packages/next/src/utils/config.ts
@@ -58,7 +58,7 @@ export function createWebpackConfig(
             use: [
               '@svgr/webpack?-svgo,+titleProp,+ref![path]',
               {
-                loader: 'url-loader',
+                loader: require.resolve('url-loader'),
                 options: {
                   limit: 10000, // 10kB
                   name: '[name].[hash:7].[ext]',
@@ -70,7 +70,7 @@ export function createWebpackConfig(
           {
             use: [
               {
-                loader: 'url-loader',
+                loader: require.resolve('url-loader'),
                 options: {
                   limit: 10000, // 10kB
                   name: '[name].[hash:7].[ext]',
diff --git a/packages/node/src/utils/config.spec.ts b/packages/node/src/utils/config.spec.ts
index de5e49c631..f4e670a2ee 100644
--- a/packages/node/src/utils/config.spec.ts
+++ b/packages/node/src/utils/config.spec.ts
@@ -47,7 +47,7 @@ describe('getBaseWebpackPartial', () => {
       );
       expect(typescriptRule).toBeTruthy();
 
-      expect(typescriptRule.loader).toEqual('ts-loader');
+      expect(typescriptRule.loader).toContain('ts-loader');
     });
 
     it('should split typescript type checking into a separate workers', () => {
@@ -131,7 +131,9 @@ describe('getBaseWebpackPartial', () => {
       const result = getBaseWebpackPartial(input);
 
       expect(
-        result.module.rules.find((rule) => rule.loader === 'ts-loader').options
+        result.module.rules.find((rule) =>
+          rule.loader.toString().includes('ts-loader')
+        ).options
       ).toEqual({
         configFile: 'tsconfig.json',
         transpileOnly: true,
diff --git a/packages/node/src/utils/config.ts b/packages/node/src/utils/config.ts
index 5434228f93..26a4f90015 100644
--- a/packages/node/src/utils/config.ts
+++ b/packages/node/src/utils/config.ts
@@ -36,7 +36,7 @@ export function getBaseWebpackPartial(
       rules: [
         {
           test: /\.(j|t)sx?$/,
-          loader: `ts-loader`,
+          loader: require.resolve(`ts-loader`),
           exclude: /node_modules/,
           options: {
             configFile: options.tsConfig,
diff --git a/packages/react/plugins/webpack.ts b/packages/react/plugins/webpack.ts
index 6714c222a9..3238f4efe6 100644
--- a/packages/react/plugins/webpack.ts
+++ b/packages/react/plugins/webpack.ts
@@ -5,7 +5,7 @@ function getWebpackConfig(config: Configuration) {
   config.module.rules.push(
     {
       test: /\.(png|jpe?g|gif|webp)$/,
-      loader: 'url-loader',
+      loader: require.resolve('url-loader'),
       options: {
         limit: 10000, // 10kB
         name: '[name].[hash:7].[ext]',
@@ -22,7 +22,7 @@ function getWebpackConfig(config: Configuration) {
           use: [
             '@svgr/webpack?-svgo,+titleProp,+ref![path]',
             {
-              loader: 'url-loader',
+              loader: require.resolve('url-loader'),
               options: {
                 limit: 10000, // 10kB
                 name: '[name].[hash:7].[ext]',
@@ -34,7 +34,7 @@ function getWebpackConfig(config: Configuration) {
         {
           use: [
             {
-              loader: 'url-loader',
+              loader: require.resolve('url-loader'),
               options: {
                 limit: 10000, // 10kB
                 name: '[name].[hash:7].[ext]',
diff --git a/packages/web/src/utils/config.spec.ts b/packages/web/src/utils/config.spec.ts
index b1b4d1496b..eda57b6433 100644
--- a/packages/web/src/utils/config.spec.ts
+++ b/packages/web/src/utils/config.spec.ts
@@ -49,7 +49,7 @@ describe('getBaseWebpackPartial', () => {
       );
       expect(rule).toBeTruthy();
 
-      expect(rule.loader).toEqual('babel-loader');
+      expect(rule.loader).toContain('babel-loader');
     });
 
     it('should split typescript type checking into a separate workers', () => {
@@ -165,8 +165,9 @@ describe('getBaseWebpackPartial', () => {
       const result = getBaseWebpackPartial(input, true);
 
       expect(
-        (result.module.rules.find((rule) => rule.loader === 'babel-loader')
-          .options as any).envName
+        (result.module.rules.find((rule) =>
+          rule.loader.toString().includes('babel-loader')
+        ).options as any).envName
       ).toMatch('modern');
     });
 
@@ -174,8 +175,9 @@ describe('getBaseWebpackPartial', () => {
       const result = getBaseWebpackPartial(input, false);
 
       expect(
-        (result.module.rules.find((rule) => rule.loader === 'babel-loader')
-          .options as any).envName
+        (result.module.rules.find((rule) =>
+          rule.loader.toString().includes('babel-loader')
+        ).options as any).envName
       ).toMatch('legacy');
     });
   });
diff --git a/packages/web/src/utils/config.ts b/packages/web/src/utils/config.ts
index 359be891f8..8e80ca47c5 100644
--- a/packages/web/src/utils/config.ts
+++ b/packages/web/src/utils/config.ts
@@ -48,7 +48,7 @@ export function getBaseWebpackPartial(
       rules: [
         {
           test: /\.([jt])sx?$/,
-          loader: `babel-loader`,
+          loader: require.resolve(`babel-loader`),
           exclude: /node_modules/,
           options: {
             rootMode: 'upward',
diff --git a/packages/web/src/utils/third-party/cli-files/models/webpack-configs/common.ts b/packages/web/src/utils/third-party/cli-files/models/webpack-configs/common.ts
index 6eb621b9e9..34bcdde55d 100644
--- a/packages/web/src/utils/third-party/cli-files/models/webpack-configs/common.ts
+++ b/packages/web/src/utils/third-party/cli-files/models/webpack-configs/common.ts
@@ -316,7 +316,7 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
     sourceMapUseRule = {
       use: [
         {
-          loader: 'source-map-loader',
+          loader: require.resolve('source-map-loader'),
         },
       ],
     };
@@ -490,7 +490,7 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
       rules: [
         {
           test: /\.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
-          loader: 'file-loader',
+          loader: require.resolve('file-loader'),
           options: {
             name: `[name]${hashFormat.file}.[ext]`,
           },
diff --git a/packages/web/src/utils/third-party/cli-files/models/webpack-configs/styles.ts b/packages/web/src/utils/third-party/cli-files/models/webpack-configs/styles.ts
index a6c7933ce4..f0288cf480 100644
--- a/packages/web/src/utils/third-party/cli-files/models/webpack-configs/styles.ts
+++ b/packages/web/src/utils/third-party/cli-files/models/webpack-configs/styles.ts
@@ -146,7 +146,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
       test: /\.scss$|\.sass$/,
       use: [
         {
-          loader: 'sass-loader',
+          loader: require.resolve('sass-loader'),
           options: {
             implementation: sassImplementation,
             sourceMap: cssSourceMap,
@@ -164,7 +164,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
       test: /\.less$/,
       use: [
         {
-          loader: 'less-loader',
+          loader: require.resolve('less-loader'),
           options: {
             sourceMap: cssSourceMap,
             javascriptEnabled: true,
@@ -177,7 +177,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
       test: /\.styl$/,
       use: [
         {
-          loader: 'stylus-loader',
+          loader: require.resolve('stylus-loader'),
           options: {
             sourceMap: cssSourceMap,
             paths: includePaths,
@@ -192,9 +192,9 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
     exclude: globalStylePaths,
     test,
     use: [
-      { loader: 'raw-loader' },
+      { loader: require.resolve('raw-loader') },
       {
-        loader: 'postcss-loader',
+        loader: require.resolve('postcss-loader'),
         options: {
           ident: 'embedded',
           plugins: postcssPluginCreator,
@@ -224,10 +224,10 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
           use: [
             buildOptions.extractCss
               ? MiniCssExtractPlugin.loader
-              : 'style-loader',
+              : require.resolve('style-loader'),
             RawCssLoader,
             {
-              loader: 'postcss-loader',
+              loader: require.resolve('postcss-loader'),
               options: {
                 ident: buildOptions.extractCss ? 'extracted' : 'embedded',
                 plugins: postcssPluginCreator,
diff --git a/packages/web/src/utils/web.config.ts b/packages/web/src/utils/web.config.ts
index bffddda2b2..a47d650721 100644
--- a/packages/web/src/utils/web.config.ts
+++ b/packages/web/src/utils/web.config.ts
@@ -121,7 +121,7 @@ function getStylesPartial(
         loaderConfig.loader === 'raw-loader'
       ) {
         return {
-          loader: 'style-loader',
+          loader: require.resolve('style-loader'),
         };
       }
       return loaderConfig;
@@ -138,10 +138,10 @@ function getStylesPartial(
             {
               loader: options.extractCss
                 ? MiniCssExtractPlugin.loader
-                : 'style-loader',
+                : require.resolve('style-loader'),
             },
             {
-              loader: 'css-loader',
+              loader: require.resolve('css-loader'),
               options: {
                 modules: true,
                 importLoaders: 1,
@@ -155,16 +155,16 @@ function getStylesPartial(
             {
               loader: options.extractCss
                 ? MiniCssExtractPlugin.loader
-                : 'style-loader',
+                : require.resolve('style-loader'),
             },
             {
-              loader: 'css-loader',
+              loader: require.resolve('css-loader'),
               options: {
                 modules: true,
                 importLoaders: 1,
               },
             },
-            { loader: 'sass-loader' },
+            { loader: require.resolve('sass-loader') },
           ],
         },
         ...rules,