Skip to content

Commit 7b064d7

Browse files
elliottsjDoginal
elliottsj
authored and
Doginal
committed
fix(core): resolve webpack loaders with require.resolve() (nrwl#3341)
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
1 parent 8b184bf commit 7b064d7

File tree

11 files changed

+35
-31
lines changed

11 files changed

+35
-31
lines changed

‎packages/cypress/src/plugins/preprocessor.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ describe('getWebpackConfig', () => {
2020
});
2121
expect(config.module.rules).toContainEqual({
2222
test: /\.(j|t)sx?$/,
23-
loader: 'ts-loader',
23+
loader: require.resolve('ts-loader'),
2424
exclude: [/node_modules/],
2525
options: {
2626
configFile: './tsconfig.json',

‎packages/cypress/src/plugins/preprocessor.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export function getWebpackConfig(config: any) {
3737
rules: [
3838
{
3939
test: /\.(j|t)sx?$/,
40-
loader: 'ts-loader',
40+
loader: require.resolve('ts-loader'),
4141
exclude: [/node_modules/],
4242
options: {
4343
configFile: config.env.tsConfig,

‎packages/next/src/utils/config.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export function createWebpackConfig(
5858
use: [
5959
'@svgr/webpack?-svgo,+titleProp,+ref![path]',
6060
{
61-
loader: 'url-loader',
61+
loader: require.resolve('url-loader'),
6262
options: {
6363
limit: 10000, // 10kB
6464
name: '[name].[hash:7].[ext]',
@@ -70,7 +70,7 @@ export function createWebpackConfig(
7070
{
7171
use: [
7272
{
73-
loader: 'url-loader',
73+
loader: require.resolve('url-loader'),
7474
options: {
7575
limit: 10000, // 10kB
7676
name: '[name].[hash:7].[ext]',

‎packages/node/src/utils/config.spec.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ describe('getBaseWebpackPartial', () => {
4747
);
4848
expect(typescriptRule).toBeTruthy();
4949

50-
expect(typescriptRule.loader).toEqual('ts-loader');
50+
expect(typescriptRule.loader).toContain('ts-loader');
5151
});
5252

5353
it('should split typescript type checking into a separate workers', () => {
@@ -131,7 +131,9 @@ describe('getBaseWebpackPartial', () => {
131131
const result = getBaseWebpackPartial(input);
132132

133133
expect(
134-
result.module.rules.find((rule) => rule.loader === 'ts-loader').options
134+
result.module.rules.find((rule) =>
135+
rule.loader.toString().includes('ts-loader')
136+
).options
135137
).toEqual({
136138
configFile: 'tsconfig.json',
137139
transpileOnly: true,

‎packages/node/src/utils/config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export function getBaseWebpackPartial(
3636
rules: [
3737
{
3838
test: /\.(j|t)sx?$/,
39-
loader: `ts-loader`,
39+
loader: require.resolve(`ts-loader`),
4040
exclude: /node_modules/,
4141
options: {
4242
configFile: options.tsConfig,

‎packages/react/plugins/webpack.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ function getWebpackConfig(config: Configuration) {
55
config.module.rules.push(
66
{
77
test: /\.(png|jpe?g|gif|webp)$/,
8-
loader: 'url-loader',
8+
loader: require.resolve('url-loader'),
99
options: {
1010
limit: 10000, // 10kB
1111
name: '[name].[hash:7].[ext]',
@@ -22,7 +22,7 @@ function getWebpackConfig(config: Configuration) {
2222
use: [
2323
'@svgr/webpack?-svgo,+titleProp,+ref![path]',
2424
{
25-
loader: 'url-loader',
25+
loader: require.resolve('url-loader'),
2626
options: {
2727
limit: 10000, // 10kB
2828
name: '[name].[hash:7].[ext]',
@@ -34,7 +34,7 @@ function getWebpackConfig(config: Configuration) {
3434
{
3535
use: [
3636
{
37-
loader: 'url-loader',
37+
loader: require.resolve('url-loader'),
3838
options: {
3939
limit: 10000, // 10kB
4040
name: '[name].[hash:7].[ext]',

‎packages/web/src/utils/config.spec.ts

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ describe('getBaseWebpackPartial', () => {
4949
);
5050
expect(rule).toBeTruthy();
5151

52-
expect(rule.loader).toEqual('babel-loader');
52+
expect(rule.loader).toContain('babel-loader');
5353
});
5454

5555
it('should split typescript type checking into a separate workers', () => {
@@ -165,17 +165,19 @@ describe('getBaseWebpackPartial', () => {
165165
const result = getBaseWebpackPartial(input, true);
166166

167167
expect(
168-
(result.module.rules.find((rule) => rule.loader === 'babel-loader')
169-
.options as any).envName
168+
(result.module.rules.find((rule) =>
169+
rule.loader.toString().includes('babel-loader')
170+
).options as any).envName
170171
).toMatch('modern');
171172
});
172173

173174
it('should not override preset-env target for es5', () => {
174175
const result = getBaseWebpackPartial(input, false);
175176

176177
expect(
177-
(result.module.rules.find((rule) => rule.loader === 'babel-loader')
178-
.options as any).envName
178+
(result.module.rules.find((rule) =>
179+
rule.loader.toString().includes('babel-loader')
180+
).options as any).envName
179181
).toMatch('legacy');
180182
});
181183
});

‎packages/web/src/utils/config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export function getBaseWebpackPartial(
4848
rules: [
4949
{
5050
test: /\.([jt])sx?$/,
51-
loader: `babel-loader`,
51+
loader: require.resolve(`babel-loader`),
5252
exclude: /node_modules/,
5353
options: {
5454
rootMode: 'upward',

‎packages/web/src/utils/third-party/cli-files/models/webpack-configs/common.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -316,7 +316,7 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
316316
sourceMapUseRule = {
317317
use: [
318318
{
319-
loader: 'source-map-loader',
319+
loader: require.resolve('source-map-loader'),
320320
},
321321
],
322322
};
@@ -490,7 +490,7 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
490490
rules: [
491491
{
492492
test: /\.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
493-
loader: 'file-loader',
493+
loader: require.resolve('file-loader'),
494494
options: {
495495
name: `[name]${hashFormat.file}.[ext]`,
496496
},

‎packages/web/src/utils/third-party/cli-files/models/webpack-configs/styles.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
146146
test: /\.scss$|\.sass$/,
147147
use: [
148148
{
149-
loader: 'sass-loader',
149+
loader: require.resolve('sass-loader'),
150150
options: {
151151
implementation: sassImplementation,
152152
sourceMap: cssSourceMap,
@@ -164,7 +164,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
164164
test: /\.less$/,
165165
use: [
166166
{
167-
loader: 'less-loader',
167+
loader: require.resolve('less-loader'),
168168
options: {
169169
sourceMap: cssSourceMap,
170170
javascriptEnabled: true,
@@ -177,7 +177,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
177177
test: /\.styl$/,
178178
use: [
179179
{
180-
loader: 'stylus-loader',
180+
loader: require.resolve('stylus-loader'),
181181
options: {
182182
sourceMap: cssSourceMap,
183183
paths: includePaths,
@@ -192,9 +192,9 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
192192
exclude: globalStylePaths,
193193
test,
194194
use: [
195-
{ loader: 'raw-loader' },
195+
{ loader: require.resolve('raw-loader') },
196196
{
197-
loader: 'postcss-loader',
197+
loader: require.resolve('postcss-loader'),
198198
options: {
199199
ident: 'embedded',
200200
plugins: postcssPluginCreator,
@@ -224,10 +224,10 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
224224
use: [
225225
buildOptions.extractCss
226226
? MiniCssExtractPlugin.loader
227-
: 'style-loader',
227+
: require.resolve('style-loader'),
228228
RawCssLoader,
229229
{
230-
loader: 'postcss-loader',
230+
loader: require.resolve('postcss-loader'),
231231
options: {
232232
ident: buildOptions.extractCss ? 'extracted' : 'embedded',
233233
plugins: postcssPluginCreator,

‎packages/web/src/utils/web.config.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ function getStylesPartial(
121121
loaderConfig.loader === 'raw-loader'
122122
) {
123123
return {
124-
loader: 'style-loader',
124+
loader: require.resolve('style-loader'),
125125
};
126126
}
127127
return loaderConfig;
@@ -138,10 +138,10 @@ function getStylesPartial(
138138
{
139139
loader: options.extractCss
140140
? MiniCssExtractPlugin.loader
141-
: 'style-loader',
141+
: require.resolve('style-loader'),
142142
},
143143
{
144-
loader: 'css-loader',
144+
loader: require.resolve('css-loader'),
145145
options: {
146146
modules: true,
147147
importLoaders: 1,
@@ -155,16 +155,16 @@ function getStylesPartial(
155155
{
156156
loader: options.extractCss
157157
? MiniCssExtractPlugin.loader
158-
: 'style-loader',
158+
: require.resolve('style-loader'),
159159
},
160160
{
161-
loader: 'css-loader',
161+
loader: require.resolve('css-loader'),
162162
options: {
163163
modules: true,
164164
importLoaders: 1,
165165
},
166166
},
167-
{ loader: 'sass-loader' },
167+
{ loader: require.resolve('sass-loader') },
168168
],
169169
},
170170
...rules,

0 commit comments

Comments
 (0)