How to properly import a web component to react app?

user_8904037 0
Viewed 2129

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

web-component reactjs
6 Answers

I think you might want to try something like this:

import Catalago from './../../../assets/catalago-component'

Then use the component like:

<Catalago></Catalago>

Assuming your Web component issomething like this:

class Catalago extends React.Component {
  render() {
    return <speical-web-stuff><speical-web-stuff>
  }
}

See:https://reactjs.org/docs/web-components.html

user_150855780

As said above, you should give your component a name in order to import.

import Catalago from './../../../assets/catalago-component'

However, sth you may pay attention to.

  1. Below syntax expect your component is written in index.js under the folder catalago-component
import Catalago from './assets/catalago-component'   //component locate in file name ```index```

import Catalago from './assets/catalago-component/customizedName.js'

  1. which type of export used in that component
import Catalago from './assets/catalago-component/customizedName.js'  // exporting via ```export default``` keyword

import { Catalago } from './assets/catalago-component/customizedName.js'  //exporting via ```export``` keyword
user_125368610

Inside your webpack.config.js add this line enter image description here

Than you can use your component from anywhere inside project.

import Catalago from 'Components'

user_97815620

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

user_89040370

The way you import your component is perfectly fine. A web-component is nothing more than any other HTMLElement like a <div> or an <a>, meaning this is NOT a React component and cannot be imported and used as such.

Example web-component

export class MyComponent extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `My Webcomponent!`
  }
  
  static get tag() {
    return 'my-component';
  }
}

customElements.define(MyComponent.tag, MyComponent);

Using the above web-component would look something like:

import './../../../assets/MyComponent.js'
...
render() {
   return() {
       <div>
           <my-component></my-component>
       </div>
   }
}
user_139713690 
import Catalago from './../../../assets/catalago-component'
...
render() {
   return() {
       <div>
           <Catalago //other props/>
       </div>
   }
}
Admin1
Related