title: How to Embed StencilJS components inside Storybook React App?
body: <p>I'm trying to integrate <a href="https://stenciljs.com" rel="nofollow noreferrer">Stencil</a> and <a href="https://storybook.js.org/" rel="nofollow noreferrer">Storybook</a> inside the same project. I've been following <a href="https://stenciljs.com/docs/framework-integration" rel="nofollow noreferrer">this set up guide</a> and <a href="https://stenciljs.com/docs/distribution" rel="nofollow noreferrer">this one</a> however one of the steps is to publish the library of components to NPM and <strong>that's not what I want</strong>.</p>
  
  <p>I have this <a href="https://github.com/cesalberca/autentia-ui" rel="nofollow noreferrer">repo</a> which I've configured with components library (<code>src</code> folder) and with the reviewer of those components with Storybook, which resides in the <code>storybook</code> folder.</p>
  
  <p>The problem is that when I compile the components using Stencil and copy the <code>dist</code> folder inside the Storybook app and import the component nothing renders. Tweaking the configuration using <a href="https://storybook.js.org/configurations/add-custom-head-tags/" rel="nofollow noreferrer">custom head tags</a> I was able to import it correctly however no styles where applied.</p>
  
  <p>When I open the network panel there is some error when importing the component:</p>
  
  <p><a href="https://i.stack.imgur.com/D8orx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D8orx.png" alt="Error in console"></a></p>
  
  <p>And thus the component is present in the DOM but with visibility set to hidden, which I think it does when there is an error.</p>
  
  <p>This is the component <code>au-button</code>:</p>
  
  <pre><code>import { Component } from '@stencil/core';
  
  @Component({
    tag: 'au-button',
    styleUrl: 'button.css',
    shadow: true
  })
  export class Button {
    render() {
      return (
        &lt;button class="test"&gt;Hello&lt;/button&gt;
      );
    }
  }
  </code></pre>
  
  <p>Here is the story my component:</p>
  
  <pre><code>import React from 'react';
  import { storiesOf } from '@storybook/react';
  
  import '../components/components.js'
  
  storiesOf('Button', module)
    .add('with text', () =&gt; &lt;au-button&gt;&lt;/au-button&gt;)
  </code></pre>
  
  <p>These are the scripts inside the Storybook app:</p>
  
  <pre><code>"scripts": {
      "storybook": "start-storybook -p 9009",
      "build-storybook": "build-storybook",
      "copy": "cp -R ./../dist/* components"
    },
  </code></pre>
  
  <blockquote>
    <p>And the workflow is as follows:</p>
    
    <ol>
    <li>Launch storybook</li>
    <li>Make changes in the component</li>
    <li>Execute build command</li>
    <li>Execute copy command</li>
    </ol>
  </blockquote>
  
  <p>Also, I would like to automate the developer experience, but after I solve this problem first.</p>
  
  <p>Any ideas of what I could be doing wrong?</p>