10

我使用 Vercel 创建了一个 next.js 应用程序，然后使用以下命令行安装了 chakra-ui：

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

它导致了以下错误：

TypeError: Object.fromEntries is not a function
    at inner (/Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/utils/dist/cjs/walk-object.js:21:21)
    at /Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/utils/dist/cjs/walk-object.js:24:22
    at Array.map (<anonymous>)
    at inner (/Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/utils/dist/cjs/walk-object.js:21:55)
    at /Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/utils/dist/cjs/walk-object.js:24:22
    at Array.map (<anonymous>)
    at inner (/Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/utils/dist/cjs/walk-object.js:21:55)
    at walkObject (/Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/utils/dist/cjs/walk-object.js:31:10)
    at createThemeVars (/Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/styled-system/dist/cjs/create-theme-vars/create-theme-vars.js:19:25)
    at toCSSVar (/Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/styled-system/dist/cjs/create-theme-vars/to-css-var.js:28:64)

我尝试修改节点模块......这些是我的依赖项：

"dependencies": {
    "@chakra-ui/react": "^1.6.1",
    "@emotion/react": "^11.4.0",
    "@emotion/styled": "^11.3.0",
    "@types/react": "^17.0.5",
    "framer-motion": "^4.1.16",
    "next": "10.2.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "typescript": "^4.2.4"
  }

这是我的 pages/_app.tsx 文件：

import '../styles/globals.css'
import { ChakraProvider } from "@chakra-ui/react"

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

我将 index.tsx 保留为默认值：

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{' '}
          <code className={styles.code}>pages/index.js</code>
        </p>

        <div className={styles.grid}>
          <a href="https://nextjs.org/docs" className={styles.card}>
            <h2>Documentation &rarr;</h2>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>

          <a href="https://nextjs.org/learn" className={styles.card}>
            <h2>Learn &rarr;</h2>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>

          <a
            href="https://github.com/vercel/next.js/tree/master/examples"
            className={styles.card}
          >
            <h2>Examples &rarr;</h2>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>

          <a
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
          >
            <h2>Deploy &rarr;</h2>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
          </a>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  )
}

有谁知道我可以如何解决这个错误？

4

3 回答 3

17

我必须更新我的节点版本，它是 v10.17.0。我将它更新到 v14.17.0！

于 2021-05-15T20:53:23.330 回答
10

是的，我在这个案例中遇到了麻烦，我通过将节点版本从 v10 更新到 v14 来解决它，并且运行顺利。

您可以使用带有nvm的快速命令：

nvm install v14

如果可用：

nvm use 14

也希望你！

于 2021-05-25T05:45:50.450 回答
5

检查您的 Node.js 是否低于 v12.0.0 版本。如果是，Object.fromEntries() 则不支持。

选项 #1：升级到高于 12.0.0 版本的 Node JS 版本。

选项 #2：不要调用Object.fromEntries()这样的 ponyfill/polyfill，它只有 6 行长：https ://github.com/feross/fromentries/blob/master/index.js （感谢原作者）

于 2021-08-23T11:30:10.980 回答