147
rated 0 times
[
152]
[
5]
/ answers: 1 / hits: 10190
/ 1 Year ago, sat, december 17, 2022, 12:00:00
I'm pretty new to Next.js and Typescript. I wanna build a project using next.js and typescript and tailwind CSS using this simple create app command:
npx create-next-app -e with-tailwindcss my-project
Everything just went fine until I wanted to use the Image tag using next/image and got an error
Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'call')
Call Stack
options.factory
file:///C:/Users/irwan/Projects/messenger-clone/meta-messenger/.next/static/chunks/webpack.js (710:31)
__webpack_require__
/_next/static/chunks/webpack.js (37:33)
fn
file:///C:/Users/irwan/Projects/messenger-clone/meta-messenger/.next/static/chunks/webpack.js (365:21)
require
node_modulesnextdistclientimage.js (7:15)
./node_modules/next/dist/client/image.js
file:///C:/Users/irwan/Projects/messenger-clone/meta-messenger/.next/static/chunks/app/layout.js (39:1)
options.factory
/_next/static/chunks/webpack.js (710:31)
__webpack_require__
file:///C:/Users/irwan/Projects/messenger-clone/meta-messenger/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (365:21)
__webpack_require__
node_modulesnextdistclientapp-index.js (26:16)
requireModule
node_modulesnextdistcompiledreact-server-dom-webpackclient.js (142:0)
initializeModuleChunk
node_modulesnextdistcompiledreact-server-dom-webpackclient.js (427:0)
resolveModuleChunk
node_modulesnextdistcompiledreact-server-dom-webpackclient.js (385:0)
eval
node_modulesnextdistcompiledreact-server-dom-webpackclient.js (668:0)
I'm sure the error is not about the URL as I already added the domain to be whitelisted in my next.config.js file.
Here is my package JSON file:
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "^13.0.7",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"@types/node": "18.11.3",
"@types/react": "18.0.21",
"@types/react-dom": "18.0.6",
"autoprefixer": "^10.4.12",
"postcss": "^8.4.18",
"tailwindcss": "^3.2.1",
"typescript": "^4.8.4"
}
}
Last I'm using the beta feature(?) appDir on next.js 13. Here is my next.config.js file:
reactStrictMode: true,
images: {
domains: ['i.ibb.co']
},
experimental: {
appDir: true
}
I'm using the image tag on my Header.tsx component. Here is my Header.tsx
import Image from "next/image";
import React from "react";
function Header() {
const url = "https://i.ibb.co/LhMfkJw/logo-Meta.png";
return (
<header>
<div>
<div>
<Image src={url} alt="Logo" width={50} height={10} />
</div>
</div>
</header>
);
}
export default Header;
And then use that header on my layout.tsx component:
import "../styles/globals.css";
import Header from "./Header";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<head />
<body>
<Header />
{children}
</body>
</html>
);
}
Thanks for the reply
More From » reactjs
