Yarn, React, and Udemy. Help requested.
My apologies if this kind of content is not allowed here. Mod(s) please feel free to delete it if it is not without any butthurt on my part.
I'm new to React Testing, so I am taking an Udemy course on it. The Udemy course uses yarn, so I would like to stick with that though I do know yarn isn't the top accepted tool in the React community.
I've posted this question elsewhere, I haven't gotten any responses, so I am posting it here ( costs nothing ).
I am getting this error when executing yarn build:
$ yarn build
yarn run v1.22.22
$ react-scripts build
Creating an optimized production build...
Failed to compile.
TS2305: Module '"web-vitals"' has no exported member 'ReportHandler'.
> 1 | import { ReportHandler } from 'web-vitals';
| ^^^^^^^^^^^^^
2 |
3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4 | if (onPerfEntry && onPerfEntry instanceof Function) {
error Command failed with exit code 1.
I've tried installing web-vitals over what is already in the modules section, but that hasn't helped.
Any clues appreciated!
Update: the tip about ReportHandler being deprecated helped. I ran create react app in a new folder, did NOT run yarn update as the instructor called for,moved my work over, and now everything runs fine.
I’m on mobile so can’t confirm, but it’s possible web-vitals removed ReportHandler or renamed it. You could look through their changelog for breaking changes.
https://github.com/GoogleChrome/web-vitals/blob/main/CHANGELOG.md
Then you could either downgrade that library or fix the breaking changes.
The file it is in is part of the stock application you get by default. Now that I know this I will probably just comment out references to that file and move on with the course.
Thanks much for the help.
Seems like the
ReportHandlerwas deprecated quite a while back. Here is a GitHub issue with some more info (and a workaround that might be applicable):https://github.com/GoogleChrome/web-vitals/issues/482
The file it is in is part of the stock application you get by default. Now that I know this I will probably just comment out references to that file and move on with the course.
Thanks much for the help.
As someone else said, you are going to need to change the version of one or more of your dependencies. Check the yarn documentation for commands like “yarn info” which may help with this.
As an aside, the error is not related to using yarn. You would get similar results if you used “npm run build”.
I didn't see that in the comments. It makes sense. Per the course I updated the initial install. Perhaps it would have been better if I didn't. The old deprecated stuff would have been there. Maybe I will start over in a different directory and NOT do the update and see if that works better.
It isn't part of yarn or npm, but the course used create-react-app which I understand is deprecated. I took a React course a few months back which I think ( I can't remember ) which used npm and did not use create-react-app.
Thanks much for the clarification!
One thing that may be easy to try is to try to use the exact version of libraries by removing any semver wildcard such as “^” from the dependency versions.
For example, in the dependencies it may have a line like this:
The ^ tells npm or yarn that it’s ok to get a later compatible version of foo. But maybe there’s a bug in that later version. So taking out the ^ will cause you get the exact version that udemy used when they created the example.
Slight tangent: I've been gradually getting more and more frustrated by the sheer number of dependencies that these frameworks have. I'm not going to point my finger directly at react because I got the same thing from angular.
I wanted to build a personal blog without starting from scratch, so I tried Gatsby. Right out of the box,
npm auditshows several high priority upgrades needed. When I try to upgrade I end up with dependency of dependency of dependency issues.I hadn't planned to spend a week on this. I'm about ready to put it down and use wix or something.
I hear you. It is an old problem. Programming in Java would be horrible without Maven.
The silver lining of course is that many dependencies means modularization and many precreated things to use.
id recommend hugo, personally - im very happy with it aside from the fact that i cant put react components into my posts the way i could if i were using gatsby & mdx....but it sounds like maybe i should be grateful im not using gatsby in which case i have no complaints about hugo haha
I dilly think I’ve looked into that one yet. Thanks for the recommendation, I’ll give it a shot.
I agree that hugo, or something like it, is the way to go. Don't use React for a static site. It's the completely wrong tool for the job. React exists for highly dynamic webpages.