CODEWITHSUNDEEP
reactjsmaterial-uinext.js
Dan Cancro
Dan Cancro

Reputation: 1461

NextJS - Invalid hook call. Hooks can only be called inside of the body of a function component

I'm getting this error when trying to build with NextJS. I don't use styled-components. I tried deleting node_modules etc. without luck. I tried adding aliases and resolves for react in my next.config.js file and package.json without luck. I'm using react 16.8.6, react-dom 16.8.6, and next 9.0.4. npm ls says there's only one of each. The app uses material-ui. I am not using any npm links. I got the error in a version without any hooks and in a version with only functional components and hooks.

The repo is here: https://github.com/dancancro/questions/tree/convert-to-function-component

Codesandbox is here: https://codesandbox.io/s/stop-indoctrination-5xfpi

The error is here: https://gist.github.com/dancancro/2dfafb053aaaedfade406fd4f67eb68a render -> renderToString -> ReactDOMServerRenderer.read -> ReactDOMServerRenderer.render -> Object.WithStyles [as render] ...

The offending hook is a useStyles() call on line 17428 of this file in a withStyles function. Search for "var classes = useStyles(props)". The problem is with nextjs-generated code. The code I wrote doesn't use withStyles or any hooks or any functions that start with "use*"

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

Upvotes: 1

Views: 3130

Answers (1)

Dan Cancro
Dan Cancro

Reputation: 1461

Removing this from next.config.js solved the problem.

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

Upvotes: 0

Related Questions