Building and using a webcomponent in a framework

Stencil
#1

I have a component and when I build it, I encounter some problems. The loader folder was not in the component, but I fixed it to embed it following the discussion in this issue: https://github.com/ionic-team/stencil/issues/1574

The problem is that when I try to use my component in a react app, I am not sure how exactly I am supposed to do that.
I do not want to create an npm package, because I can not publish packages on foreign servers.
In my react I have something like this:

import React from 'react';
import './App.css';
import {applyPolyfills, defineCustomElements} from './web-components/banner/loader'
function App() {
  return (
    <div className="App">
      <header className="App-header">
      <banner-component client-state='{"campaign_id":"29","brand_id":"1","lang":"en","device":"desktop","ftd":1}'></banner-component >
      </header>
    </div>
  );
}
applyPolyfills().then(() => {
  defineCustomElements(window);
});

export default App;

When I try to build the react app, I get a lot of errors, like:


Failed to compile.

./src/web-components/banner/esm/polyfills/dom.js
  Line 15:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 19:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 22:    Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 28:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 32:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 33:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 33:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 34:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 34:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 34:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 39:     Unexpected use of 'self'                                               no-restricted-globals
  Line 107:    Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 107:  Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 107:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

Search for the keywords to learn more about each error.

I am probably doing something wrong in the new version. I watched the training for stencil on udemy and also looked in the documentation, but things seem to have changed and I am missing something.

Do you have any advice about how I could go about this?

The simplest way I could ask this is how I can build the simplest component ( a span wrapper, for example), get the dist and load it in a react app.

The way I managed to run the component eventually is by adding the scripts in the index.html

    <script type="module" src="/assets/stencil/bannercomponent/bannercomponent/bannercomponent.esm.js"></script>
    <script nomodule src="/assets/stencil/bannercomponent/index.mjs"></script>

The problem is that with this solution, the component is not working in edge.