bug: React Output Target, incorrect JSX path on generated file #404
Description
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.7.2
Stencil Framework Output Target
React
Stencil Framework Output Target Version
0.5.3
Current Behavior
I've followed https://stenciljs.com/docs/react documentation to initiate a project with a stencil-lib and a react-lib.
Then I've set the includeImportCustomElements option to true on the config.
After a new build, if I check the generated proxiesFile, the JSX import point to the wrong place:
// react-library/lib/components/stencil-generated/index.ts
/* eslint-disable */
/* tslint:disable */
/* auto-generated react proxies */
import { createReactComponent } from './react-component-lib';
import type { JSX } from 'stencil-library/dist/components';
import { defineCustomElement as defineMyFormField } from 'stencil-library/dist/components/my-form-field.js';
import { defineCustomElement as defineMyText } from 'stencil-library/dist/components/my-text.js';
export const MyFormField = /*@__PURE__*/createReactComponent<JSX.MyFormField, HTMLMyFormFieldElement>('my-form-field', undefined, undefined, defineMyFormField);
export const MyText = /*@__PURE__*/createReactComponent<JSX.MyText, HTMLMyTextElement>('my-text', undefined, undefined, defineMyText);
Expected Behavior
The import type { JSX } should default to its correct path
(in my case, it would be import type { JSX } from 'stencil-library';
Steps to Reproduce
- Follow the guide https://stenciljs.com/docs/react
- Update the react output config to use
includeImportCustomElements - Check the generated file
Code Reproduction URL
https://github.com/dpellier/stencil-react-issue/tree/main
Additional Information
You can see the whole project in the given reproduction link.
Quick overview of stencil.config:
import { Config } from '@stencil/core';
import { reactOutputTarget } from '@stencil/react-output-target';
export const config: Config = {
namespace: 'stencil-library',
outputTargets: [
{
type: 'dist-custom-elements',
generateTypeDeclarations: true,
},
{
type: 'www',
serviceWorker: null,
},
reactOutputTarget({
componentCorePackage: 'stencil-library',
proxiesFile: '../react-library/lib/components/stencil-generated/index.ts',
includeImportCustomElements: true,
customElementsDir: 'dist/components',
}),
],
testing: {
browserHeadless: "new",
},
};
and stencil-library package.json:
{
"name": "stencil-library",
"version": "0.0.1",
"description": "Stencil Component Starter",
"main": "dist/index.cjs.js",
"module": "dist/index.js",
"es2015": "dist/esm/index.js",
"es2017": "dist/esm/index.js",
"types": "dist/types/index.d.ts",
"collection": "dist/collection/collection-manifest.json",
"collection:main": "dist/collection/index.js",
"files": [
"dist/",
"loader/"
],
"scripts": {
"build": "stencil build --docs",
"start": "stencil build --dev --watch --serve",
"test": "stencil test --spec --e2e",
"test.watch": "stencil test --spec --e2e --watchAll",
"generate": "stencil generate"
},
"dependencies": {
"@stencil/core": "^4.7.0"
},
"devDependencies": {
"@stencil/react-output-target": "^0.5.3",
"@types/jest": "^29.5.6",
"@types/node": "^16.18.11",
"jest": "^29.7.0",
"jest-cli": "^29.7.0",
"puppeteer": "21.1.1"
},
"license": "MIT"
}