Unable to run example projects locally

[claytron5000]

Describe the bug The examples don't run on a local installation.

To Reproduce Steps to reproduce the behavior:

1. clone the react-query repository
2. cd examples/simple
3. yarn && yarn start
4. The packages install and the server starts
5. yarn && yarn start

Failed to compile
./src/index.js
Error: Cannot find module 'eslint-config-prettier'
Referenced from: /Users/clayton/Projects/react-query/examples/simple/.eslintrc
    at Array.reduceRight (<anonymous>)

Expected behavior The site loads as expected.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• MacOS 11.6.1 (M1 ARM)
• Browser: Chrome 96.0.4664.55
• React-Query Version: ebd22b203a519519cf7019c47a47ce92cbefe16c (current master as of writing)

Additional context If I install the parent node_modules first I get a different error. After writing this, I realize this might be the issue:

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:

  "babel-eslint": "10.0.1"

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

  /Users/clayton/Projects/react-query/node_modules/babel-eslint

[claytron5000]

I think the issue is the conflicting version of babel-eslint. The parent package is "babel-eslint": "^10.1.0",, where the version in the examples is "babel-eslint": "10.0.1".

I'm not sure how to resolve, it looks like Create React Script app requires a pinned version:

simple@ /Users/clayton/Projects/react-query/examples/simple
└─┬ [email protected] invalid: "^2.1.2" from node_modules/@rescripts/cli
  ├── [email protected]
  └─┬ [email protected]
    └── [email protected] deduped

Maybe react-scripts needs to be upgraded.

[TkDodo]

wow, this sucks. I tried the recommended steps:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "babel-eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

in the basic example, but it didn't work. I would appreciate it if you could take a look at how to fix this properly. I'm now doing:

SKIP_PREFLIGHT_CHECK=true yarn start

just to be able to get them to work, but obviously that's not a good solution

[claytron5000]

I wasn't able to get it to run with the env variable.

In the simple example, I did try unlocking react-scripts and babel-jest:

"dependencies": {
    "axios": "^0.21.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-query": "^3.5.0",
    "react-scripts": "^3.0.1",
    "stop-runaway-react-effects": "^1.2.0",
    "styled-components": "^4.3.2"
  },
  "devDependencies": {
    "@rescripts/cli": "^0.0.11",
    "@rescripts/rescript-use-babel-config": "^0.0.8",
    "@rescripts/rescript-use-eslint-config": "^0.0.9",
    "babel-eslint": "^10.0.1"
  },

however, I get a similar issue, but for babel-jest.

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

  "babel-jest": "^24.9.0"

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

  /Users/clayton/Projects/react-query2/node_modules/babel-jest (version: 26.0.1) 

The two dependency trees:

npm ls babel-jest
simple@ /Users/clayton/Projects/react-query2/examples/simple
└─┬ [email protected] invalid: "^2.1.2" from node_modules/@rescripts/cli
  ├── [email protected]
  └─┬ [email protected]
    └─┬ [email protected]
      └─┬ [email protected]
        └── [email protected] deduped

and in the parent directory

npm ls babel-jest
[email protected] /Users/clayton/Projects/react-query2
├── [email protected]
└─┬ [email protected]
  └─┬ @jest/[email protected]
    └─┬ [email protected]
      └── [email protected] deduped

In order to develop on the react-query package, I think I'll try a different technique: build a test/example app, and link it externally.

stop gap:

git clone [email protected]:claytron5000/react-query.git
npx create-react-app my-app
cd my-app
npm install ../react-query

And develop from there.

[claytron5000]

I took another run at getting the simple example to run inside the parent package.

In the example/simple directory I bumped the version for react-scripts

-    "react-scripts": "3.0.1",
+    "react-scripts": "^4.0.3",

and removed the babel-eslint

-    "@rescripts/rescript-use-eslint-config": "^0.0.9",
-    "babel-eslint": "10.0.1"
+    "@rescripts/rescript-use-eslint-config": "^0.0.9"

In the parent directory I removed babel-jest, (it may be required but it is included as a sub-package of jest(I think).

-    "babel-jest": "^26.0.1",

This gets very close, I'm surprised the point version makes a difference, but:

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

  "jest": "26.6.0"

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

  /Users/clayton/Projects/react-query/node_modules/jest (version: 26.6.3)

If I run the app with SKIP_PREFLIGHT_CHECK=true yarn start it crashes with the error error:0308010C:digital envelope routines::unsupported

[claytron5000]

I was able to get it to run like this:

SKIP_PREFLIGHT_CHECK=true NODE_OPTIONS=--openssl-legacy-provider yarn start

[TkDodo]

we're now using vite instead of react-scripts, which makes things run much smoother. This should be fixed - I was able to run the examples locally. Please reopen if it still doesn't work for you.