Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
pavlobu opened this issue Apr 16, 2020 · 6 comments

Comments

@pavlobu
Copy link

pavlobu commented Apr 16, 2020

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

@UseMuse
Copy link
Contributor

UseMuse commented Apr 16, 2020

#105

@pavlobu
Copy link
Author

pavlobu commented Apr 16, 2020

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

@wcousin
Copy link

wcousin commented Apr 18, 2020

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

@pavlobu
Copy link
Author

pavlobu commented Apr 19, 2020

@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
Copy link
Contributor

@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
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants