'Next/image fires error in console "The above error occurred in the <Image> component:", but there is no error above. Only safari
I tried to display an image from an external source in the next/image component in the Next.js framework with typescript.
import Image from "next/image";
import React from "react";
export const DetailCard: React.FC = () => {
const srcPath = 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Test.svg/620px-Test.svg.png';
return (
<div>
<Image src={srcPath} height={500} width={500} />
</div>
);
};
Everything works on both Chrome and Firefox on Windows, Linux and MacOS. But if the site is running on Safari and Chrome (Firefox not tested) on iOS, or Safari on MacOS, the Image component fires the following error while running localy yarn next dev -p 4000
:
The above error occurred in the <Image> component:
Image
div
DetailCard
NavLayout
ApolloProvider
MyApp
PureComponent
ReactDevOverlay
_classCallCheck
AppContainer
Root
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
The problem is that this error is hard to debug when no error has appeared at the top. The standard fatal ErrorBoundary from Next.js was rendered, but without specifying the error, it became a non-interactive black page.
I have defined the image domain v next.config.js
:
/** @type {import('next').NextConfig} */
module.exports = {
reactStrictMode: true,
webpack(config, options) {
config.module.rules.push({
test: /\.graphql$/,
exclude: /node_modules/,
use: [options.defaultLoaders.babel, { loader: 'graphql-let/loader' }],
})
config.module.rules.push({
test: /\.graphqls$/,
exclude: /node_modules/,
use: ['graphql-let/schema/loader'],
})
config.module.rules.push({
test: /\.ya?ml$/,
type: 'json',
use: 'yaml-loader',
})
return config
},
images: {
domains: [
'upload.wikimedia.org'
]
}
Software versions:
"next": "^12.1.0" ("12.0.1" also tested)
"react": "17.0.2"
"typescript": "^4.5.4"
iOS: 12.5.5
iPad Safari: 12
MacOS: Sierra 10.12.6
MacBook Safari: 12.1.2
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|