javascript - Issue with 'styled-component': Error: Invalid hook call - Stack Overflow

admin管理员组

文章数量:1287650

I am working through a tutorial where they are using a styled-ponent. 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-ponents';
import Movie from './Movie';

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

  async ponentDidMount() {
    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;
`;

I am working through a tutorial where they are using a styled-ponent. 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-ponents';
import Movie from './Movie';

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

  async ponentDidMount() {
    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;
`;

• javascript
• reactjs
• react-hooks
• styled-ponents

Share Improve this question Follow edited Feb 6, 2020 at 8:12 skyboyer 23.8k77 gold badges6262 silver badges7171 bronze badges asked Feb 6, 2020 at 4:43 AvidDabblerAvidDabbler 63188 silver badges2020 bronze badges 2

• Can you move assignment const MovieGrid to before the class and try? – Siva Kondapi Venkata Commented Feb 6, 2020 at 4:49
• I have moved const MovieGrid just below the import statements and still getting the same error message – AvidDabbler Commented Feb 6, 2020 at 16:43

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 8

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-ponents./docs/faqs#how-can-i-fix-issues-when-using-npm-link-or-yarn-link

https://styled-ponents./docs/faqs#i-am-a-library-author-should-i-bundle-styledponents-with-my-library

https://webpack.js/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 ponents

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

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

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

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

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;
`;

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

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

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

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-ponent 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-ponents

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

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.

本文标签： javascriptIssue with 39styledcomponent39 Error Invalid hook callStack Overflow