书签

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

回答 5 浏览 2878 2022-12-17

我对Next.js和Typescript很陌生。我想用Next.js和Typescript以及tailwind CSS建立一个项目，使用这个简单的创建应用命令：npx create-next-app -e with-tailwindcss my-project

一切都很顺利，直到我想用next/image来使用图像标签时，出现了一个错误

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)

我确信这个错误不是关于URL的，因为我已经在next.config.js文件中添加了要被白名单的域名。

这里是我的package JSON文件：

{
  "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"
  }
}

最后，我在 next.js 13 上使用 beta 功能（？）appDir。这是我的 next.config.js 文件：

reactStrictMode: true,
  images: {
    domains: ['i.ibb.co']
  },
  experimental: {
    appDir: true
  }

我在我的Header.tsx组件上使用图像标签。这里是我的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;

然后在我的layout.tsx组件上使用该头像。

import "../styles/globals.css";
import Header from "./Header";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <head />
      <body>
        <Header />
        {children}
      </body>
    </html>
  );
}

谢谢你的答复

irwnd2 提问于2022-12-17
你好，欢迎来到Stack Overflow。请包括所有相关的代码，以便我们能够帮助你。你在哪里使用Image组件？ - ivanatias 2022-12-17
嗨，@ivanatias，谢谢你的回答。我现在在我的主题上添加了相关细节。 - irwnd2 2022-12-17
你能不能试着下载图片，并使用下载的图片，而不是链接？ - Likepineapple 2022-12-17
你好。@Likepineapple 我试过了，但还是出现了同样的错误。 - irwnd2 2022-12-17
你能用这些代码创建一个GitHub repo吗？ - Likepineapple 2022-12-17
5 个回答
#1楼
得票数 7

我也有同样的问题，请把你的下一个版本改为13.0.6，并等到我们都得到13.0.8或更大的版本，这是一个13.0.7版本的问题。

Mukhilan Elangovan 提问于2022-12-17
在13.0.6版本中仍然有这个问题 - NeuTronas 2022-12-17
请删除你的.next文件夹和node_modules文件夹，并运行npm i，然后再试一次 @NeuTronas - Mukhilan Elangovan 2022-12-18
您的答案可以通过其他支持信息得到改进。请编辑以添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。您可以在帮助中心找到更多关于如何写出好的答案的信息。 - Community 2022-12-19
这个评论是真实的。我从13.0.7恢复到13.0.6，同样的错误就没有了。 - Swiss bobo 2022-12-21
我在13.1.0版本中遇到了这个问题。:/ - Data Mastery 2022-12-23
#2楼 已采纳
得票数 1

对于那些使用next-transpile-modules的人--使用transpilePackages选项代替。这将为你解决这个问题。

npm页面上说，这个包是内置在下一个13.1中的https://www.npmjs.com/package/next-transpile-modules。

EasyGem 提问于2023-01-05
#3楼
得票数 1

转到page.tsx或page.js，删除所有Image组件，一切都会正常工作 编辑#1 使用这个命令，它将解决这个问题： npm install next@canary next@canary是一个next.js包，在转到next.js版本之前修复了一些问题和麻烦。

Abdelrhman kamal 提问于2022-12-21
Abdelrhman kamal 修改于2022-12-21
:/ 但我们将如何使用图像组件呢？ - DoctorHe 2022-12-21
在这一点上，使用（npm install next@canary）可以解决你的问题。 - Abdelrhman kamal 2022-12-21
您的答案可以通过其他支持信息得到改进。请编辑以添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。您可以在帮助中心找到更多关于如何写出好的答案的信息。 - Community 2022-12-23
#4楼
得票数 1

我不确定到底是什么原因造成的，但做了一个npm install next@canary，就解决了我的这个问题。

The-True-Hooha 提问于2022-12-22
谢谢你，我将会尝试一下。 - irwnd2 2022-12-27
#5楼
得票数 0

我终于有时间继续这个项目了，正如@Abdelrhman kamal所提到的，Next/image的使用可以通过安装Next canary来解决。

npm install next@canary

可能在发布的更新中已经修复了，因为我之前使用的是13.0.7的下一个版本，而canary的版本是13.1.1。

谢谢你

irwnd2 提问于2023-01-01
标签
javascript reactjs typescript next.js