styled-components: Styled-components version 5+ causes invalid hook call errors when trying to import styled-components based package

Environment

System:

  • OS: macOS 10.15.2
  • CPU: (12) x64 Intel® Core™ i7-8750H CPU @ 2.20GHz
  • Memory: 231.07 MB / 16.00 GB
  • Shell: 5.7.1 - /bin/zsh

Binaries:

  • Node: 10.15.3 - /usr/local/bin/node
  • Yarn: 1.21.1 - /usr/local/bin/yarn
  • npm: 6.9.0 - ~/.npm-packages/bin/npm
  • Watchman: 4.9.0 - /usr/local/bin/watchman

npmPackages:

  • babel-plugin-styled-components: ^1.10.7 => 1.10.7
  • styled-components: ^5.0.1 => 5.0.1

Description

I am trying to create an UI-kit like npm package using react and styled-components. For some weird reason starting from version 5.0.0 When I import the simplest package I get a react hook error. The same code works fine as an import in different package with styled-components version 4.4.1. Here is the UI component:

import React, { Component } from "react";
import styled from "styled-components";

const Test = styled.div`
  width: 100px;
  height: 100px;
  background-color: red;
`;

export default class DummyComponent extends Component {
  render() {
    return (
      <div>
        <Test />I am a dummy react npm module
      </div>
    );
  }
}

Here is how I import it in CRA default app:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Button from 'dummy-react-npm-module';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <Button>test</Button>
      </header>
    </div>
  );
}

export default App;

This is the error I get with v5.0.1: image

The issue does seem related to this one #3037 and this PR #2390

Expected Behavior

The library should work correctly as an import and not cause react hook errors.

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 25 (5 by maintainers)

Most upvoted comments

@lipeavelar when you install local packages, they are just being copied without filtering with their node_modules folders inside. So you need to manually remove them. Снимок экрана 2020-04-23 в 15 06 48

@lipeavelar when you install local packages, they are just being copied without filtering with their node_modules folders inside. So you need to manually remove them. Снимок экрана 2020-04-23 в 15 06 48

On unix it creates an alias using ln command when using packages locally. Deleting unused node_modules affects the source since it’s not “copied” and far from ideal.

"dependencies": {
    "@scope/package-name": "file:.."
}

@probablyup what would be the recommended pr if this was to be “fixed” at source?

Hi, I’ve got the same issue, in 4.4.1 everything works fine but in 5.0.1 it doesn’t. FYI: I had to add the following lines in the resolve part of my webpack.config.js to make it work in 4.4.1. alias: { react: path.resolve('./node_modules/react') }