NextJS - 无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用答案

【问题标题】：NextJS - Invalid hook call. Hooks can only be called inside of the body of a function componentNextJS - 无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用
【发布时间】：2019-08-25 14:45:38
【问题描述】：

我在尝试使用 NextJS 构建时遇到此错误。我不使用样式组件。我尝试删除 node_modules 等，但没有运气。我尝试在我的 next.config.js 文件和 package.json 中添加别名并解析 react，但没有成功。我正在使用 react 16.8.6、react-dom 16.8.6 和下一个 9.0.4。 npm ls 说每个只有一个。该应用程序使用material-ui。我没有使用任何 npm 链接。我在没有任何钩子的version 和只有功能组件和钩子的version 中得到了错误。

repo 在这里：https://github.com/dancancro/questions/tree/convert-to-function-component

代码沙盒在这里：https://codesandbox.io/s/stop-indoctrination-5xfpi

错误在这里：https://gist.github.com/dancancro/2dfafb053aaaedfade406fd4f67eb68a 渲染 -> renderToString -> ReactDOMServerRenderer.read -> ReactDOMServerRenderer.render -> Object.WithStyles [作为渲染] ...

有问题的钩子是在 withStyles 函数中此文件的第 17428 行上的 useStyles() 调用。搜索“var classes = useStyles(props)”。问题在于 nextjs 生成的代码。我写的代码没有使用withStyles或任何以“use*”开头的钩子或任何函数

https://raw.githubusercontent.com/dancancro/questions/invalid-hook-call/.next/static/development/pages/index.js

【问题讨论】：

标签： reactjs material-ui next.js

【解决方案1】：

从 next.config.js 中删除它解决了这个问题。

    webpack: config => {
        config.externals = [
            '/'
        ]
        return config
    },

【讨论】：