Stencil doesn't start app-roote HELP!

Nicolehoefler19 — Thu, 23 Apr 2020 13:37:59 +0000

I'm building an electron app with stencil. I have the newest version but Electron starts with index.html instead of app-home.tsx. Also I get an error for a JSX.Element but I don't know why. Maybe this is the reason why. May you could help me? I don't know what to do. Did I do sth wrong? I have updatet stencil-router, stencil-core and stencil itself. I doesn't start app-roote.tsx.

app-roote.tsx

import { Component, h } from '@stencil/core';


@Component({
  tag: 'app-root',
  styleUrl: 'app-root.css',
  shadow: true
})
export class AppRoot {

  render() {
    return (
      <div>
        <header>
        </header>

        <main>
          <stencil-router historyType="hash">
            <stencil-route-switch scrollTopOffset={0}>
              <stencil-route url='/' component='app-home' exact={true} />
              <stencil-route url='/profile/:name' component='app-profile' />
              <stencil-route url='/bewertung' component='app-bewertung' />
            </stencil-route-switch>
          </stencil-router>
        </main>
        <footer> 
        </footer>
      </div>
    );
  }
}

state-tunnel.d.ts:

import '../stencil.core';
import { FunctionalComponent } from "../stencil.core";
import { SubscribeCallback } from '../declarations';
declare function defaultConsumerRender(subscribe: SubscribeCallback<string>, renderer: Function): JSX.Element; //there is the error and in all JSX 
export declare function createProviderConsumer<T extends object>(defaultState: T, consumerRender?: typeof defaultConsumerRender): {
    Provider: FunctionalComponent<{
        state: T;
    }>;
    Consumer: FunctionalComponent<{}>;
    wrapConsumer: (childComponent: any, fieldList: Extract<keyof T, string>[]) => ({ children, ...props }: any) => JSX.Element;
    injectProps: (childComponent: any, fieldList: Extract<keyof T, string>[]) => void;
};
export {};

Index.html:

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <title>Stencil Starter App</title>
  <meta name="Description" content="Welcome to the Stencil App Starter. You can use this starter to build entire apps all with web components using Stencil!">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=8.0">
  <meta name="theme-color" content="#16161d">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta http-equiv="x-ua-compatible" content="IE=Edge"/>
  <link href="/Praesentationsbewerter/stencil-electron-st/src/global/app.css" rel="stylesheet">
  <script src="/build/app.js"></script>

  <link rel="apple-touch-icon" href="/assets/icon/icon.png">
  <link rel="icon" type="image/x-icon" href="/assets/icon/favicon.ico">
  <link rel="manifest" href="/manifest.json">
</head>
<body>
  <header-leonie></header-leonie>
  <app-root></app-root>
  <footer-leonie></footer-leonie>

</body>
</html>

app-home.tsx:

import { Component, h } from '@stencil/core';

@Component({
  tag: 'app-home',
  styleUrl: 'app-home.css',
  shadow: true
})
export class AppHome {

  render() {
    return (
      <div class='app-home'>
        <p>
          Herzlich Willkommen beim Präsentationsbewerter
        </p>

        <stencil-route-link url='/profile/stencil'>
          <button>
            Starten
          </button>
        </stencil-route-link>
      </div>
    );
  }
}

DEV Community: Nicolehoefler19

Stencil doesn't start app-roote HELP!