Issue with 'styled-component': Error: Invalid hook call

Question

I am working through a tutorial where they are using a styled-component. The style is being assigned in the js file after the render and I am getting the Invalid hook call. This is my first react tutorial so I am struggling to just google the answer. Below is the code that I am running. The error only pops up when I call <MovieGrid>. Any help would be appreciated

/* eslint react/no-did-mount-set-state: 0 */
import React, { Component } from 'react';
import styled from 'styled-components';
import Movie from './Movie';

class MoviesList extends Component {
  state = {
    movies: [],
  }

  async componentDidMount() {
    try {
      const res = await fetch('url');
      const movies = await res.json();
      this.setState({
        movies: movies.results,
      });
    } catch (e) {
      console.log(e);
    }
  }

  render() {
    return (
      <MovieGrid>
        {this.state.movies.map(movie => <Movie key={movie.id} movie={movie} />)}
      </MovieGrid>
    );
  }
}

export default MoviesList;

const MovieGrid = styled.div`
  display: grid;
  padding: 1rem;
  grid-template-columns: repeat(6, 1fr);
  grid-row-gap: 1rem;
`;

Demosthenes

Can you move assignment const MovieGrid to before the class and try? – Asphaltite

I have moved const MovieGrid just below the import statements and still getting the same error message – Demosthenes

Answer 1

Are you writing this as a third party package ? to be consumed by other packages.

If yes , then

do go through these links.

https://styled-components.com/docs/faqs#how-can-i-fix-issues-when-using-npm-link-or-yarn-link

https://styled-components.com/docs/faqs#i-am-a-library-author-should-i-bundle-styledcomponents-with-my-library

https://webpack.js.org/guides/author-libraries/

https://robkendal.co.uk/blog/2019-12-22-solving-react-hooks-invalid-hook-call-warning/

Was helpful in understanding the over all pictures

In my case, the problem was with redundant React and Styled components

So, i npm linked both react and styled-component from by widget library to the consumer package.

Considering both and are in the same folder, then from add links to react and styled components

npm link ../<consmer-package>/node_modules/react

npm link ../<consmer-package>/node_modules/styled-components

Dysphemia

Useful links, thanks – Cockaigne

Thanks. You saved my days. I fixed this by adding externals for the webpack config of shared library externals: { react: "commonjs react", }, – Lepage

Answer 2

So the issue ended up being in another file. I was attempting to import Movie, but I was unaware that variables will not export by default so I ended up adding export before declaring and that solved the issue.

export const Poster = styled.img`
  box-shadow: 0 0 35px black;
`;

Demosthenes

Answer 3

If anyone is using Next.js v12 with styled-components here is what worked for me:

I was having the "Invalid hook call" with styled-components v5.1.1 and up with Next.js v12.

The solution was to temporarily downgrade styled-components to v5.0.0 and the error was gone!

Putrefy

What do you mean by "temporarily"? Was it possible to restore SC version to the original one afterwards? I'm asking because some of my components use features that are only present in 5.1.0+ and I'm getting this error now. – Almeria

@AlexanderChudesnov I mean until the officially fix the issue. – Putrefy

We had the 'Invalid hook call' warning when using styled-components: 5.3.0 with next: 13.2.3. This got resolved after upgrading syled-components to 5.3.8. – Extraterrestrial

Answer 4

I have tried most of the solution but didn't worked for me, so I have done some debugging and found a solution.

Failed: Tried to link styled-component and react. but won't help because when you will link one package other linked package will be removed.

npm link ../<consmer-package>/node_modules/react
 
npm link ../<consmer-package>/node_modules/styled-components

Worked Link the consumer-package as well as all the peer dependency and run in one single command.

npm link ../<consmer-package> ../<consmer-package>/node_modules/peerDependency-1 ../<consmer-package>/node_modules/peerDependency-2 ../<consmer-package>/node_modules/peerDependency-n

Note:

1. consmer-package is your library name
2. peerDependency-1, peerDependency-2, peerDependency-n is name of peer dependency used by library.

Tennant