Improve error message on next/future/image
when objectFit
or objectPosition
(#39614)
Improve PR improves the error message on `next/future/image` when `objectFit` or `objectPosition` is provided and suggests using `style` instead. It also prints the stack trace so its clear where the error came from.
This commit is contained in:
parent
7e9f9bfbef
commit
3d0d09002a
3 changed files with 56 additions and 14 deletions
|
@ -359,7 +359,10 @@ const ImageElement = ({
|
|||
style={{ ...imgStyle, ...blurStyle }}
|
||||
ref={useCallback(
|
||||
(img: ImgElementWithDataProp | null) => {
|
||||
if (img && onError) {
|
||||
if (!img) {
|
||||
return
|
||||
}
|
||||
if (onError) {
|
||||
// If the image has an error before react hydrates, then the error is lost.
|
||||
// The workaround is to wait until the image is mounted which is after hydration,
|
||||
// then we set the src again to trigger the error handler (if there was an error).
|
||||
|
@ -367,11 +370,29 @@ const ImageElement = ({
|
|||
img.src = img.src
|
||||
}
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
if (img && !srcString) {
|
||||
if (!srcString) {
|
||||
console.error(`Image is missing required "src" property:`, img)
|
||||
}
|
||||
if (
|
||||
img.getAttribute('objectFit') ||
|
||||
img.getAttribute('objectfit')
|
||||
) {
|
||||
console.error(
|
||||
`Image has unknown prop "objectFit". Did you mean to use the "style" prop instead?`,
|
||||
img
|
||||
)
|
||||
}
|
||||
if (img?.complete) {
|
||||
if (
|
||||
img.getAttribute('objectPosition') ||
|
||||
img.getAttribute('objectposition')
|
||||
) {
|
||||
console.error(
|
||||
`Image has unknown prop "objectPosition". Did you mean to use the "style" prop instead?`,
|
||||
img
|
||||
)
|
||||
}
|
||||
}
|
||||
if (img.complete) {
|
||||
handleLoading(
|
||||
img,
|
||||
srcString,
|
||||
|
@ -666,17 +687,6 @@ export default function Image({
|
|||
)
|
||||
}
|
||||
|
||||
if ('objectFit' in rest) {
|
||||
throw new Error(
|
||||
`Image with src "${src}" has unknown prop "objectFit". This style should be specified using the "style" property.`
|
||||
)
|
||||
}
|
||||
if ('objectPosition' in rest) {
|
||||
throw new Error(
|
||||
`Image with src "${src}" has unknown prop "objectPosition". This style should be specified using the "style" property.`
|
||||
)
|
||||
}
|
||||
|
||||
if (placeholder === 'blur') {
|
||||
if ((widthInt || 0) * (heightInt || 0) < 1600) {
|
||||
warnOnce(
|
||||
|
|
|
@ -0,0 +1,18 @@
|
|||
import React from 'react'
|
||||
import Image from 'next/future/image'
|
||||
|
||||
const Page = () => {
|
||||
return (
|
||||
<div>
|
||||
<Image
|
||||
src="/test.jpg"
|
||||
width="400"
|
||||
height="400"
|
||||
objectFit="contain"
|
||||
objectPosition="20% 20%"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Page
|
|
@ -858,6 +858,20 @@ function runTests(mode) {
|
|||
)
|
||||
expect(warnings.length).toBe(1)
|
||||
})
|
||||
|
||||
it('should show console error for objectFit and objectPosition', async () => {
|
||||
const browser = await webdriver(appPort, '/invalid-objectfit')
|
||||
|
||||
expect(await hasRedbox(browser)).toBe(false)
|
||||
|
||||
await check(async () => {
|
||||
return (await browser.log()).map((log) => log.message).join('\n')
|
||||
}, /Image has unknown prop "objectFit"/gm)
|
||||
|
||||
await check(async () => {
|
||||
return (await browser.log()).map((log) => log.message).join('\n')
|
||||
}, /Image has unknown prop "objectPosition"/gm)
|
||||
})
|
||||
} else {
|
||||
//server-only tests
|
||||
it('should not create an image folder in server/chunks', async () => {
|
||||
|
|
Loading…
Reference in a new issue