[SOLVED] TypeError: Cannot read properties of undefined (reading 'call') on Next.js

TypeError: Cannot read properties of undefined (reading 'call') on Next.js

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_modules\next\dist\client\image.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_modules\next\dist\client\app-index.js (26:16)
requireModule
node_modules\next\dist\compiled\react-server-dom-webpack\client.js (142:0)
initializeModuleChunk
node_modules\next\dist\compiled\react-server-dom-webpack\client.js (427:0)
resolveModuleChunk
node_modules\next\dist\compiled\react-server-dom-webpack\client.js (385:0)
eval
node_modules\next\dist\compiled\react-server-dom-webpack\client.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

Solution

I finally have some time to continue this project and as @Abdelrhman kamal mentioned that the usage of next/image can be solved by installing next canary:

npm install next@canary

May be it is already fixed in the update released as I previously use next version of 13.0.7 and the canary one is 13.1.1.

Thanks