无法使用钩子编译 Next.js 项目答案

【问题标题】：Cannot compile Next.js project with hooks无法使用钩子编译 Next.js 项目
【发布时间】：2020-04-01 17:20:02
【问题描述】：

我创建了一个非常简单的 Next.js 项目，它只包含一个页面，index.js，看起来像：

import React, { useState } from 'react';

const MyComponent = () => {
    const [instance, setInstance] = useState()

    return (
        <></>
    );
};

const Home = () => <>
        <MyComponent />
</>;

export default Home;

当我在开发模式下运行它时，没有错误，一切正常。

但是当我运行next build 时，我得到：

Error occurred prerendering page "/": Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
> Build error occurred

看起来钩子有问题，但我不明白我的实现有什么问题。如果我删除const [instance, setInstance] = useState()这一行，则构建成功。

我正在使用 next ^9.1.4，react ^16.12.0 和 react-dom ^16.12.0。

你能帮我解决这个问题吗？ :)

【问题讨论】：

标签： reactjs react-hooks next.js

【解决方案1】：

我只是将你的代码复制到 pages/index.js 并运行 npm run build（其中有 next build，它可以工作。

下一个 9.1.4 反应，反应域 16.12.0

我最好的猜测...您在全球范围内还有另一个下一个安装？和next build 使用下一个代替？

或者它可能是你安装的库，你的 package.json 中有什么包？

【讨论】：

感谢您的帮助。当我在命令行中运行next -v 时，我得到：Next.js v9.1.4。在我的 package.json 中有："next": "^9.1.4"。所以看起来版本是匹配的......
ok hmmm....那么我的第二个猜测是...隐藏的字符，你看不到。
我喜欢这个主意，但不幸的是，在删除错误行并手动重新输入后，它仍然不起作用:(
老兄，我快没油了，大声笑 :D 尝试复制您的代码并放入代码沙箱？
天啊，当我运行npm run build 时，它也能正常工作！但不适用于next build，即使“构建”只是 package.json 中的“下一个构建”。我将您的答案标记为已接受，因为它帮助我找到了解决方案，即使我不明白下一个版本的问题。