Repro Repo for Stencil#2731
This repo contains a stencil lib with 1 component that uses a web worker and 3 "apps" that use 3 different bundlers: Webpack, Rollup and Vite
Builds dist
and dist-custom-elements
with experimentalImportInjection
(needed for Rollup/Vite)
Bugs:
dist-custom-elements
does not output worker files and tries to load files from/dist/components/assets/
.dist/components/index.d.ts
missingdefineCustomElementMyComponent
, makes it hard to load- Build suggests to set
dist/index.js
as packageJson.module, but it is empty, which breaks top level imports
cd stencil-workers
npm i
Works out of the box if using /loader
Bugs:
- Breaks during build if you try to manually import a component (see Stencil Bug#1)
- this is non-trivial to fix, as the file path depends on the original file location, not the dist
cd webpack5
npm i
npm run build
npm run serve
Bugs:
- Breaks during runtime (worker files not added to dist) if you try to use
/loader
- Need to use
@web/rollup-plugin-import-meta-assets
to fix
- Need to use
- Breaks during runtime (worker files not added to dist) if you try to manually import a component
- Breaks during build if you try to use
@web/rollup-plugin-import-meta-assets
(see Stencil Bug#1) - Need to use
rollup-plugin-copy
to manually copy workers todist/assets
- Breaks during build if you try to use
cd rollup
npm i
npm run build
npm run serve
Build (npm run build
) works out of the box if using /loader
Bugs:
- Breaks during runtime when serving via
npm run dev
(using either methods of importing)- Tries to load files that do not exist
- Even with a copy plugin, could not get this to work correctly
- Breaks during runtime when importing manually (
dist-custom-elements
)- Need to use
vite-plugin-static-copy
to copy worker files manually to./dist/assets
(see Stencil Bug#1)
- Need to use
cd vite
npm i
npm run build
npm run serve # prod
npm run dev # dev
Build works out of the box if using /loader
Bugs:
- Breaks during runtime when using
/loader
- Need to use
@chialab/esbuild-plugin-meta-url
to make it work
- Need to use
- Breaks during runtime when manually importing (
dist-custom-elements
)- Tries to load files that do not exist (see Stencil Bug#1)
- Even with a copy plugin, could not get this to work correctly, because plugin has a bug
cd vite
npm i
npm run build
npm run serve