btholt / complete-intro-to-react-v5 Goto Github PK

Hello Brian,

May I know how is export default function DetailsWithErrorBoundary(props) called?

From your tutorial, it seems like specifying this function like the above will get it called when there's an error.

Thanks in advance for the clarification.

Regards
Xy

I come across this issue when running npm run dev:

$ npm run dev

> [email protected] dev C:\Users\<user>\Desktop\Área de Trabalho\Computer Science\Frontend Masters\intermediate-react-v2\complete-intro-to-react-v5
> parcel src/index.html

internal/modules/cjs/loader.js:1033
  throw err;
  ^

Error: Cannot find module 'C:\Users\<user>\Desktop\Área de Trabalho\Computer Science\Frontend Masters\intermediate-react-v2\complete-intro-to-react-v5\node_modules\parcel-bundler\bin\cli.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1030:15)
    at Function.Module._load (internal/modules/cjs/loader.js:899:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `parcel src/index.html`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\<user>\AppData\Roaming\npm-cache\_logs\2020-07-04T00_22_50_162Z-debug.log

I've been playing around with the ssr branch and got some issue when using a image in the assets folder and run npm run start.

"App.js"

...
import logo from "../src/assets/image-logo.png";
...
<header>
          <img src={logo} alt="" />
          <Link to="/">Adopt Me!</Link>
</header>
....

Here's the error message

It works well if I run npm run dev, but doesn't work when I run npm run start. I thought that's some babel issue, but couldn't figure it out.

Here's my branch for more information, the last commit is the change.

Please help. Thanks 🙇‍♀️

Hi Brian,
I came across this issue with the parcel and .env file. When I console.log(process.env) is giving me an empty object but once I add console.log(process.env.REACT_APP_API_KEY) is returning undefined. Do you know what should I do?

Hi! (sorry for my english)
Here am I doing this course in 2020. In video you are mentioning that in 2019 or 2020 class components will be handeled the way easier on default, but in the video you use babel. My code worked fine as I followed your video, but after intalling babel it crashes and I don't know what went wrong. Do we still need to install babel package? Can I fix this somehow?
I have an error:
Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.

plugins: [
['some-plugin', {}],
['some-plugin', {}, 'some unique name'],
]

Duplicates detected are:
[
{
"alias": "C:\Users\barto\Desktop\VS\React\adopt_me\node_modules\@babel\plugin-proposal-class-properties\lib\index.js",
"dirname": "C:\Users\barto\Desktop\VS\React\adopt_me",
"ownPass": false,
"file": {
"request": "@babel/plugin-proposal-class-properties",
"resolved": "C:\Users\barto\Desktop\VS\React\adopt_me\node_modules\@babel\plugin-proposal-class-properties\lib\index.js"
}
},
{
"alias": "base$2",
"options": {
"spec": false,
"loose": false,
"useBuiltIns": true
},
"dirname": "C:\Users\barto\Desktop\VS\React\adopt_me",
"ownPass": false
}
]

The useDropdown() hook returns the Dropdown component.

I think there is a performance concern here because each time useDropdown is called, we are returning a new component type. See https://www.reddit.com/r/reactjs/comments/9yq1l8/how_do_you_feel_about_a_hook_returning_components/.

Instead, we could use a regularly-defined Dropdown component here.

Hi,
I followed along with the course and it was great. I started my own project and am abstracting selects, inputs, check boxes, etc into their own hooks.

The useDropdown you created works great. I tried to create a useInput. I keep the state in the parent and pass in the default Value and and update function. It gets updated but then loses focus on rerender. I spent some time searching stackoverflow with no luck. I've seen other packages keep the input in the component and just have state in the hook.

Is it possible for you to create a useInput hook to show how we can accomplish this following the same pattern as useDropdown?

Example of my useInput:

import React from "react";

const useInput = (type, label, name, defaultValue, handleChange) => {
  const onChange = e => {
    const { name, value } = e.target;
    handleChange({ [name]: value });
  };

  const Input = () => (
    <label htmlFor={name}>
      {label}
      <input
        id={name}
        type={type}
        name={name}
        value={defaultValue}
        onChange={onChange}
        onBlur={onChange}
      />
    </label>
  );

  return Input;
};

export default useInput;

Thank you

Hello,
I have a little confusion with what is explained in the Effect section about the propagation of data.

Brian says that propagation happens when setBreed("") is called. I understand that, but I decided to comment that line and just call setBreeds([]) instead. Surprisedly, the propagation happened, that means that the BreedDropdown re-rendered.

This is how I let useEffect

This is my main doubt.

Why the BreedDropDown updates? If I updated Breeds only. The main relation I can see between Breeds and BreedDropdown is the statement const [breed, BreedDropdown, setBreed] = useDropdown("Breed", "", breeds);. If some input of the hook is updated, this is re-rendered? or it is just a misunderstanding?

Thank you for reading my issue.

I was following the videos and then I noticed that the breeds' names were strange.

I thought that I made something wrong so I cloned the repo did git checkout 9d52149, npm install and npm run dev:mock but the error was this there.

Here is a picture with the names of the breeds:

Hi, i'm following your Intro to React cours on Frontend Masters(currently at One-way data flow) but when I hit the submit button, the list of pets don't show. the error in my console is;

ReferenceError: regeneratorRuntime is not defined2 app.c328ef1a.js:30162:5
    _requestPets app.c328ef1a.js:30162
    requestPets app.c328ef1a.js:30158
    onSubmit app.c328ef1a.js:30209
    callCallback React
    invokeGuardedCallbackDev app.c328ef1a.js:3668
    invokeGuardedCallback app.c328ef1a.js:3721
    invokeGuardedCallbackAndCatchFirstError React
    executeDispatch app.c328ef1a.js:3821
    React 5
    runExtractedPluginEventsInBatch app.c328ef1a.js:6966
    handleTopLevel React
    batchedEventUpdates$1 app.c328ef1a.js:25156
    batchedEventUpdates React
    dispatchEventForLegacyPluginEventSystem app.c328ef1a.js:7020
    attemptToDispatchEvent React
    dispatchEvent app.c328ef1a.js:7661
    bind_applyFunctionN self-hosted:1042
    dispatchEvent self-hosted:1005
    React 2
    discreteUpdates$1 app.c328ef1a.js:25173
    React 2
    bind_applyFunctionN self-hosted:1042
    dispatchDiscreteEvent self-hosted:1005
    React 6
    completeUnitOfWork app.c328ef1a.js:25484
    performUnitOfWork app.c328ef1a.js:25457
    workLoopSync app.c328ef1a.js:25422
    performSyncWorkOnRoot app.c328ef1a.js:25040
    scheduleUpdateOnFiber app.c328ef1a.js:24472
    updateContainer app.c328ef1a.js:27621
    legacyRenderSubtreeIntoContainer app.c328ef1a.js:28004
    unbatchedUpdates app.c328ef1a.js:25190
    legacyRenderSubtreeIntoContainer app.c328ef1a.js:28003
    render app.c328ef1a.js:28086
    parcelRequire<["app.js"]< app.c328ef1a.js:30246
    newRequire React
    parcelRequire searchparams.js:17
    <anonymous> searchparams.js:41

what does this mean?
i've gone through my code like 5times, and I can't see any differences with yours.

npm install is giving me errors (see npm_install_output.txt) and I'm not sure how to deal with them. Does anyone have any idea what's going on here?

I'm on
macOS Catalina v10.15.3 (I suspect this recent update to be the root of the problem)
node v12.13.1

npm_install_output.txt

on the /hooks page

in the first code block inside input
location={location} should be value={location}

https://btholt.github.io/complete-intro-to-react-v5/effects

On the course website, Code Splitting's previous link just redirects to itself.
As far as I can tell, in the gh-pages-src branch, lessons/code splitting.md's order in metadata should be 18 instead of 19. Currently both code splitting.md and typescript.md share the same order 19.

gyp ERR! find VS msvs_version not set from command line or npm config
gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer
gyp ERR! find VS looking for Visual Studio 2015
gyp ERR! find VS - not found
gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
gyp ERR! find VS
gyp ERR! find VS **************************************************************
gyp ERR! find VS You need to install the latest version of Visual Studio
gyp ERR! find VS including the "Desktop development with C++" workload.
gyp ERR! find VS For more information consult the documentation at:
gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows

What is the build script for this project? Can someone help? Thanks

Hi,
I am getting this error

syntax 'classProperties' isn't currently enabled

although I have updated my babelrc file and I have added this to babelrc and removed dist and .cache

{ "presets": ["@babel/preset-react", "@babel/preset-env"], "plugins": ["@babel/plugin-proposal-class-properties"] }


and this is my dev dependencies in my package json!


"devDependencies": { "@babel/core": "^7.0.0-0", "@babel/plugin-proposal-class-properties": "^7.4.4", "@babel/plugin-syntax-async-generators": "^7.2.0", "@babel/preset-env": "^7.4.3", "@babel/preset-react": "^7.0.0", "babel-eslint": "^10.0.2", "cross-env": "^5.2.0", "eslint": "^5.12.1", "eslint-config-prettier": "^4.0.0", "eslint-plugin-import": "^2.17.3", "eslint-plugin-jsx-a11y": "^6.2.1", "eslint-plugin-react": "^7.13.0", "eslint-plugin-react-hooks": "^1.0.2", "parcel-bundler": "^1.12.1", "prettier": "^1.16.1" },


but I am still getting this error from the parcel

Hi,

Am I the only one to find hard to read the lines of text that go from the left side all to the right side of the screen ?

May I suggest to increase the left and right margins of the text in order to shorten the line length or consider adding css 'columns' to the paragraphs ?

Thank you,

Even after deleting the .cache and dist folder and rerunning using npm run dev: mock, I'm still getting random data on the Breed Dropdown instead of the actual animal breeds. Kindly help !

I just start a Complete Intro to React v5 course today. And after I arrived at an Effects section, I found a breeds API is not working

It is able to install a package and use ANIMALS data. However, a request that sent to an endpoint of a breeds API is timeout.

So, I going to see a @frontendmasters/pet repository to find some solution but found a repo is broken

https://github.com/FrontendMasters/pet

What can I do for continuing a course? Or I should mock data by myself.

parserOptions.ecmaVersion varies between .eslintrc.json files. This might be intentional, but isn't mentioned explicitly.

eslint-prettier: 2016
eslint + React: 2018

age: "Baby"
​​
attributes: Object { spayed_neutered: true, house_trained: false, special_needs: true, … }
​​
breeds: Object { primary: "Libyan Dinar", mixed: false, unknown: true, … }
​​
coat: "Medium"
​​
colors: Object { primary: "pink", secondary: "lavender", tertiary: null }
​​
contact: Object { email: "[email protected]", phone: "1-509-753-1314", address: {…}, … }
​​
description: "Et ipsum sed autem. Voluptate iure dolore. Ut quod sit suscipit laudantium quaerat quia. Inventore voluptates a. Officia dolorum amet ipsa. Qui fugit sunt est voluptatem ut odio quos."
​​
environment: Object { children: true, dogs: true, cats: null }
​​
gender: "Male"
​​
id: 9468194
​​
name: "Johnpaul"
​​
organization_id: "TN168"
​​
photos: Array [ {…}, {…} ]
​​
published_at: "1970-01-01T00:00:00.000Z"
​​
size: "Large"
​​
species: "cat"
​​
status: "adoptable"
​​
tags: Array []
​​
type: "cat"
​​
url: "https://frontendmasters.com/?ref=pet"

The value prop supplied to must be a scalar value if multiple is false. search.js `import React, { useState, useEffect } from "react"; import useDropdown from "../customHooks/customDropDownHook"; import pf, { ANIMALS } from "petfinder-client"; const petfinder = pf({ key: process.env.API_KEY, secret: process.env.API_SECRET }); const Search = () => { const [searchValue, setSearchValue] = useState("hi"); const [breeds, setBreeds] = useState([]); const [animal, AnimalDropdown] = useDropdown("animal", "cat", ANIMALS); const [breed, BreadDropdown, setApiBreeds] = useDropdown("Breed", "",breeds); useEffect(()=>{ petfinder.breed.list({animal}).then( res => { setApiBreeds(res.petfinder.breeds.breed); }, console.error) },[animal]); return ( <input type="search" onChange={e => setSearchValue(e.target.value)} value={searchValue} /> ); }; export default Search;` customDropDownHook.js `import React, { useState } from "react"; const useDropdown = (label, defaultState, options) => { const [state, setState] = useState(defaultState); const id = use-dropdown-${label.replace("", "".toLowerCase())}; const Dropdown = () => { return ( {label} <select id={id} value={state} onChange={e => setState(e.target.value)} onBlur={e => setState(e.target.value)} disabled={!options.length} > {options.map(listOption => ( {listOption} ))}

);
};

return [state, Dropdown, setState];
};

export default useDropdown;`

I just finished this course and it took me a few days longer then I wanted because I had to do some major workarounds and pretty much sleep on StackOverflow, since I'm obviously not a guru-level coder yet. As the project got bigger, and more workarounds we're introduced, they effectively compounded onto each other and towards the end I couldn't even write the same code as him. I had to understand what the intentions were, then translate them in a way that worked with the existing workarounds and workflow. At first I was annoyed that I had to keep pausing, debugging, rewinding, redoing git commits but now that I'm finished and it FINALLY works like advertised, I'm proud of myself for toughening it out and fixing those issues because I learned a TON from just figuring out the problem was and side-stepping them one at a time. I'll write the issue and then I'll say my workaround (or lack thereof) for the major issues, maybe there are better ways to fix them for Atom.

1.) Prettier/eslint configuration nightmare - The best formatter for Atom is Beautifier, which still allows you to pick and choose which formatter you want with what for each language, given that I uninstalled it and did a clean set-up with Brian's tools because he's AWESOME with tool configurations and said I'll try it. I couldn't for the life of me get BOTH prettier and eslint to work together within atom, either one or the other worked at a given moment, but not both. Plus, Atom has this weird open ticket issue with Prettier that it collapses multi-line attributes in self closing tags into a single line (can you imagine an input element with 7 attributes all on a single line, reformatting the same way on save? You gotta scroll like 50 yards to the right to even close the tag).
SOLUTION: I finally gave up and uninstalled prettier and used eslint with Beautifier, which then worked exactly like his set-up. Prettier is a no-go for Atom unless your boss like Brian.

