bug: stencil dev mode with React component wrappers

[MarcHbb]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.23

Current Behavior

I've followed the guidelines from documentation and succeed to have my stencil component created in react-library, which is imported in my next app. It works !

But when trying to run stencil start command (--dev --watch) to have live update while updating components.
I had an import error saying @react-library/dist/my-component does not exists

Expected Behavior

Having my next app udpated with my stencil component updated when editing it

System Info

No response

Steps to Reproduce

Follow the documentation about integrating stencil component in react environnement
Then run pnpm start in /stencil folder

Code Reproduction URL

private

Additional Information

In dev mode I figure out that in the output react wrappers, it was still looking for in /dist/components/my-component.js in my stencil package

but in dev mode, component are served in /www folder and only types are exported in /dist

Tried to add type: "www" in reactOutputTarget, my react wrappers was still looking for /dist/components/my-component.js

Tried to add a condition in stencil config :

{
	type: "dist-custom-elements",
	externalRuntime: false,
	dir: isDevMode ? "www/build" : "dist/components",
}

The output is my react wrapper update perfectly and now instead of having /dist/components/my-component.js I have
/build/www/my-component.js

[johnjenkins]

Hey! 👋
can you try with https://stenciljs.com/docs/config#builddist ?

[MarcHbb]

Hello ! Thanks for your answer
Not sure If i get it right, but when building with buildDist set to false, the output in my react wrapper still importing from stencil /dist folder.

stencil config :

import type { Config } from "@stencil/core";
import { reactOutputTarget } from "@stencil/react-output-target";

// const isDevMode = process.argv.includes("--dev");

export const config: Config = {
	namespace: "stencil",
	buildDist: false,
	outputTargets: [
		reactOutputTarget({
			// Relative path to where the React components will be generated
			outDir: "../react-library/lib/components/stencil-generated/",
		}),
		{
			type: "www", // Serve your components during development
			serviceWorker: null, // Disable service workers
		},
		// dist-custom-elements output target is required for the React output target
		{
			type: "dist-custom-elements",
			externalRuntime: false,
		},
	],
	devServer: {
		openBrowser: false, // Don't open the browser by default
	},
};

output (in react-library/lib) :

'use client';

/**
 * This file was automatically generated by the Stencil React Output Target.
 * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
 */

/* eslint-disable */

import { CustomButton as CustomButtonElement, defineCustomElement as defineCustomButton } from "@stencil-custom/dist/components/custom-button.js";
import { MyComponent as MyComponentElement, defineCustomElement as defineMyComponent } from "@stencil-custom/dist/components/my-component.js";
import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
import { createComponent } from '@stencil/react-output-target/runtime';
import React from 'react';

type CustomButtonEvents = NonNullable<unknown>;

export const CustomButton: StencilReactComponent<CustomButtonElement, CustomButtonEvents> = /*@__PURE__*/ createComponent<CustomButtonElement, CustomButtonEvents>({
    tagName: 'custom-button',
    elementClass: CustomButtonElement,
    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
    react: React,
    events: {} as CustomButtonEvents,
    defineCustomElement: defineCustomButton
});

type MyComponentEvents = NonNullable<unknown>;

export const MyComponent: StencilReactComponent<MyComponentElement, MyComponentEvents> = /*@__PURE__*/ createComponent<MyComponentElement, MyComponentEvents>({
    tagName: 'my-component',
    elementClass: MyComponentElement,
    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
    react: React,
    events: {} as MyComponentEvents,
    defineCustomElement: defineMyComponent
});

As you can see, we still importing from @stencil-custom/dist/components/custom-button.js but there's only .d.ts files in dev mode in /dist folder

This is my /dist folder :

[johnjenkins]

I believe buildDist should be set to true 🙂

[MarcHbb]

For development ?
From the doc

default: true (prod), false (dev)
Defaults to false when building for development and true when building for production

Anyway I've tested with buildDist set to true and it still import from /dist folder on development mode ...

[MarcHbb]

I've tried to remove the --dev from the command line.
====> stencil build --watch --serve
So this way, it's always importing from /dist folder, and when I make an update, it live updated in the output dir. That is working fine (I dont know all the the cons of using prod build for development but I have no choice)

But still this is another issue.... My next app is not importing from stencil but from react-library. So even if the output is live updated in my react-library (/lib folder), the /dist folder in react-library is not updated, so my next app still not have the update.
I don't know if it is clear, but when using stencil build --watch --serve, i need also to update (build) my react-library /dist folder to have the live update in my next app. I don't know how to do that