ecronix/react-most-wanted

error while starting demo after installation (found fix: should upgrade react-scripts to 3.4.0)

Closed this issue · 6 comments

pavlobu commented

the problem is that project uses old version of react-scripts 3.3.0

when I replaced it to 3.4.0 all worked for me

my system config:

MacOS 10.15.3 (19D76)
node: v12.16.1
npm: 6.13.4
npx: 6.13.4
(create-react-app uninstalled globally)

after first ever installation demo running this command:

npx create-react-app my-app --template rmw

there is an error and app doesn't run:

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at validateString (internal/validators.js:117:11)
    at Object.join (path.js:1039:7)
    at noopServiceWorkerMiddleware (/Users/sapienti/files/workspace/my-apps/my-app/node_modules/react-dev-utils/noopServiceWorkerMiddleware.js:14:26)
    at Layer.handle [as handle_request] (/Users/sapienti/files/workspace/my-apps/my-app/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/sapienti/files/workspace/my-apps/my-app/node_modules/express/lib/router/index.js:317:13)
    at /Users/sapienti/files/workspace/my-apps/my-app/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/Users/sapienti/files/workspace/my-apps/my-app/node_modules/express/lib/router/index.js:335:12)
    at next (/Users/sapienti/files/workspace/my-apps/my-app/node_modules/express/lib/router/index.js:275:10)
    at launchEditorMiddleware (/Users/sapienti/files/workspace/my-apps/my-app/node_modules/react-dev-utils/errorOverlayMiddleware.js:20:7)
    at Layer.handle [as handle_request] (/Users/sapienti/files/workspace/my-apps/my-app/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/sapienti/files/workspace/my-apps/my-app/node_modules/express/lib/router/index.js:317:13)
    at /Users/sapienti/files/workspace/my-apps/my-app/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/Users/sapienti/files/workspace/my-apps/my-app/node_modules/express/lib/router/index.js:335:12)
    at next (/Users/sapienti/files/workspace/my-apps/my-app/node_modules/express/lib/router/index.js:275:10)
    at handleWebpackInternalMiddleware (/Users/sapienti/files/workspace/my-apps/my-app/node_modules/react-dev-utils/evalSourceMapMiddleware.js:42:7)
    at Layer.handle [as handle_request] (/Users/sapienti/files/workspace/my-apps/my-app/node_modules/express/lib/router/layer.js:95:5)

in browser (http://localhost:3000/) and terminal there is the same message shown ^^^^^^^^^^

how to fix this issue:

in package.json
change :
"react-scripts": "3.3.0",
to
"react-scripts": "3.4.0",
save file and run:
yarn install
in your project root directory

after that, application runs with no errors and I was able to see home page in browser

thanks for your work, it is such a great project!

P.S. you probably need to update template here:
https://www.npmjs.com/package/cra-template-rmw
I see here:
https://github.com/TarikHuber/react-most-wanted/blob/545e6d8765b5b660069280a859b1e5505457ff95/packages/cra-template-rmw/template/package.json
you are using a good react scripts version,
but last update in npmjs.com was 3 months ago

pavlobu commented

README.md is outdated. it recommends to use a CRA template
from here:
https://www.npmjs.com/package/cra-template-rmw
the last time it has been updated was 3 months ago already

so to get latest version of react-most-wanted template I had to run this:

cd my/awesome/test/dir
git clone https://github.com/TarikHuber/react-most-wanted
npx create-react-app my-app --template file:/full/path/to/react-most-wanted/packages/cra-template-rmw/ # the one that you just git cloned
cd my-app
yarn start
  • 👍1
wcousin commented

I can't get this app to run on my machine...not sure what the issue. Seems like a cool project otherwise

pavlobu commented

@wcousin I just edited post, it was misleading.

you can actually provide a full path to your local CRA template folder in your machine.

here what worked for me:

cd my/awesome/test/dir
git clone https://github.com/TarikHuber/react-most-wanted
npx create-react-app my-app --template file:/full/path/to/react-most-wanted/packages/cra-template-rmw/ # the one that you just git cloned
cd my-app
yarn start

then make sure you follow the guide from README.md to set up your firebase app
here is the firebase setup guide

though this firebase setup process ^^^ wasn't that smooth so I had to google search to solve some minor issues, myself

Charly6596 commented

@pavlobu your fix works for me too, i was following the codelab mentioned in the readme.md, which suggests using npx create-react-app test-app --scripts-version rmw-react-scripts, which as you also said in another issue, seems to be using an outdated template
thanks

gregfenton commented

For me I got it working with:

$ npx create-react-app my-app --template rmw --use-npm
$ cd my-app
$ npm install -g npm-check-updates
$ ncu -u
$ npm install
$ npm start

For the command ncu -u, it ended up upgrading the following:

Upgrading /Users/merpy/work/my-app/package.json
[====================] 55/55 100%

 @date-io/moment              ^1.3.13  →   ^2.6.0
 @testing-library/jest-dom     ^4.2.4  →   ^5.7.0
 @testing-library/react        ^9.5.0  →  ^10.0.4
 @testing-library/user-event   ^7.2.1  →  ^10.2.0
 downshift                     ^3.4.8  →   ^5.3.0
 github-markdown-css           ^3.0.1  →   ^4.0.0
 react-dropzone               ^10.2.2  →  ^11.0.1
 react-helmet                  ^5.2.1  →   ^6.0.0
 react-intl                   ^3.12.1  →   ^4.5.3
 react-player                 ^1.15.3  →   ^2.0.1
 react-scripts                  3.3.0  →    3.4.1
 react-toastify                ^5.5.0  →   ^6.0.4

Run npm install to install new versions.
  • 👍1