Next.js Discord

Discord Forum

How can I Build my Website Normally

Answered
Rawi N posted this in #help-forum
Open in Discord
hello i would like to ask i have been trying to build m app but i still got alots of errors

57:206  Error: `'` can be escaped with `'`, `‘`, `'`, `’`.  react/no-unescaped-entities
59:25  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
59:25  Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.  jsx-a11y/alt-text
79:178  Error: `'` can be escaped with `&apos;`, `&lsquo;`, `&#39;`, `&rsquo;`.  react/no-unescaped-entities
86:25  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element

./src/pages/index.tsx
56:121  Error: `'` can be escaped with `&apos;`, `&lsquo;`, `&#39;`, `&rsquo;`.  react/no-unescaped-entities
62:13  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element

./src/pages/services.tsx
67:25  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
67:25  Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.  jsx-a11y/alt-text

./src/pages/_document.tsx
7:7  Warning: Do not use `<title>` element with `<Head />` component from `next/document`. Titles should defined at the page-level using `<Head />` from `next/head` instead. See: https://nextjs.org/docs/messages/no-title-in-document-head  @next/next/no-title-in-document-head

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
- info Linting and checking validity of types .

i am new at nextjs i am so confuse how to fix it thankyou
if you need my code i can provide my code in the forum
Answered by joulev
This is a ts error, but it doesn’t look like your code is buggy, rather the typing of react-reveal is buggy. Where did you get the typings from
View full answer

13 Replies

@Rawi N hello i would like to ask i have been trying to build m app but i still got alots of errors 57:206 Error: `'` can be escaped with `&apos;`, `&lsquo;`, `&#39;`, `&rsquo;`. react/no-unescaped-entities 59:25 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element 59:25 Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text 79:178 Error: `'` can be escaped with `&apos;`, `&lsquo;`, `&#39;`, `&rsquo;`. react/no-unescaped-entities 86:25 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element ./src/pages/index.tsx 56:121 Error: `'` can be escaped with `&apos;`, `&lsquo;`, `&#39;`, `&rsquo;`. react/no-unescaped-entities 62:13 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element ./src/pages/services.tsx 67:25 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element 67:25 Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text ./src/pages/_document.tsx 7:7 Warning: Do not use `<title>` element with `<Head />` component from `next/document`. Titles should defined at the page-level using `<Head />` from `next/head` instead. See: https://nextjs.org/docs/messages/no-title-in-document-head @next/next/no-title-in-document-head info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules - info Linting and checking validity of types . i am new at nextjs i am so confuse how to fix it thankyou if you need my code i can provide my code in the forum
They are eslint errors; each of them is accompanied by a link that explains them in details, read those links
and i am confuse in this error i try search it in google but it still confusing for me
57:206  Error: `'` can be escaped with `&apos;`, `&lsquo;`, `&#39;`, `&rsquo;`.  react/no-unescaped-entities
what about this one ?
Type error: Type '{ children: Element; bottom: true; }' is not assignable to type 'IntrinsicAttributes & FadeProps'.
  Property 'children' does not exist on type 'IntrinsicAttributes & FadeProps'.

  46 |
  47 |                 <div className="text-center p-5 text-3xl">
> 48 |                     <Fade bottom>
     |                      ^
  49 |
  50 |                         <h6 style={{ color: 'red' }}>What the Startup About?</h6>
  51 |                     </Fade>

Failed to compile.


I have already
import Fade from 'react-reveal/Fade'

when i try run dev all of this work fine but when i use run build everything is error
Answer
I am using vscode but after I ran the npm run build for the first time this error started to happen
no, as in where do you get the types of the package react-reveal from. to my knowledge the typing of this package is not available
if you hold ctrl/cmd and click on "react-reveal/Fade", you will go to a file, what is the path to that file
after looking a bit more i think react-reveal is unmaintained and is a dead project, you should probably find and use an alternative
Ohh I think your right I think I will use tailwin animation then
yes, last commit is in 2018 and...
Oh thanks