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

Question

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

Hi, welcome to Stack Overflow. Please include all the relevant code so we can assist you. Where are you using the Image component? — ivanatias
– ivanatias, Commented Dec 17, 2022 at 6:47
Hi @ivanatias, thanks for the reply. I'm adding relevant detail now on my thread. — irwnd2
– irwnd2, Commented Dec 17, 2022 at 7:20
Could you try to download the image and use the downloaded image instead of a link? — Likepineapple
– Likepineapple, Commented Dec 17, 2022 at 9:55
Hi. @Likepineapple I did try but it still threw the same error. — irwnd2
– irwnd2, Commented Dec 17, 2022 at 10:08

Maurici Abad · Accepted Answer · 2024-02-22 10:22:32Z

16

Remove all the service workers.

DevTools > Application > Storage > Clear site data

edited Feb 22, 2024 at 10:22

answered Feb 4, 2024 at 23:52

Maurici Abad

1,83018 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

redbmk Over a year ago

Could you explain this a bit more? Why does this fix it? I wouldn't expect users to do this normally... is this something that only happens in dev?

Mukhilan Elangovan · Accepted Answer · 2022-12-17 13:45:39Z

10

I also had this same problem please change ur next version to 13.0.6 and wait until we all get 13.0.8 or greater than that it is a problem in version 13.0.7

answered Dec 17, 2022 at 13:45

Mukhilan Elangovan

1475 bronze badges

7 Comments

NeuTronas Over a year ago

Still having this issue with version 13.0.6

Mukhilan Elangovan Over a year ago

please delete your .next folder and node_modules folder and run npm i and try again @NeuTronas

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Swiss bobo Over a year ago

This comment is True. i reverted back from 13.0.7 to 13.0.6 and that same error was gone.

olivierr91 Over a year ago

I also have this issue with version 14.0.3

|

EasyGem · Accepted Answer · 2023-01-05 13:13:09Z

7

For those using next-transpile-modules — use transpilePackages option instead. This will resolve the issue for you.

The npm page says that this package is built-in in next 13.1 https://www.npmjs.com/package/next-transpile-modules

answered Jan 5, 2023 at 13:13

EasyGem

1514 bronze badges

3 Comments

DedaDev Over a year ago

This fixed my issue, for those who are looking how to to use new prop, here is a link nextjs.org/docs/advanced-features/compiler#module-transpilation

Ian Sebastian Over a year ago

this also fixed my isssue, which in my case was showing TypeError: Cannot read properties of undefined (reading 'and')

Bobadevv Over a year ago

Plus 1 this also helped me fix TypeError: Cannot read properties of undefined (reading 'and') thanks!

The-True-Hooha · Accepted Answer · 2022-12-22 11:32:46Z

3

I'm not sure exactly what causes this, but doing an npm install next@canary solved this issue for me

answered Dec 22, 2022 at 11:32

The-True-Hooha

1195 bronze badges

1 Comment

irwnd2 Over a year ago

Thankss, will be trying it.

Abdelrhman kamal · Accepted Answer · 2022-12-21 21:38:02Z

1

go to page.tsx or page.js and delete all Image components and everything will work fine Edit#1 Use this command; it will fix that issue: npm install next@canary next@canary is a next.js package that fixes issues and problems before moving on to the next.js version

edited Dec 21, 2022 at 21:38

answered Dec 21, 2022 at 12:47

Abdelrhman kamal

493 bronze badges

3 Comments

DoctorHe Over a year ago

:/ but how will we use Image component then?

Abdelrhman kamal Over a year ago

at this point use (npm install next@canary) that will fix you issues

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

irwnd2 · Accepted Answer · 2023-01-01 05:48:23Z

1

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

answered Jan 1, 2023 at 5:48

irwnd2

3291 gold badge2 silver badges9 bronze badges

Comments

march · Accepted Answer · 2023-04-11 14:54:36Z

1

This might be an issue with the internal SSR (server and client components) of Next 13. Try changing your client component from import to const Components = dynamic(() => import("."), {ssr: false})

answered Apr 11, 2023 at 14:54

march

113 bronze badges

Comments

Graham · Accepted Answer · 2025-01-29 07:19:42Z

I think this problem will have various triggers and various solutions, but this is one solution for one context: intercepting routes.

The issue exists in Next.js 15 (every version I've tested) and React 19 (every version I've tested), and likely earlier versions, when bundled with Webpack (the default in dev, and only option when hosted on Vercel, at the time of writing). The problem does not exist when bundled with Turbopack (next dev --turbo) but that's not helpful if deploying to Vercel, until Turbopack is deemed stable for production.

You won't see the problem with this directory structure:

@modal
 - (.)dirName
   - page.tsx
 - error.tsx
 - loading.tsx

But, you will see the issue as soon as you try to intercept a route at a higher level (note .. instead of .):

@modal
 - (..)dirName
   - page.tsx
 - error.tsx
 - loading.tsx

The bug is actually triggered by the special files. Moving them into the intercept directory fixes the issue.

@modal
 - (..)dirName
   - page.tsx
   - error.tsx
   - loading.tsx

Lahiru Amarathunge · Accepted Answer · 2023-03-22 04:12:59Z

-1

I am not sure what the exact updates are. but yarn add next@canary or npm install next@canary worked for me. More information:

https://github.com/vercel/next.js/blob/canary/docs/upgrading.md

answered Mar 22, 2023 at 4:12

Lahiru Amarathunge

8191 gold badge12 silver badges20 bronze badges

Comments

netrolite · Accepted Answer · 2024-03-30 14:53:50Z

-1

I solved this by changing my dev start command from next dev to next dev --turbo. Note that this only works on Next.js 14

Edit: this happened again and I was able to resolve the issue by unregistering the service worker I had on my website through the chrome devtools and then hard reloading the page.

edited Mar 30, 2024 at 14:53

answered Feb 4, 2024 at 15:57

netrolite

3,5204 gold badges12 silver badges27 bronze badges

Collectives™ on Stack Overflow

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

10 Answers 10

1 Comment

7 Comments

3 Comments

1 Comment

3 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

1 Comment

7 Comments

3 Comments

1 Comment

3 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related