2.) Babel Experimental feature for replacing Constructor/super boilerplate code for component classes messed up the value of THIS for the rest of the course for me. I couldn't use es6 arrow functions on component methods because this got screwed up after the install. And for some of the methods I even had to bind them in the constructor to finally work because something else invoked them (somehow). Arrow functions only worked in self-contained event handlers (sometimes, get to more on that later). Maybe I installed or configured it wrong, but that's way to much headache to avoid writing a few lines of code with every component. I even tried a completely clean install and git-fast forward too, which THEN had me hunting for all the previous workarounds I did beforehand because the commits are not configured for Atom use. I didn't use git until AFTER this, so I couldn't rewind and uninstall it, so I was not enthusiastic about starting over from the beginner the third time. Which DID re-affirm my resolve to use git on EVERY course now.
SOLUTION: I just kept the experimental install, but removed all babel plugins and presets, kept an empty object in the .babelrc, used the constructor/super boilerplate code and used a combo of function declarations and method binding for the rest of the course. Fortunately I'm used to prop-drilling from Code-Academy's Pro react course, so THIS wasn't too bad for me.

3.) ErrorBoundary component was not returning the children - Another long nightmare, never solved it. Error for some reason was not returning the children that I was trying to pass though it, so it either not rendered at all or got stuck on the loading page because the props didn't pass through and component didn't update. This was pretty advanced for an intro course but I stuck with it as long as I could until I gave up. I have no idea what went wrong with that, there isn't a lot of support for Atom configuration (why the hell did I choose atom a couple years ago when I first went back to school? I'm so used to it now and can emulate nearly everything VScode does, but it requires intense knowledge of a WIDE variety of topics to configure tools to work together). It's like switching over to linux for the first time, HORRIBLE learning curve, but elite-snooty feeling afterwards. Except in this case... Now I just feel dumb...
SOLUTION: None, I wrote out the code but never imported it into other modules. For errors on asynchronous code, I switched from async to fetch, and used it's in-built error methods to handle them. Which came with it's on set of problems, but solvable.

4.) Lastly, the ThemeContext instance in Details js switched the context of this again. (It was already messed up from earlier, then it twisted it again). Any area of JSX where I had to put in brackets and write vanilla javascript expressions in regards to the theme, was just haywire. Arrow functions didn't work like the previous workaround, neither did binding them. Ternary operator was selective at best. Props got lost somewhere in the Thousand layers of Router children and
SOLUTION: I used separate event handler functions, in combination with MANY class bindings and selective arrow functions to control the context of WHERE events gets called and WHEN expressions got evaluated. For instance, In details.js working on the modal button between ThemeContext tags, I had to create functions declarations for toggleModal and adopt class methods, bind both of them to the constructor, created a seperate event handler function that was also bound to this class, stuck it in the button onClick attribute and destructed theme from ThemeContext into a variable which I placed in an array on state with the button click event, then created a boolean value isThemeCaptured in state which the onclick toggled, then placed the toggleModal and adopt methods in componentDidUpdate lifecycle method which conditionally ran the methods when the boolean was true and because state was updated. All for a fancy alert screen. The style theme worked like a charm for some reason, it was only event delegation that was the nightmare.

If I was boss level on tool configuration like Brian Holt, then I'm sure ALL of these issues would have required simple additions instead of massive workarounds and spaghetti code "Macgyvered" together with a toothpick, bubble-gum and decarbonated Dr. Pepper. I didn't show any screenshots because frankly I'm embarrassed how ugly my code looks, and I totally went against best practices which probably would have bankrupted my company (like using props to update state, YIKES!) and it'll give anyone a headache trying to read it. Just fought through it so hard that I had to share. Please, Please, PLEASE introduce some alternatives for Atom users, if it's not too much work for you guys. Ok, I'll show a small screenshot so you guys can see a little bit.

