Skip to content

WIP: Enable stencil SSR for react consumer app#151

Open
rriemann wants to merge 5 commits into
ec-europa:ecl-v5-devfrom
rriemann:react-consumer-refactor
Open

WIP: Enable stencil SSR for react consumer app#151
rriemann wants to merge 5 commits into
ec-europa:ecl-v5-devfrom
rriemann:react-consumer-refactor

Conversation

@rriemann

@rriemann rriemann commented Apr 26, 2026

Copy link
Copy Markdown

I try to test stencil SSR in the react consumer app.

So far, it is not working. Running npm run dev gives:

> @ecl/ecl-webcomponents-react-consumer@0.25.3 dev
> npm run copy && vite


> @ecl/ecl-webcomponents-react-consumer@0.25.3 copy
> ncp node_modules/@ecl/ecl-webcomponents/dist/ecl-webcomponents/build public/build

node:internal/modules/esm/get_format:219
  throw new ERR_UNKNOWN_FILE_EXTENSION(ext, filepath);
        ^

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /var/home/rriemann/Documents/Projects/CNECT/Simpl/ecl-webcomponents/packages/ecl-webcomponents-react-consumer/node_modules/@ecl/ecl-webcomponents-react/lib/index.ts
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:219:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:245:36)
    at defaultLoad (node:internal/modules/esm/load:120:22)
    at async ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:483:32)
    at async ModuleJob._link (node:internal/modules/esm/module_job:115:19) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

Node.js v22.13.1

Note that I had to downgrade some dependencies to install stencil SSR. I created a feature request to the stencil repo for support of more recent vite versions:

stenciljs/output-targets#792

This fixes the error:

/ecl-webcomponents-react-consumer (ecl-v5-dev) [127]> toolbox run --container vitepress npm install
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: @ecl/ecl-webcomponents-react-consumer@0.25.3
npm error Found: vite@8.0.9
npm error node_modules/vite
npm error   dev vite@"8.0.9" from the root project
npm error   peer vite@"*" from @vitejs/devtools@0.1.15
npm error   node_modules/@vitejs/devtools
npm error     peerOptional @vitejs/devtools@"^0.1.0" from vite@8.0.9
npm error
npm error Could not resolve dependency:
npm error peer vite@"^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" from @vitejs/plugin-react@4.7.0
npm error node_modules/@vitejs/plugin-react
npm error   dev @vitejs/plugin-react@"4.7.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /home/rriemann/.npm/_logs/2026-04-25T09_41_40_700Z-eresolve-report.txt
npm error A complete log of this run can be found in: /home/rriemann/.npm/_logs/2026-04-25T09_41_40_700Z-debug-0.log
@rriemann

Copy link
Copy Markdown
Author

The problem is apparently a typescript export in:

https://github.com/ec-europa/ecl-webcomponents/blob/ecl-v5-dev/packages/ecl-webcomponents-react/package.json#L5

@planctus patched something similar for vue in bc9a60e

Could you do it again for react?

@rriemann rriemann changed the title Enable stencil SSR for react consumer app WIP: Enable stencil SSR for react consumer app Apr 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant