Skip to content
This repository has been archived by the owner on Jun 21, 2023. It is now read-only.

Commit

Permalink
Allow user to override next-image-loader (vercel#26548)
Browse files Browse the repository at this point in the history
In PR vercel#26281, we solved one use case but broke another.

This PR will allow the user to [override the built-in loader](vercel#26281 (comment)) via custom webpack config.
  • Loading branch information
styfle committed Jun 23, 2021
1 parent 44cce28 commit 57dbfa3
Showing 1 changed file with 25 additions and 19 deletions.
44 changes: 25 additions & 19 deletions packages/next/build/webpack-config.ts
Expand Up @@ -1030,6 +1030,16 @@ export default async function getBaseWebpackConfig(
]
: defaultLoaders.babel,
},
...(!config.images.disableStaticImages && isWebpack5
? [
{
test: /\.(png|jpg|jpeg|gif|webp|ico|bmp|svg)$/i,
loader: 'next-image-loader',
issuer: { not: regexLikeCss },
dependency: { not: ['url'] },
},
]
: []),
].filter(Boolean),
},
plugins: [
Expand Down Expand Up @@ -1459,27 +1469,23 @@ export default async function getBaseWebpackConfig(
}

if (!config.images.disableStaticImages && isWebpack5) {
if (!webpackConfig.module) {
webpackConfig.module = { rules: [] }
}

const hasSvg = webpackConfig.module.rules.some(
const rules = webpackConfig.module?.rules || []
const hasCustomSvg = rules.some(
(rule) =>
'test' in rule && rule.test instanceof RegExp && rule.test.test('.svg')
rule.loader !== 'next-image-loader' &&
'test' in rule &&
rule.test instanceof RegExp &&
rule.test.test('.svg')
)

// Exclude svg if the user already defined it in custom
// webpack config such as `@svgr/webpack` plugin or
// the `babel-plugin-inline-react-svg` plugin.
webpackConfig.module.rules.push({
test: hasSvg
? /\.(png|jpg|jpeg|gif|webp|ico|bmp)$/i
: /\.(png|svg|jpg|jpeg|gif|webp|ico|bmp)$/i,
loader: 'next-image-loader',
dependency: { not: ['url'] },
// @ts-ignore
issuer: { not: regexLikeCss },
})
const nextImageRule = rules.find(
(rule) => rule.loader === 'next-image-loader'
)
if (hasCustomSvg && nextImageRule) {
// Exclude svg if the user already defined it in custom
// webpack config such as `@svgr/webpack` plugin or
// the `babel-plugin-inline-react-svg` plugin.
nextImageRule.test = /\.(png|jpg|jpeg|gif|webp|ico|bmp)$/i
}
}

if (
Expand Down

0 comments on commit 57dbfa3

Please sign in to comment.