Up to this point 'Calling the pet api' commit 0f7977 is using npm only, however in this part of the video where Brian imports "@frontendmasters/pet" and hits save, parcel now uses yarn to install the package, even though there is a package-lock.json (not your fault I realise 😅).

Steps to reproduce:

(have yarn installed on your system)

1. git clone https://github.com/btholt/complete-intro-to-react-v5.git
2. cd complete-intro-to-react-v5/
3. git checkout 0f7977a
4. npm install
5. npm run dev
6. cd src
7. touch SearchParams.js
8. Add content of SearchParams file from video up till this point
9. Open App.js and import SearchParams
10. Hit save when parcel is running
11. I got the attached logs
    err.log

If there is some way to specify that parcel should use npm if it finds a package-lock.json that would be great, but I realise that's out of your control! It seems stupid to me to use yarn when parcel can clearly see there is a package-lock.json and no yarn.lock.

Fix:
Delete the yarn.lock, then install the package manually using:
npm i @frontendmasters/pet

Related parcel issue: parcel-bundler/parcel#2117

It seems because I have yarn installed it uses that, even though it can see I have a package-lock.json in my project. So it assumed based on me having yarn installed rather than my specific project config, which seems wrong to me.

This is just a quick note to point out that in the website for this course, two of the sections are out of order it seems. The commit for the Context section has code from the Portals and Refs section which comes after the Context section. Just a small detail I wanted to point as it was slightly confusing.

key={photo} is not unique in Carousel.js

After I created a new file Results.js, I got a error when invoked the function requestPets():

SearchParams.js:9 Uncaught ReferenceError: regeneratorRuntime is not defined
at _requestPets (SearchParams.js:9)
at requestPets (SearchParams.js:9)
at onSubmit (SearchParams.js:44)
at HTMLUnknownElement.callCallback (react-dom.development.js:362)
at Object.invokeGuardedCallbackDev (react-dom.development.js:411)
at invokeGuardedCallback (react-dom.development.js:466)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:480)
at executeDispatch (react-dom.development.js:612)
at executeDispatchesInOrder (react-dom.development.js:637)
at executeDispatchesAndRelease (react-dom.development.js:743)
_requestPets @ SearchParams.js:9
requestPets @ SearchParams.js:9
onSubmit @ SearchParams.js:44
callCallback @ react-dom.development.js:362
invokeGuardedCallbackDev @ react-dom.development.js:411
invokeGuardedCallback @ react-dom.development.js:466
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:480
executeDispatch @ react-dom.development.js:612
executeDispatchesInOrder @ react-dom.development.js:637
executeDispatchesAndRelease @ react-dom.development.js:743
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:752
forEachAccumulated @ react-dom.development.js:724
runEventsInBatch @ react-dom.development.js:769
runExtractedPluginEventsInBatch @ react-dom.development.js:914
handleTopLevel @ react-dom.development.js:5848
batchedEventUpdates$1 @ react-dom.development.js:24343
batchedEventUpdates @ react-dom.development.js:1463
dispatchEventForPluginEventSystem @ react-dom.development.js:5943
attemptToDispatchEvent @ react-dom.development.js:6059
dispatchEvent @ react-dom.development.js:5963
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12188
discreteUpdates$1 @ react-dom.development.js:24359
discreteUpdates @ react-dom.development.js:1486
dispatchDiscreteEvent @ react-dom.development.js:5926

Later I figured out, I added a extra import at SearchParams.js

import regeneratorRuntime from "./../node_modules/regenerator/runtime.js";

Not sure if it happend to anyone?

In the Introduction page:
https://btholt.github.io/complete-intro-to-react-v5/intro
In the paragraph just after:
Search for this:
You can also go explore the those commits on GitHub too to see what they look like. The repo is here.

"the those" should be changed to those.

I just started the course and want to say thank you so much, I've really been able to pick up the basics pretty quick.

