堆栈内存溢出
  简体   繁体   English

类型错误：无法读取 Next.js 上未定义的属性（读取“调用”）

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

 原文  2022-12-17 06:43:19  8   5    javascript/ reactjs/ typescript/ 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我对 Next.js 和 Typescript 很陌生。我想使用 next.js 和 typescript 和顺风 CSS 使用这个简单的创建应用程序命令构建一个项目：npx 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一切都很顺利，直到我想使用 next/image 使用 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)

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.我确定错误与 URL 无关，因为我已经在我的 next.config.js 文件中添加了要列入白名单的域。

Here is my package JSON file:这是我的 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"
  }
}

Last I'm using the beta feature(?) appDir on next.js 13. Here is my next.config.js file:最后我在 next.js 13 上使用测试版功能（？）appDir。这是我的 next.config.js 文件：

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

I'm using the image tag on my Header.tsx component.我在我的 Header.tsx 组件上使用图像标签。 Here is my 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;

And then use that header on my layout.tsx component:然后在我的 layout.tsx 组件上使用 header：

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谢谢回复

5 个解决方案

解决方案1
 3  2022-12-17 13:45:39

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我也遇到了同样的问题，请将您的下一个版本更改为 13.0.6 并等到我们都获得 13.0.8 或更高版本，这是版本 13.0.7 中的问题

解决方案2
 0  2022-12-21 12:47:38

go to page.tsx or page.js and delete all Image components and everything will work fine Edit#1 Use this command;转到 page.tsx 或 page.js 并删除所有图像组件，一切都会正常工作 Edit#1 使用此命令； 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它将解决这个问题： npm install next@canary next@canary 是一个 next.js 包，它在进入 next.js 版本之前修复了问题和问题

解决方案3
 0  2022-12-22 11:32:46

I'm not sure exactly what causes this, but doing an npm install next@canary solved this issue for me我不确定到底是什么原因造成的，但是执行npm install next@canary为我解决了这个问题

解决方案4
 0  2023-01-01 05:48:23

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:我终于有时间继续这个项目了，正如@Abdelrhman kamal 提到的，next/image 的使用可以通过安装 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.可能它已经在发布的更新中得到修复，因为我之前使用的是 13.0.7 的下一版本，而金丝雀版本是 13.1.1。

Thanks谢谢

解决方案5
 0  2023-01-05 13:13:09

For those using next-transpile-modules — use transpilePackages option instead.对于那些使用next-transpile-modules ——改用transpilePackages选项。 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 npm页面说这个package内置在next 13.1 https://www.npmjs.com/package/next-transpile-modules

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Next.js | TypeError：无法读取未定义的属性（读取“秘密”） - Next.js | TypeError: Cannot read properties of undefined (reading 'secret') 未处理的运行时错误类型错误：当我尝试使用 next.js 的图像组件时无法读取未定义的属性（读取“调用”） - Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'call') when I try to use the Image component of next.js Mongoose 和 Next.js：未处理的运行时错误 TypeError：无法读取未定义的属性（读取“令牌”） - Mongoose and Next.js: Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'Token') TypeError：无法读取 Next.js 中 null 的属性（读取“默认”） - TypeError: Cannot read properties of null (reading 'default') in Next.js Next.js &amp; Firebase -&gt; TypeError：无法读取未定义的属性（读取“应用程序”） - Next.js & Firebase -> TypeError: Cannot read properties of undefined (reading 'apps') Next.js - 类型错误：无法读取 null 的属性（读取“useMemo”） - Next.js - TypeError: Cannot read properties of null (reading 'useMemo') Next.js：无法读取未定义的属性（读取“indexOf”） - Next.js: Cannot read properties of undefined (reading 'indexOf') Next.js 错误：无法读取未定义的属性（读取“集合”） - Next.js Error: Cannot read properties of undefined (reading 'collection') Next.js 错误：无法读取未定义的属性（读取“调用”），try/catch 不起作用 onClick？ - Next.js Error: Cannot read properties of undefined (reading 'call'), try/catch won't work onClick? TypeError：无法读取 next.js 链接中 null 的属性（读取“推送”） - TypeError: Cannot read properties of null (reading 'push') in next.js Link
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM