This is running build but,

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>
      )
    }

This is not

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>
      )
    }

Just because the tagline contains " ' ".

This happened when I was trying to build and deploy on firebase.

How to build with Apostrophe.

This is running build but,

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>
      )
    }

This is not

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>
      )
    }

Just because the tagline contains " ' ".

This happened when I was trying to build and deploy on firebase.

How to build with Apostrophe.

• javascript
• node.js
• reactjs
• react-native
• next.js

4 Answers 4

Is tagline a valid HTML Element? I wonder if that could be contributing to this odd behavior.

Otherwise could try string literal:

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>
      )
    }

You can use ' for the Apostrophe to build successfully.

I was able to clear an error like this by replacing the apostrophe with the universal html symbol like the following:

Space ( ) is &#32

Exclamation mark (!) is &#33

Double quotation (“) is &#34

Number sign (#) is &#35

Percent sign (%) is &#37

Comma (,) is &#44

Hyphen (-) is &#45

Period (.) is &#46

Slash (/) is &#47

And of course... Apostrophe (') is &#39

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

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

I just updated .eslintrc.json with this following code

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