Project doesn't work with yarn + doesn't render anything when using NPM either

[ArshanKhanifar]

System

This is my system:

Yarn

When I do yarn install then do yarn api I get this error:

yarn api
yarn run v1.22.17
$ json-server --host 0.0.0.0 --port 6060 --watch json-server/db.json --routes json-server/routes.json
error An unexpected error occurred: "spawn E2BIG".
info If you think this is a bug, please open a bug report with the information provided in "/Users/arshankhanifar/spa_react_javascript_hello-world_react-router-6/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

when I run yarn start I also get something similar:

(base) ➜  spa_react_javascript_hello-world_react-router-6 git:(main) ✗ yarn start
yarn run v1.22.17
$ cross-env PORT=4040 react-scripts start
error An unexpected error occurred: "spawn E2BIG".
info If you think this is a bug, please open a bug report with the information provided in "/Users/arshankhanifar/spa_react_javascript_hello-world_react-router-6/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Trying NPM

I deleted everything and reinstalled with npm, and this is what I see:

(base) ➜  spa_react_javascript_hello-world_react-router-6 git:(main) ✗ npm run api

> spa_react_javascript_hello-world_react-router-6@0.1.0 api
> json-server --host 0.0.0.0 --port 6060 --watch json-server/db.json --routes json-server/routes.json

  \{^_^}/ hi!

  Loading json-server/db.json
  Loading json-server/routes.json
  Done

  Resources
  http://0.0.0.0:6060/api-messages-public
  http://0.0.0.0:6060/api-messages-protected
  http://0.0.0.0:6060/api-messages-admin

  Other routes
  /api/messages/public -> /api-messages-public
  /api/messages/protected -> /api-messages-protected
  /api/messages/admin -> /api-messages-admin

  Home
  http://0.0.0.0:6060

  Type s + enter at any time to create a snapshot of the database
  Watching...

And on the react-server side:

You can now view spa_react_javascript_hello-world_react-router-6 in the browser.

  Local:            http://localhost:4040
  On Your Network:  http://10.0.0.139:4040

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

Looks like the json-webserver is running and react-server is also running, but I don't see anything when firing up the browser:

Here's what the inspector window shows:

Too strict build-script rules

Debugging this became really hard because you've enforced prettier rules on every run of the react compiler. Is that really necessary for a code sample? I feel like it adds friction to the developers experimenting if anything.

[rgupta33]

I also get a black screen

[byron-okta]

Hello @ArshanKhanifar, welcome to the Auth0 Developer Center Resources. You should use npm instead of yarn to run this code sample application.

Thanks for sharing your feedback. We've updated the code sample to remove the prettier rules to avoid just what you've mentioned.

The issue of a black screen that you're having could be because the environment variables that the application needs to run are not present. /cc @rgupta33

I invite you to take a look at the "React/JavaScript + React Router 6 Code Sample: User Authentication For Basic Apps" on Developer Center Resources, which has detailed instructions on how to run this application and secure it using Auth0.

Please let us know if this works well for you or if you need further assistance. We’re happy to help.

[mattwalo32]

Regarding the issue with the "spawn E2BIG" error being shown when trying to start the frontend or backend, it seems like this is an issue with how yarn treats the NOTICE file. Deleting NOTICE fixes it.

https://github.com/yarnpkg/yarn/issues/5420

[e10a]

I got the black/blank screen fixed on my local: • added .env by following the instructions here • npm install • npm start

[euge]

Thank you @e10a!