下一个 JS 构建无法与撇号一起使用

Question

这是正在运行构建，但是，

import styles from '../styles/Home.module.css'
    
    export default function Home() {
      return (
        
        <div className={styles.container}>
          <title>Filmydom</title>
          <h1>Filmydom</h1>
          <tagline>Lets be Filmy</tagline>
          <br />
          <br />
          <h3>Coming Soon</h3>
        </div>
      )
    }

这不是

import styles from '../styles/Home.module.css'
    
    export default function Home() {
      return (
        
        <div className={styles.container}>
          <title>Filmydom</title>
          <h1>Filmydom</h1>
          <tagline>Let's be Filmy</tagline>
          <br />
          <br />
          <h3>Coming Soon</h3>
        </div>
      )
    }

只是因为标语中含有“'”。

这发生在我尝试在 firebase 上构建和部署时。

如何使用撇号构建。

Answer 1

tagline

是有效的 HTML 元素吗？我想知道这是否会导致这种奇怪的行为。

否则可以尝试字符串文字：

export default function Home() {
      return (
        
        <div className={styles.container}>
          <title>Filmydom</title>
          <h1>Filmydom</h1>
          <tagline>{`Let's be Filmy`}</tagline>
          <br />
          <br />
          <h3>Coming Soon</h3>
        </div>
      )
    }

Answer 2

您可以使用

'

来成功构建撇号。

Answer 3

我能够通过用通用 html 符号替换撇号来清除这样的错误，如下所示：

空格 ( ) 是

感叹号（！）是!

双引号 (“) 是 "

数字符号 (#) 是 #

百分号 (%) 是 %

逗号 (,) 是 ,

连字符 (-) 是 -

句点 (.) 是 .

斜杠 (/) 是 /

当然... 撇号 (') 是 '

Example
Error prone
<p>Let's connect!</p>

Clean
<p>Let&#39;s connect!</p>

Answer 4

我刚刚使用以下代码更新了 .eslintrc.json

"react/no-unescaped-entities": "off"