Hermanya/create-react-hook

Issues with `eslint` versions - can't start example

jsjoeio opened this issue · 3 comments

jsjoeio commented

Hey there! First off, thanks for making this 🙏🏼 I found create-react-library-boilerplate and had to tweak it for hooks and thought about creating a spinoff library for hooks but then found yours :)

Unfortunately, I'm running into some issues and wanted to see if you might know how to fix them.

Expected Behavior

When I install create-react-hook globally using npm i -g create-react-hook or run it locally using npx create-react-hook, I should be able to cd into the example directory after following the prompts and be able to start the create-react-app.

Actual Behavior

react-scripts throws an error due to mismatched eslint versions.

react-scripts start

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "eslint": "5.12.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:

  /Users/joe/Dev/testing/test-hook/node_modules/eslint (version: 5.6.0)

Screen-recording part 1:
npm-command

Screen-recording part 2:
npm-command-step2

Steps to Reproduce the Problem

  1. Run `npm i -g create-react-hook
  2. Run create-react-hook
  3. After completing the configuration and project setup, cd /example && npm start
  4. See error.

Things I've tried:

  • manually installingeslint@5.12.0 in the root
  • upgrading react-scripts in both the root and the /example directory to v3
  • downgrading node to v10.16.0
  • using npm and yarn (both show the same error)
  • deleting node_modules in the /example directory and reinstalling

Specifications

  • Version: node v12.5.0 npm 6.9.2 yarn 1.17.3
  • Platform: macOS Mojave 10.14.5

If you have seen this or have other ideas on how to fix it, please let me know and I'd be happy to submit a PR. I need this CLI tool for an egghead course I'm creating so if I can't get it to work, I'll have to go with create-react-library.

I was able to get that to work by using yalc instead of npm/yarn link so that may be what I do.

Hermanya commented

Hi @jsjoeio what a great issue 😄 so much detail

I have not touched this lib in awhile. I think the easiest way around is creating .env file with SKIP_PREFLIGHT_CHECK=true.

That being said, I would recommend to check out https://github.com/palmerhq/tsdx
It has a great react template, and it looks to be more up to date than create-react-library.

jsjoeio commented

Haha I was afraid to post because I thought, "There has to be something I'm missing...I'll include all the details so he knows I tried almost everything."

Ah-HA! I did not even bother to try that one. And of course, that works 😅

WRVhI2DHDG

Good to know this could work potentially. What are your thoughts on me submitting a PR to add the
.env file with SKIP_PREFLIGHT_CHECK=true to the default template?

My thought is:

a) your library is literally set up for React Hooks which is the course topic

vs.

b) tsdx is set up for TypeScript packages(so it appears), which would be good, but might not be fit for the course potentially. I'll have to check it out more - I appreciate the recommendation! 👍

Hermanya commented

Your PR would be very welcome.

Tsdx has a good typescript-react boilerplate. In my experience development of hooks is not that much different from development of component. It's actually easier to test hooks by creating a test component and testing it with traditional react testing libraries.

  • 🎉1