However, within the API, some of the animals return as 404's Example. I've been doing some digging around within the course, and you go into detail about Error Boundaries. However it seems ErrorBoundaries run on render(?) and it doesn't seem to catch when on componentDidMount(). I tried catching an error using the Promise provided from the @FrontendMasters pet.animal() method, but even that doesn't seem to work with the Error Boundary.

   componentDidMount() {
    pet
      .animal(this.props.id)
      .then(({ animal }) => {
        this.setState({
          name: animal.name,
          animal: animal.type,
          location: `${animal.contact.address.city}, 
          ${animal.contact.address.state}`,
          description: animal.description,
          media: animal.photos,
          breed: animal.breeds.primary,
          loading: false
        });
      })
      .catch(err => {
        this.setState({
          error: err
        });
      });
  }

Am I just doing this wrong? Or did was it not mentioned how to handle API 404's bad requests etc.

at https://btholt.github.io/complete-intro-to-react-v5/hooks if i try to checkout to be able to just do the hooks lesson from a previous commit i get "not rendered" from the div in index.html. From the checkout at https://btholt.github.io/complete-intro-to-react-v5/pure-react to the hook checkout gives an error in the console saying "Uncaught SyntaxError: Cannot use import statement outside a module".
i think it has to do with react scripts not being in the index.html like they are in the pure-react one but i added them and still nothing is rendering

After adding Babel in the Class Components lesson, I restarted the server with npm run dev:mock, chose an animal and a breed, pressed Submit, and got this:

SearchParams.js:6 Uncaught ReferenceError: regeneratorRuntime is not defined
    at _requestPets (SearchParams.js:6)
    at requestPets (SearchParams.js:6)
    at onSubmit (SearchParams.js:37)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:270)
    at executeDispatch (react-dom.development.js:561)
    at executeDispatchesInOrder (react-dom.development.js:583)
    at executeDispatchesAndRelease (react-dom.development.js:680)

I don't fully understand the cause or how to solve it, but from a Babel issue I think the gist is that Babel is generating code that depends on babel-polyfill, and we aren't including it. I got the code running again by adding import "babel-polyfill"; to the top of App.js, but that might not be the best solution.

I'm also getting some build warnings that may or may not be related:

⠏ Building hmr-runtime.js...Browserslist: caniuse-lite is outdated. Please run next command npm update caniuse-lite browserslist

WARNING: We noticed you're using the useBuiltIns option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the corejs option.

You should also be sure that the version you pass to the corejs option matches the version specified in your package.json's dependencies section. If it doesn't, you need to run one of the following commands:

npm install --save core-js@2 npm install --save core-js@3
yarn add core-js@2 yarn add core-js@3

The link is in this page:
https://btholt.github.io/complete-intro-to-react-v5/eslint-prettier
In the Prettier Section.
Search for this:
Need to tool around a bit with it before you trust it? Go here. You can see how it works.

The link goes to a 404 page.

I just start a Complete Intro to React v5 course today. And after I arrived at an Dropdown section, I found out an error which it says label.replace is not a function. Any idea what cause is it?

Note: you should probably be ok if you're using the dependencies from the testing branch and not following along with the video tutorial from frontendmasters (by than I mean manually running npm i <new_testing_modules>.

Apparently it's a known issue happening in the last week or so:

facebook/create-react-app#8689

