13

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

irwnd2
  • 151
  • 1
  • 1
  • 8

7 Answers7

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

Mukhilan Elangovan
  • 121
  • 4
4

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

EasyGem
  • 111
  • 3
  • 1
    This fixed my issue, for those who are looking how to to use new prop, here is a link https://nextjs.org/docs/advanced-features/compiler#module-transpilation – DedaDev Feb 13 '23 at 23:25
2

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

The-True-Hooha
  • 41
  • 4
2

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

irwnd2
  • 151
  • 1
  • 1
  • 8
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

Abdelrhman kamal
  • 19
  • 3
  • :/ but how will we use Image component then? – DoctorHe Dec 21 '22 at 15:53
  • 1
    at this point use (npm install next@canary) that will fix you issues – Abdelrhman kamal Dec 21 '22 at 21:36
  • 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](/help/how-to-answer). – Community Dec 23 '22 at 02:44
0

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

Lahiru Amarathunge
  • 701
  • 9
  • 14
0

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})

march
  • 1
  • 2