fix(core): resolve webpack loaders with require.resolve() (nrwl#3436)

* fix(core): resolve webpack loaders with `require.resolve()` With strict package managers such as pnpm or Yarn PnP, transitive dependencies are *not* hoisted to the root node_modules folder. This means that a webpack config defined within a package like '@nrwl/cypress' cannot resolve loaders like 'ts-loader', unless 'ts-loader' is declared in the workspace's own package.json. This is a problem because the workspace might define a different version of 'ts-loader', incompatible with the version declared by '@nrwl/cypress/package.json'. The workspace should not need to declare a dependency on 'ts-loader' anyway. See also: * pnpm/pnpm#801 * webpack/webpack#5087 * fix(core): resolve absolute 'raw-loader' path When replacing the 'raw-loader' rule in the `getStylesPartial` function, check for the absolute path of 'raw-loader' rather than just the name.
Doginal · Nov 25, 2020 · 1a6640b · 1a6640b
1 parent bfb8685
commit 1a6640b
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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]',
@@ -35,7 +35,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/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
@@ -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
@@ -125,10 +125,10 @@ function getStylesPartial(
     rule.use = rule.use.map((loaderConfig) => {
       if (
         typeof loaderConfig === 'object' &&
-        loaderConfig.loader === 'raw-loader'
+        loaderConfig.loader === require.resolve('raw-loader')
       ) {
         return {
-          loader: 'style-loader',
+          loader: require.resolve('style-loader'),
         };
       }
       return loaderConfig;
@@ -145,10 +145,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,
@@ -162,16 +162,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,