Example app does not start

jbwl commented 1 year ago

I'm trying to get the example app to start (Mac Ventura / NodeJS v16.19.0) and I'm getting the following error(s):

Steps taken:

git clone https://github.com/alan2207/react-query-auth.git
cd react-query-auth/example/
npm install
npm start

Expected outcome: The example app should start without errors.

Actual outcome:

> example@1.0.0 start
> cross-env NODE_ENV=production vite --port=3000

▲ [WARNING] Cannot find base config file "@tsconfig/create-react-app/tsconfig.json" [tsconfig.json]

    ../tsconfig.json:3:13:
      3 │   "extends": "@tsconfig/create-react-app/tsconfig.json",
        ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

▲ [WARNING] Cannot find base config file "@tsconfig/create-react-app/tsconfig.json" [tsconfig.json]

    tsconfig.json:2:13:
      2 │   "extends": "@tsconfig/create-react-app/tsconfig.json"
        ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  vite v2.9.15 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 153ms.

✘ [ERROR] [plugin vite:dep-scan] Failed to resolve entry for package "/Users/b/projects/playground/rqa/react-query-auth". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "/Users/b/projects/playground/rqa/react-query-auth". The package may have incorrect main/module/exports specified in its package.json.

    node_modules/vite/dist/node/chunks/dep-689425f3.js:40970:10:
      40970 │     throw new Error(`Failed to resolve entry for package "${id}". ` +
            ╵           ^

    at packageEntryFailure (/Users/b/projects/playground/rqa/react-query-auth/example/node_modules/vite/dist/node/chunks/dep-689425f3.js:40970:11)
    at resolvePackageEntry (/Users/b/projects/playground/rqa/react-query-auth/example/node_modules/vite/dist/node/chunks/dep-689425f3.js:40966:9)
    at tryResolveFile (/Users/b/projects/playground/rqa/react-query-auth/example/node_modules/vite/dist/node/chunks/dep-689425f3.js:40682:38)
    at tryFsResolve (/Users/b/projects/playground/rqa/react-query-auth/example/node_modules/vite/dist/node/chunks/dep-689425f3.js:40664:16)
    at Context.resolveId (/Users/b/projects/playground/rqa/react-query-auth/example/node_modules/vite/dist/node/chunks/dep-689425f3.js:40537:28)
    at Object.resolveId (/Users/b/projects/playground/rqa/react-query-auth/example/node_modules/vite/dist/node/chunks/dep-689425f3.js:39254:55)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async resolve (/Users/b/projects/playground/rqa/react-query-auth/example/node_modules/vite/dist/node/chunks/dep-689425f3.js:39466:26)
    at async /Users/b/projects/playground/rqa/react-query-auth/example/node_modules/vite/dist/node/chunks/dep-689425f3.js:39677:34
    at async callback (/Users/b/projects/playground/rqa/react-query-auth/example/node_modules/esbuild/lib/main.js:933:28)

  This error came from the "onResolve" callback registered here:

    node_modules/vite/dist/node/chunks/dep-689425f3.js:39673:18:
      39673 │             build.onResolve({
            ╵                   ~~~~~~~~~

    at setup (/Users/b/projects/playground/rqa/react-query-auth/example/node_modules/vite/dist/node/chunks/dep-689425f3.js:39673:19)
    at handlePlugins (/Users/b/projects/playground/rqa/react-query-auth/example/node_modules/esbuild/lib/main.js:855:23)
    at Object.buildOrServe (/Users/b/projects/playground/rqa/react-query-auth/example/node_modules/esbuild/lib/main.js:1149:7)
    at /Users/b/projects/playground/rqa/react-query-auth/example/node_modules/esbuild/lib/main.js:2110:17
    at new Promise (<anonymous>)
    at Object.build (/Users/b/projects/playground/rqa/react-query-auth/example/node_modules/esbuild/lib/main.js:2109:14)
    at Object.build (/Users/b/projects/playground/rqa/react-query-auth/example/node_modules/esbuild/lib/main.js:1956:51)
    at /Users/b/projects/playground/rqa/react-query-auth/example/node_modules/vite/dist/node/chunks/dep-689425f3.js:39414:54
    at Array.map (<anonymous>)

  The plugin "vite:dep-scan" was triggered by this import

    lib/auth.ts:1:30:
      1 │ import { configureAuth } from '../..';
        ╵                               ~~~~~~~

Build failed with 1 error:
node_modules/vite/dist/node/chunks/dep-689425f3.js:40970:10: ERROR: [plugin: vite:dep-scan] Failed to resolve entry for package "/Users/b/projects/playground/rqa/react-query-auth". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "/Users/b/projects/playground/rqa/react-query-auth". The package may have incorrect main/module/exports specified in its package.json.

I'm not sure if my Node environment is the culprit? If so, any pointers how to fix it would be very appreciated. Thanks!

alan2207 commented 1 year ago

Hey @jbwl , did you build the package before starting the app?

alan2207 commented 1 year ago

Yes, npm run build but in the root of the library folder not in the example folder.

jbwl commented 1 year ago

Thank you, being a newbie, a lot of things are non-obvious to me. Keeping with the theme, I try to make it work without understanding what I'm doing:

Running in the root library folder:

❯ npm run build

> react-query-auth@2.0.0 build
> dts build

sh: dts: command not found

Ok, so I need "dts", whatever that is ;-)

❯ npm install dts
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: react-query-auth@2.0.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   dev react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.9.0 || ^17.0.0" from @testing-library/react-hooks@8.0.1
npm ERR! node_modules/@testing-library/react-hooks
npm ERR!   dev @testing-library/react-hooks@"^8.0.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/b/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/b/.npm/_logs/2023-01-10T09_52_28_995Z-debug-0.log

...so maybe I need to go to the example dir?

❯ cd example/
❯ npm install dts

added 228 packages, and audited 229 packages in 7s

46 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

phew, something did install...228 packages were needed... now I can surely build?

❯ cd ..
❯ npm run build

> react-query-auth@2.0.0 build
> dts build

sh: dts: command not found

still no dts found.

I know I'm being an annoying newbie here, please let me know if there are any basic things I need to have to get the example running.

alan2207 commented 1 year ago

Ok, here are the complete list of steps:

clone the repository
install dependencies with yarn install or npm install
build the library with npm run build or yarn build
cd into example
install dependencies with yarn install or npm install
run the app with npm start or yarn start

jbwl commented 1 year ago

That helped, the example is up and running. Thank you! Just one more problem I was able to "fix" myself: On your second step, npm install needs --force because of dependency errors.

One last general question: What would be a giveaway to an experienced JS developer that the library needs to be built before running? That's the step I wasn't aware had to do. I guess just by looking at the package.json's script section?

alan2207 / react-query-auth

Example app does not start #19