How to properly import a web component to react app?

Question

I have a catalago-component.js which is a web component. I'm trying to use this web component like so:

import React from 'react'
import './../../../assets/catalago-component'
class Loja extends React.Component{
    constructor(props){
        super(props)
        this.state = {}
    }

    render(){
        return(
            <React.Fragment>
                <div className="page-header">
                    <h1 className="page-title">Loja</h1>
                </div>
                <catalago-component></catalago-component>
            </React.Fragment>
        )
    }
}
export default Loja

but every time I run my react app I get this error

src\assets\catalago-component.js
          Line 1:1:       Expected an assignment or function call and instead saw an expression  no-unused-expressions
          Line 1:85:      Expected an assignment or function call and instead saw an expression  no-unused-expressions
          Line 1:399:     Expected an assignment or function call and instead saw an expression  no-unused-expressions
          Line 1:599:     Expected an assignment or function call and instead saw an expression  no-unused-expressions
          ...

but if I do any changes to the app that makes it recompile then it works just fine

how to solve this error forever? I don't want this app breaking every time I run it for the first time

EDIT: I tried to use this web component with pure html and it worked. take a look

https://eduardopreuss.github.io/web-component/

https://github.com/eduardopreuss/web-component

EDIT 2: link to codesandbox using react + web component https://codesandbox.io/s/hopeful-cohen-ut6mv?file=/src/App.js

Answer 1

There is nothing wrong how I imported, it was a eslint error just like @tsecheukfung01 said in the comments. So I added my web component to .eslintignore file and It worked just fine.

more ways to ignore eslint errors here