btholt/citr-v7-project

Projects for Complete Intro to React v7 and Intermediate v4

citr-v7-project's Issues

npx eslint on App.js throws an error

PS C:\Users*******\Desktop\adopt-me> npx eslint src/App.js

Oops! Something went wrong! :(

ESLint: 8.8.0

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users*\Desktop\adopt-me\node_modules@eslint\eslintrc\universal.js
require() of ES modules is not supported.
require() of C:\Users*\Desktop\adopt-me\node_modules@eslint\eslintrc\universal.js from C:\Users*\Desktop\adopt-me\node_modules\eslint\lib\linter\linter.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename universal.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users*\Desktop\adopt-me\node_modules@eslint\eslintrc\package.json.

at Object.Module._extensions..js (internal/modules/cjs/loader.js:1149:13)
at Module.load (internal/modules/cjs/loader.js:977:32)
at Function.Module._load (internal/modules/cjs/loader.js:877:14)
at Module.require (internal/modules/cjs/loader.js:1019:19)
at require (C:\Users\*******\Desktop\adopt-me\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at Object.<anonymous> (C:\Users\*******\Desktop\adopt-me\node_modules\eslint\lib\linter\linter.js:27:9)
at Module._compile (C:\Users\*******\Desktop\adopt-me\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
at Module.load (internal/modules/cjs/loader.js:977:32)
at Function.Module._load (internal/modules/cjs/loader.js:877:14)

render not working inside App

Hello,

when I'm using "render " inside App.js I have this error,
"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."

I follow the same code as the course.

my App.js :

import React from 'react';
import {render} from "react-dom";
import SearchParams from "./SearchParams";
const App = () => {
  return (
    <div>
      <h1>Adopt Me!</h1>
      <SearchParams />
    </div>
  );
};
render(<App/>, document.getElementById("root"));

React-router-dom v 6.2.1 not working on firefox ?

after configuring project as this screenshot,

when App.js looks like

and working on firefox v 101, the different routes typing " / " in or " /details/1 " or clicking on each Pet component does not render what chrome does. what can be happening here?

package.json looks like

localhost:1234 404 Page not found potential solution

When the laptop is newer, try install a newer version of node (i.e. node 17) and then clear cache to reinstall everything.
My work laptop was newer and I was following step by step but still getting 404 Page not found until I install a newer version of node. My personal laptop was older so it worked fine without the newer version of node.

TypeError: images is undefined

TypeError: images is undefined
Pet
src/Pet.jsx:5:6

2 | const { name, animal, breed, images, location, id } = props;
3 |
4 | let hero = "http://pets-images.dev-apis.com/pets/none.jpg";

5 | if (images.length) {
| ^ 6 | hero = images[0];
7 | }
8 |

removing

if (images.length) {
hero = images[0];
}

fixes the issue, the app gets "adopt me" images

Image content not available through HTTPS

Please make image content available through HTTPS (pets-images.dev-apis.com). Text content can be accessed by both http and https, whereas images cannot. When deploying the app to gh-pages for example, you cannot view them. Hopefully it's a quick fix.