> jest --coverage

 FAIL  src/__test__/SearchParams.test.js
  ✕ SearchParams (22ms)

  ● SearchParams

    SearchParams(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

       7 | 
       8 | test("SearchParams", async () => {
    >  9 |   const { getByTestId, container, getByText } = render(<SearchParams />);
         |                                                 ^
      10 | 
      11 |   const animalDropdown = getByTestId("use-dropdown-animal");
      12 |   expect(animalDropdown.children.length).toEqual(ANIMALS.length + 1);

      at reconcileChildFibers (node_modules/react-dom/cjs/react-dom.development.js:14348:23)
      at reconcileChildren (node_modules/react-dom/cjs/react-dom.development.js:16762:28)
      at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17542:5)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:18596:16)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:188:14)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:316:27)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:267:3)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:214:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:144:23)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:237:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:292:31)
      at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23203:7)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22157:12)
      at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22130:22)
      at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:21756:9)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21188:7)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:24373:3)
      at node_modules/react-dom/cjs/react-dom.development.js:24758:7
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:21903:12)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:24757:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:24840:10)
      at node_modules/@testing-library/react/dist/pure.js:86:25
      at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:21856:12)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:929:14)
      at render (node_modules/@testing-library/react/dist/pure.js:82:26)
      at Object.<anonymous>.test (src/__test__/SearchParams.test.js:9:49)

  console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
    Error: Uncaught [Error: SearchParams(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.]
        at reportException (/home/alexandru/www/react-fem/adopt-me/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
        at innerInvokeEventListeners (/home/alexandru/www/react-fem/adopt-me/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:332:9)
        at invokeEventListeners (/home/alexandru/www/react-fem/adopt-me/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:267:3)
        at HTMLUnknownElementImpl._dispatch (/home/alexandru/www/react-fem/adopt-me/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:214:9)
        at HTMLUnknownElementImpl.dispatchEvent (/home/alexandru/www/react-fem/adopt-me/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
        at HTMLUnknownElement.dispatchEvent (/home/alexandru/www/react-fem/adopt-me/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:144:23)
        at Object.invokeGuardedCallbackDev (/home/alexandru/www/react-fem/adopt-me/node_modules/react-dom/cjs/react-dom.development.js:237:16)
        at invokeGuardedCallback (/home/alexandru/www/react-fem/adopt-me/node_modules/react-dom/cjs/react-dom.development.js:292:31)
        at beginWork$1 (/home/alexandru/www/react-fem/adopt-me/node_modules/react-dom/cjs/react-dom.development.js:23203:7)
        at performUnitOfWork (/home/alexandru/www/react-fem/adopt-me/node_modules/react-dom/cjs/react-dom.development.js:22157:12) Error: SearchParams(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
        at reconcileChildFibers (/home/alexandru/www/react-fem/adopt-me/node_modules/react-dom/cjs/react-dom.development.js:14348:23)
        at reconcileChildren (/home/alexandru/www/react-fem/adopt-me/node_modules/react-dom/cjs/react-dom.development.js:16762:28)
        at mountIndeterminateComponent (/home/alexandru/www/react-fem/adopt-me/node_modules/react-dom/cjs/react-dom.development.js:17542:5)
        at beginWork (/home/alexandru/www/react-fem/adopt-me/node_modules/react-dom/cjs/react-dom.development.js:18596:16)
        at HTMLUnknownElement.callCallback (/home/alexandru/www/react-fem/adopt-me/node_modules/react-dom/cjs/react-dom.development.js:188:14)
        at innerInvokeEventListeners (/home/alexandru/www/react-fem/adopt-me/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:316:27)
        at invokeEventListeners (/home/alexandru/www/react-fem/adopt-me/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:267:3)
        at HTMLUnknownElementImpl._dispatch (/home/alexandru/www/react-fem/adopt-me/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:214:9)
        at HTMLUnknownElementImpl.dispatchEvent (/home/alexandru/www/react-fem/adopt-me/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
        at HTMLUnknownElement.dispatchEvent (/home/alexandru/www/react-fem/adopt-me/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:144:23)
        at Object.invokeGuardedCallbackDev (/home/alexandru/www/react-fem/adopt-me/node_modules/react-dom/cjs/react-dom.development.js:237:16)
        at invokeGuardedCallback (/home/alexandru/www/react-fem/adopt-me/node_modules/react-dom/cjs/react-dom.development.js:292:31)
        at beginWork$1 (/home/alexandru/www/react-fem/adopt-me/node_modules/react-dom/cjs/react-dom.development.js:23203:7)
        at performUnitOfWork (/home/alexandru/www/react-fem/adopt-me/node_modules/react-dom/cjs/react-dom.development.js:22157:12)
        at workLoopSync (/home/alexandru/www/react-fem/adopt-me/node_modules/react-dom/cjs/react-dom.development.js:22130:22)
        at performSyncWorkOnRoot (/home/alexandru/www/react-fem/adopt-me/node_modules/react-dom/cjs/react-dom.development.js:21756:9)
        at scheduleUpdateOnFiber (/home/alexandru/www/react-fem/adopt-me/node_modules/react-dom/cjs/react-dom.development.js:21188:7)
        at updateContainer (/home/alexandru/www/react-fem/adopt-me/node_modules/react-dom/cjs/react-dom.development.js:24373:3)
        at /home/alexandru/www/react-fem/adopt-me/node_modules/react-dom/cjs/react-dom.development.js:24758:7
        at unbatchedUpdates (/home/alexandru/www/react-fem/adopt-me/node_modules/react-dom/cjs/react-dom.development.js:21903:12)
        at legacyRenderSubtreeIntoContainer (/home/alexandru/www/react-fem/adopt-me/node_modules/react-dom/cjs/react-dom.development.js:24757:5)
        at Object.render (/home/alexandru/www/react-fem/adopt-me/node_modules/react-dom/cjs/react-dom.development.js:24840:10)
        at /home/alexandru/www/react-fem/adopt-me/node_modules/@testing-library/react/dist/pure.js:86:25
        at batchedUpdates$1 (/home/alexandru/www/react-fem/adopt-me/node_modules/react-dom/cjs/react-dom.development.js:21856:12)
        at act (/home/alexandru/www/react-fem/adopt-me/node_modules/react-dom/cjs/react-dom-test-utils.development.js:929:14)
        at render (/home/alexandru/www/react-fem/adopt-me/node_modules/@testing-library/react/dist/pure.js:82:26)
        at Object.<anonymous>.test (/home/alexandru/www/react-fem/adopt-me/src/__test__/SearchParams.test.js:9:49)
        at Object.asyncJestTest (/home/alexandru/www/react-fem/adopt-me/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:100:37)
        at resolve (/home/alexandru/www/react-fem/adopt-me/node_modules/jest-jasmine2/build/queueRunner.js:45:12)
        at new Promise (<anonymous>)
        at mapper (/home/alexandru/www/react-fem/adopt-me/node_modules/jest-jasmine2/build/queueRunner.js:28:19)
        at promise.then (/home/alexandru/www/react-fem/adopt-me/node_modules/jest-jasmine2/build/queueRunner.js:75:41)

  console.error node_modules/react-dom/cjs/react-dom.development.js:19527
    The above error occurred in the <SearchParams> component:
        in SearchParams
    
    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

-----------------|---------|----------|---------|---------|----------------------------------
File             | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                
-----------------|---------|----------|---------|---------|----------------------------------
All files        |   41.03 |        0 |   10.53 |   42.11 |                                  
 Pet.js          |       0 |        0 |       0 |       0 | 5,7,8,11                         
 Results.js      |   33.33 |        0 |       0 |   33.33 | 5,11                             
 SearchParams.js |   40.91 |        0 |      10 |   42.86 | 17,24,40,41,43-45,57,58,67,78,79 
 ThemeContext.js |     100 |      100 |       0 |     100 |                                  
 useDropdown.js  |   55.56 |      100 |      20 |   55.56 | 8,14,15,20                       
-----------------|---------|----------|---------|---------|----------------------------------
Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.091s
Ran all test suites.

Even when I clone the repo the breeds section does not work? did you abandon the repo? if so how can I learn from frontendmasters intermediate course without the api working?

Hello, Brian! I am going through your course now. At the point where async call appears (https://btholt.github.io/complete-intro-to-react-v5/async), Parcel out of the box bundles app with "regeneratorRuntime is not defined" error even after I copied your browserlist to my package.json file.

So I tried to resolve this issue and I found out that "last 2 OperaMobile versions" option gives that error. So I want you to check it out and fix browserlist in your Guide. Sorry for bothering for such stupid thing, which it may be, but it still an issue that I encountered with.

My package.json file

{
    "name": "adopt-me",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
        "dev": "parcel src/index.html",
        "format": "prettier \"src/**/*.{js,html}\" --write",
        "lint": "eslint \"src/**/*.{js,jsx}\" --quiet"
    },
    "repository": "https://github.com/ellenripley4/react-adopt-me.git",
    "author": "Andrei Margiev <[email protected]>",
    "license": "MIT",
    "devDependencies": {
        "babel-eslint": "^10.0.3",
        "eslint": "^6.6.0",
        "eslint-config-prettier": "^6.5.0",
        "eslint-plugin-import": "^2.18.2",
        "eslint-plugin-jsx-a11y": "^6.2.3",
        "eslint-plugin-react": "^7.16.0",
        "eslint-plugin-react-hooks": "^2.2.0",
        "parcel-bundler": "^1.12.4",
        "prettier": "^1.18.2"
    },
    "dependencies": {
        "@frontendmasters/pet": "^1.0.3",
        "react": "^16.11.0",
        "react-dom": "^16.11.0"
    },
    "browserslist": [
        "last 2 Chrome versions",
        "last 2 ChromeAndroid versions",
        "last 2 Firefox versions",
        "last 2 FirefoxAndroid versions",
        "last 2 Safari versions",
        "last 2 iOS versions",
        "last 2 Edge versions",
        "last 2 Opera versions",
        "last 2 OperaMobile versions"
    ]
}

Error:

/complete-intro-to-react-v5/src/App.js: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.

  plugins: [
    ['some-plugin', {}],
    ['some-plugin', {}, 'some unique name'],
  ]

Duplicates detected are:
[
  {
    "alias": "/Users/kevinhu/Documents/personal/complete-intro-to-react-v5/node_modules/@babel/plugin-proposal-class-properties/lib/index.js",
    "dirname": "/Users/kevinhu/Documents/personal/complete-intro-to-react-v5",
    "ownPass": false,
    "file": {
      "request": "@babel/plugin-proposal-class-properties",
      "resolved": "/Users/kevinhu/Documents/personal/complete-intro-to-react-v5/node_modules/@babel/plugin-proposal-class-properties/lib/index.js"
    }
  },
  {
    "alias": "base$2",
    "options": {
      "loose": "#__internal__@babel/preset-env__prefer-false-but-true-is-ok-if-it-prevents-an-error"
    },
    "dirname": "/Users/kevinhu/Documents/personal/complete-intro-to-react-v5",
    "ownPass": false
  }
]

The problem seems to be coming from the new version of babel, which has a conflict with other babel plugins.
I got the error to go away by commenting out the plugins in the .babelrc file

{
  "presets": ["@babel/preset-react", "@babel/preset-env"],
  // "plugins": ["@babel/plugin-proposal-class-properties"]
}

When i try to get the breeds, the connection times out and I don't get the data demanded, can you please help me fix this issue as I cannot advance in the course, I am on the effects section of the complete intro to react v5.

I got a error caused by the “Details” Component. It seems that the parameter this.props.id pass to pet.animal is wrong.

import React from 'react';
import pet from '@frontendmasters/pet';

class Details extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true
    };
  }

  componentDidMount() {
    pet
      .animal(this.props.id)
      .then(({ animal }) => {
        this.setState({
          name: animal.name,
          animal: animal.type,
          location: `${animal.contact.address.city}, ${animal.contact.address.state}`,
          description: animal.description,
          media: animal.photos,
          breed: animal.breeds.primary,
          loading: false
        });
      })
      .catch(err => this.setState({ error: err }));
  }
  render() {
    if (this.state.loading) {
      return (<h1>loading … </h1>);
    }

    const { animal, breed, location, description, name } = this.state;

    return (
      <div className="details">
        <div>
          <h1>{name}</h1>
          <h2>{`${animal} — ${breed} — ${location}`}</h2>
          <button>Adopt {name}</button>
          <p>{description}</p>
        </div>
      </div>
    );
  }
}
export default Details;

Perhaps I'm out of place as a newcomer, but I have a suggestion I think you should take into account for "intro" courses.

You are clearly an expert, and so you take a lot of shortcuts when coding. Unfortunately, this causes me to get confused. For example (one of many), you destructure code to make it look more elegant. The cost is that I'm now worrying about learning shortcut concepts like this (and the others) instead of focusing on react, the entire reason I'm here. I'm having to pause just to read over the code going "okay, what did I just write? How would this look normally [to me]," and then refactor it without your shortcuts in order to digest the react information such as how useEffect works. I'm determined, but it is a deterrent.

I could understand using this in intermediate courses, or having a mini JS shortcuts lesson at the very beginning with in-depth examples (opposed to showing something once at full-speed) but I think it would be beneficial for any "into-to" course, which is designed for beginners, to limit your shortcuts, tricks, and elegant code, unrelated to the core concept, so that users may focus on what they came for.

tldr, I am unable to immediately absorb your teachings on react pieces like useEffect because I'm having to unpack your JS/JSX shortcuts first.

Again, I admit to being new, and I understand the purpose and effectiveness of your shortcuts (and even the shortcuts themselves with outside materials)... it is just personally discouraging to have to stop so often on an intro course because I am only used to seeing long-handed explicit code. Something that would work for me personally is a 'refactor' episode at the end where all of these things can be implemented, showing us how to save time after the material has been learned. I am learning a lot however and I would like to thank you for teaching this course.

Why I get this problem. When I refresh page Details (server render) I get this. I hope you and everyone give some solutions to solve this problem. I thank you, guys!

When you map into the in the Carousel.tsx, the image is not rendered because it needs a return().

`photos.map((photo, index)=>{
return(
<img
key={photo}
onClick={this.handleIndexClick}
data-index={index}
src={photo}
className={index === active ? "active" : ""}
alt="animal thumbnail"
/>

)

})`

this was how i fixed that issue, if theres anyone that this code worked perfectly for you, can you tell me why it didn't worked for please

I am using the same code as the repo

useEffect(() => {
    setBreeds([]);
    setBreed("");

    pet.breeds(animal).then(({ breeds }) => {
      const breedStrings = breeds.map(({ name }) => name);
      setBreeds(breedStrings);
    }, console.error);
  }, [animal]);

But I get the error message: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

This seems to be because setBreeds(breedStrings) is used inside useEffect(). Is anyone else getting this error?

As I was typing the Result.js I noticed my submit button stopped working. If I press submit or enter nothing changes and I get the 'Pet Not Found'. The dropdowns work perfectly so I don't know what's going on. Is there something I did wrong? I'm not getting any errors and it seems like it works perfectly fine otherwise. I tried to do some patchwork but it isn't changing anything. This is the first time I've ever even touched JavaScript React so I'm sorry, but I'm absolutely clueless.

I'm getting errors in my console in Chrome however:

Uncaught ReferenceError: regeneratorRuntime is not defined
at _requestPets (SearchParams.js:6)
at requestPets (SearchParams.js:6)
at onSubmit (SearchParams.js:39)
at HTMLUnknownElement.callCallback (react-dom.development.js:336)
at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
at invokeGuardedCallback (react-dom.development.js:440)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:454)
at executeDispatch (react-dom.development.js:584)
at executeDispatchesInOrder (react-dom.development.js:609)
at executeDispatchesAndRelease (react-dom.development.js:713)

react-dom.development.js:475 Uncaught ReferenceError: regeneratorRuntime is not defined
at _requestPets (SearchParams.js:6)
at requestPets (SearchParams.js:6)
at onSubmit (SearchParams.js:39)
at HTMLUnknownElement.callCallback (react-dom.development.js:336)
at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
at invokeGuardedCallback (react-dom.development.js:440)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:454)
at executeDispatch (react-dom.development.js:584)
at executeDispatchesInOrder (react-dom.development.js:609)
at executeDispatchesAndRelease (react-dom.development.js:713)

