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.