rramsey
commented
11 months ago I'll add some additional details. I found older instructions at https://ionic.io/blog/how-to-use-storybook-with-stencil which made it sound like everything just worked, except it didn't. It may be down to a vite vs. webpack issue, but I've got the same error with a more complex project with both vite and webpack. The basic instructions are to do the following:
- npm init stencil # when asked, call the project st-sb-test
- cd st-sb-test
- npm install
- npm run build # build your stencil app
- npx sb init --type html
- npm run storybook-build
- npm run build-storybook
- start storybook-static
- Copy files to a web server
I deleted the directory and tried again, but instead of explicitly doing npx sb init --type html I did npx sb init and picked web components and took the defaults for everything else.
Preview.js:
import {defineCustomElements} from '../loader';
defineCustomElements();
/** @type { import('@storybook/web-components').Preview } */
const preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
};
export default preview;my-component.stories.ts:
export default {
// this creates a ‘Components’ folder and a ‘MyComponent’ subfolder
title: 'Components/MyComponent',
};
const Template = (args) => `<my-component first="${args.first}" middle="${args.middle}" last="${args.last}"></my-component>`;
export const Example = Template.bind({});
Example.args = {
first: 'Winnie',
middle: 'The',
last: 'Pooh'
};
partial package.json:
"dependencies": {
"@stencil/core": "^4.7.0"
},
"devDependencies": {
"@storybook/addon-essentials": "^7.5.2",
"@storybook/addon-links": "^7.5.2",
"@storybook/blocks": "^7.5.2",
"@storybook/web-components": "^7.5.2",
"@storybook/web-components-vite": "^7.5.2",
"@types/jest": "^29.5.6",
"@types/node": "^16.18.11",
"jest": "^29.7.0",
"jest-cli": "^29.7.0",
"lit": "^3.0.1",
"puppeteer": "21.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"storybook": "^7.5.2"
},
The error I'm getting is:
index-db936cd2.js:1304 GET https://my.webserver.com/sb/assets/my-component.entry.js net::ERR_ABORTED 404 (Not Found)
index-db936cd2.js:1288 TypeError: Failed to fetch dynamically imported module: https://my.webserver.com/sb/assets/my-component.entry.js undefined
index-db936cd2.js:1028 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'isProxied')my-component.entry.js exists in the dist/esm folder created by stencil's build, but just copying it into assets folder doesn't work. I've tried using the index-HASH.js files that stencil creates in that folder, but no luck. Also tried using dist/cjs/my-component.cjs.entry.js and renaming that, but then I get index-db936cd2.js:1288 ReferenceError: exports is not defined. And I don't know enough to go through the files in dist to find the one I need to rename and copy up to the web server.
Hopefully that helps someone to at least reproduce the problem in storybook.
The frustrating thing is that everything works fine locally. It's only when I build the static files and upload them to the server that I have a problem.
shilman
omarkawach
ShaunEvening
Tragio
marksy
rjborba
Loic57
Describe the bug
I just installed the latest storybook version inside my stencil project. To make the components available I register them to the window as Custom Elements (CustomElementRegistry) with stencils provided loader function. While creating stories now, I encounter the following problems:
argsinside my stories leads to attributeless "show code" results:I guess I have to write my own generic renderer to solve these issues, but I feel like it should be supported by the @storybook/web-components framework. Also, I am a little confused about the existing storybook web component examples, they all seem not to work with web component technologies, but are just using some lit-html renderings to create some HTML instead of loading proper web components.
Additionally, I had to add "@babel/preset-typescript" to my .babelrc.json to make my stories compile, I guess it's rather framework-specific, but I wanted to mention it for future googlers.
To Reproduce
No response
System
Additional context
No response