search

DimiMikadze / create-react-library

React NPM library starter kit based on Facebook's create react app
MIT License
602 stars 60 forks source link

React Hooks break import #70

Closed dwilt closed 4 years ago

dwilt commented 4 years ago

Describe the bug First off, I'd like to say thanks for putting together such a great library. I hit the ground running with this. Was super excited to see you added the TypeScript documentation as well.

This is similar to https://github.com/udilia/create-react-library/issues/55 in the sense I get the same error but I'm getting it without using rollup - just using the out-of-the-box configuration with the project (except I've added TypeScript).

System

Node.js version: 11.15.0 NPM or Yarn version: Yarn 1.19.1 Operating system: Mac OSX Mojave

Steps to reproduce

  1. Run the setup for this project
  2. Create a component that uses any type of hook in it (useState, useEffect, etc)
  3. Build the library (yarn build) and then import it into another local project. I used yarn link for my current project.

Expected behavior

I can add hooks to my component library and import them just like any other component library

Actual behavior

When I remove the hooks from my component library, and just use a simple component (something that renders a <div />), it works perfectly. But as soon as I add a useState to the component, it breaks the project it's imported into.

However, in my local demo package and through the tests, it works just fine.

Reproducible demo 2019-11-05 22 53 26

  1. Go to my repo: https://github.com/dwilt/react-drag-and-select and clone it. Go into the directory and run yarn start
  2. Run yarn test to see the e2e and unit tests that everything works great
  3. Run yarn build
  4. Then run yarn link
  5. Create a brand new app with create react app.
  6. Go to any component and import import { DragSelection } from 'react-drag-and-select/build'
  7. Add it to the component (<DragSelection></DragSelection>). Save and refresh the project build and see this error:

image

Additional context

What's really odd is that everything works when I don't include hooks. In the project I was importing the library into, we are using the same react and react-dom versions (^16.10.2) and I have them set as peerDependencies and devDependencies in the library. The moment I include some sort of hook logic, it breaks. This project I'm importing this library into has hooks all over the place too.

dwilt commented 4 years ago

Actually, I'm pretty sure it's related to https://github.com/facebook/react/issues/13991