SearchParams.js:6 Uncaught ReferenceError: regeneratorRuntime is not defined
at _requestPets (SearchParams.js:6)
at requestPets (SearchParams.js:6)
at onSubmit (SearchParams.js:39)
at HTMLUnknownElement.callCallback (react-dom.development.js:336)
at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
at invokeGuardedCallback (react-dom.development.js:440)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:454)
at executeDispatch (react-dom.development.js:584)
at executeDispatchesInOrder (react-dom.development.js:609)
at executeDispatchesAndRelease (react-dom.development.js:713)

react-dom.development.js:475 Uncaught ReferenceError: regeneratorRuntime is not defined
at _requestPets (SearchParams.js:6)
at requestPets (SearchParams.js:6)
at onSubmit (SearchParams.js:39)
at HTMLUnknownElement.callCallback (react-dom.development.js:336)
at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
at invokeGuardedCallback (react-dom.development.js:440)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:454)
at executeDispatch (react-dom.development.js:584)
at executeDispatchesInOrder (react-dom.development.js:609)
at executeDispatchesAndRelease (react-dom.development.js:713)

Anyone any idea what the problem might be? My code is, if everything's correct, the exact same as the original except for the extra plugins I had to install to make things work.

Hello, Brian. In "Persisting state with Context Hooks" part of video course on Frontend Masters, you resolved the problem with ThemeContext by fixing <a> tag to <Link> tag on the Details.js page. But you did not provide this fix in your guide, so when people are copying code from your guide without watching a course, they will encounter this problem too.

After configuring and installing babel packages. I recieve this ugly error

C:\Users\Daniel\Desktop\Adopt ME\src\App.js: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this
error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.

package.json
"devDependencies": { "@babel/cli": "^7.7.0", "@babel/core": "^7.0.0", "@babel/plugin-proposal-class-properties": "^7.0.0", "@babel/preset-env": "^7.0.0", "@babel/preset-react": "^7.7.0", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^10.0.3", "cross-env": "^6.0.3", "eslint": "^6.5.1", "eslint-config-prettier": "^6.4.0", "eslint-plugin-import": "^2.18.2", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-react": "^7.16.0", "eslint-plugin-react-hooks": "^2.1.2", "parcel-bundler": "^1.9.7", "prettier": "^1.18.2" }, "dependencies": { "@frontendmasters/pet": "^1.0.3", "@reach/router": "^1.2.1", "react": "^16.11.0", "react-dom": "^16.11.0" },
Installing @babel/cli & babel-core": "^7.0.0-bridge.0 give back sam error.

Anyone knows how to handle this error?

import React {useEffect} from 'react';
import pet, { ANIMALS } from "@frontendmasters/pet";

useEffect(() => {
pet.breeds("dog").then(console.log, console.error); //not getting data
},[]);