React Integration - the build doesn't include web component files

[Kurzas]

I used the instruction provided on the website https://stenciljs.com/docs/react to integrate Stencil components into the React application. The bundle with React components exists, it can be used, the dev task of the consumer react application works well. However, after running the build task, the individual web component files are not included thus web components are not being loaded as seen on the screen below: I switched to a create-react-app with the default configuration and there everything works fine.

Could you propose a solution for a React app built with vite that would include the web components? A short discord discussion where I discussed this problem: https://discord.com/channels/520266681499779082/1107707233153855559/threads/1225105815208202330

[andresgutgon]

Hi, I manage to ship a StencilJS component and a react wrapper

The component is a iframe wrapper that syncs fields between the react app and the iframe

Here is the live demo: https://latitude-embed.vercel.app/embedding

The code is here

1. webcomponent
2. react library
3. React app using react library

This is the config

// ./packages/client/webcomponents/stencil.config.ts
import { Config } from '@stencil/core'
import { reactOutputTarget } from '@stencil/react-output-target'

// NOTE: `externalRuntime: false` why?
// Docs: https://stenciljs.com/docs/custom-elements#externalruntime
// This compile in this package `@stencil/core`. Other option would be
// to do it in `@latitude-data/react` by requiring as dependency `@stencil/core`
// But for now because we only have one component I think is fine to ship it here.
// so it has the runtime
export const config: Config = {
  namespace: 'webcomponents',
  outputTargets: [
    { type: 'docs-readme' },
    { type: 'dist' },
    {
      type: 'dist-custom-elements',
      customElementsExportBehavior: 'single-export-module',
      generateTypeDeclarations: true,
      externalRuntime: false,
    },
    reactOutputTarget({
      componentCorePackage: '@latitude-data/webcomponents',
      proxiesFile: '../react/src/webcomponents/index.ts',
      customElementsDir: 'dist/components',
      includeImportCustomElements: true,
    }),
  ],
  testing: {
    browserHeadless: 'new',
  },
}

And very important the config for packages/client/webcomponents/package.json

  "main": "./dist/index.cjs.js",
  "module": "./dist/index.js",
  "collection": "dist/collection/collection-manifest.json",
  "collection:main": "dist/collection/index.js",
  "unpkg": "dist/webcomponents/webcomponents.esm.js",
  "types": "./dist/components/index.d.ts",
  "exports": {
    "./dist/loader": {
      "import": "./dist/loader/index.js",
      "types": "./dist/loader/index.d.ts"
    },
    "./dist/components": {
      "import": "./dist/components/index.js",
      "types": "./dist/components/index.d.ts"
    },
    "./dist/components/latitude-embed.js": {
      "import": "./dist/components/latitude-embed.js",
      "types": "./dist/types/components.d.ts"
    }
  },
  "files": [
    "dist/"
  ],

I hope this can help

[Kurzas]

Hi, thank you for your comment! I managed to make it work differently too, but I think the documentation should contain a working example so that it could be used as a reference for everyone :)

[christian-bromann]

@andresgutgon is there anything you believe we can improve in our docs to be more clear on shipping StencilJS components with React wrappers?

[andresgutgon]

Yes, I would do the example with Rollup as the build system for the React library. I think it is the most commonly used. And the react app using the react library I would do it with Vite. I think a bit the same, today is used a lot.

Oh, and I would differentiate the targets with one full example for each target. Why I would use one target and not the other? those explanations would be lovely. I know you have a targets section but wasn't clear enough for me. The examples would help.

Lastly in the react integration would be super nice to explain how is configured the package.json exports.