EliEladElrom / cra-template-must-have-libraries

✨ A starter CRA professional React v17 project with must-have ReactJS libraries including TypeScript, SCSS, Redux, Toolkit, Material-UI, Styled Components, React Router, Jest & Enzym, Folder structure, Generate templates, ESLint, Prettier, Recoil
https://elielrom.com
MIT License
100 stars 22 forks source link

both npx and yarn hangs - wont' installs #3

Closed petermckeeverPerform closed 3 years ago

petermckeeverPerform commented 3 years ago

Unable to use this on multiple machines - including with clean install of node. CLI readout attached. Appears to hang on installing fsevents

must-have-libraries-bugout.txt

EliEladElrom commented 3 years ago

Hi @petermckeeverPerform, I am sorry to see you have issues there. If you look at the action tab (https://github.com/EliEladElrom/cra-template-must-have-libraries/actions), you can see that it is building correctly. I also tried on my personal box without an issue and didn't hear anyone else complain. All of these lead me to believe that it is connected with your individual setup. If I google your problem I am using this https://github.com/facebook/jest/issues/5169: "The issue may partly be related to my dev environment".

EliEladElrom commented 3 years ago

Just heads up. I have upgraded jest dom to the latest. It changed it from 4.2.4 to 5.14.1, see if that helps. It’s still building without a hick on Ubuntu. Another thing for you to try is to start your computer from a guest user. I really think it’s how your environment is set up. Lastly, if you using MHL as part of the interactive course or book you bought, you can always build projects from the chapter directories of the book using --legacy-peer-deps

petermckeeverPerform commented 3 years ago

I'll give this a try again. Have tried on multiple machines with fresh installs to no avail, but if I continue to see issues I'll install packages one by one and see if/where it hangs and report back. I am indeed using it as part of your latest D3 with React book! Will also give it a try with --legacy-per-deps

petermckeeverPerform commented 3 years ago

Hi @EliEladElrom, finally got round to this. I went through each install manually and managed to get this to build by skipping enzyme-adapter-react-16, otherwise it consistently failed. There are a couple of other packages that were dropped as they were creating conflicts with webpack or other dependencies. Here is the package.json of my working version:

{
  "name": "react-d3-hello-world",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/helper-builder-react-jsx": "^7.14.5",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@octokit/core": "^3.5.1",
    "@octokit/plugin-request-log": "^1.0.4",
    "@reduxjs/toolkit": "^1.6.1",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@types/classnames": "^2.3.1",
    "@types/enzyme": "^3.10.9",
    "@types/enzyme-adapter-react-16": "^1.0.6",
    "@types/expect-puppeteer": "^4.4.6",
    "@types/jest": "^26.0.24",
    "@types/jest-environment-puppeteer": "^4.4.1",
    "@types/node": "^12.20.20",
    "@types/puppeteer": "^5.4.4",
    "@types/react": "^17.0.19",
    "@types/react-dom": "^17.0.9",
    "@types/react-helmet": "^6.1.2",
    "@types/react-redux": "^7.1.18",
    "@types/react-router-dom": "^5.1.8",
    "@types/sinon": "^10.0.2",
    "@types/styled-components": "^5.1.12",
    "@typescript-eslint/eslint-plugin": "^4.29.2",
    "@typescript-eslint/parser": "^4.29.2",
    "add": "^2.0.6",
    "babel-eslint": "^10.1.0",
    "classnames": "^2.3.1",
    "enzyme": "^3.11.0",
    "enzyme-to-json": "^3.6.2",
    "eslint-config-airbnb-typescript": "^13.0.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-import-resolver-typescript": "^2.4.0",
    "eslint-plugin-flowtype": "^5.9.0",
    "eslint-plugin-import": "^2.24.1",
    "eslint-plugin-jest": "^24.4.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "istanbul-reports": "^3.0.2",
    "jest-puppeteer": "^5.0.4",
    "moment": "^2.29.1",
    "node-sass": "^6.0.1",
    "nyc": "^15.1.0",
    "prettier-eslint": "^13.0.0",
    "prettier-eslint-cli": "^5.0.1",
    "prop-types": "^15.7.2",
    "puppeteer": "^9.1.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-helmet": "^6.1.0",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "react-test-renderer": "^17.0.2",
    "react-uuid": "^1.0.2",
    "recoil": "^0.4.0",
    "redux": "^4.1.1",
    "scss-loader": "^0.0.1",
    "serve": "^12.0.0",
    "sinon": "^11.1.2",
    "styled-components": "^5.3.0",
    "typescript": "^4.1.2",
    "typings-for-scss-modules-loader": "^1.5.1",
    "web-vitals": "^1.0.1",
    "yarn": "^1.22.11"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
EliEladElrom commented 3 years ago

Hey, @petermckeeverPerform thanks for your effort. Not installing the enzyme-adapter will break the tests.

Here is my solution.

1) I upgraded from ver16 to v17 - enzyme-adapter-react-17: enzyme-adapter-react-17.

2) I removed the ^ from the package.json file so it will load the exact version and won't break without notice.

3) Lastly, I create a docker build container and that will allow installing this on any environment. Check docker hub

All these steps will allow you to get this library going. You can confirm it's all working by running yarn test.

You can see these changes in this pull request.