[Bug] Missing "./viewport" specifier in "storybook" package #26
Comments
|
So far I have only had it work on storybook v |
|
Can you show your working setup? |
|
Also, not sure why the storybook peer dependency is set to "next". |
|
package.json Note: The storybook-solidjs-vite and storybook-solidjs are in a folder and have been tweaked slightly to work-around errors and I am using 9.0.0-alpha.1 as thats what I saw working in an example. {
"name": "vite-template-solid",
"version": "0.0.0",
"description": "",
"type": "module",
"private": true,
"scripts": {
"start": "vite",
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},
"license": "MIT",
"devDependencies": {
"@chromatic-com/storybook": "^1.9.0",
"@storybook/addon-essentials": "9.0.0-alpha.1",
"@storybook/addon-interactions": "9.0.0-alpha.1",
"@storybook/addon-links": "9.0.0-alpha.1",
"@storybook/test": "9.0.0-alpha.1",
"solid-devtools": "^0.34.0",
"storybook": "9.0.0-alpha.1",
"storybook-solidjs-vite": "link:thirdparty/@storybook-solidjs/packages/frameworks/solid-vite",
"storybook-solidjs": "link:thirdparty/@storybook-solidjs/packages/renderers/solid",
"typescript": "5.7.3",
"vite": "^6.0.0",
"vite-plugin-solid": "^2.11.6"
},
"dependencies": {
"@previewjs/plugin-solid": "^14.0.1",
"@solidjs/router": "^0.15.3",
"konva": "^9.3.20",
"solid-js": "^1.9.5"
},
"workspaces": {
"packages": [
"thirdparty/@storybook-solidjs",
"thirdparty/@storybook-solidjs/packages/frameworks/solid-vite",
"thirdparty/@storybook-solidjs/packages/renderers/solid"
]
},
"packageManager": "[email protected]+sha512.0e82714d1b5b43c74610193cb20734897c1d00de89d0e18420aebc5977fa13d780a9cb05734624e81ebd81cc876cd464794850641c48b9544326b5622ca29971"
}.storybook/main.ts - Require was not available. import type { StorybookConfig } from 'storybook-solidjs-vite';
import { join, dirname } from 'path';
import { createRequire } from 'module'; // Import createRequire
const require = createRequire(import.meta.url); // Create a require function
/**
* This function is used to resolve the absolute path of a package.
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
*/
function getAbsolutePath(value: string): string {
return dirname(require.resolve(join(value, 'package.json')));
}
const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
getAbsolutePath('@storybook/addon-links'),
getAbsolutePath('@storybook/addon-essentials'),
//getAbsolutePath('@chromatic-com/storybook'),
getAbsolutePath('@storybook/addon-interactions'),
],
framework: {
name: getAbsolutePath('storybook-solidjs-vite'),
options: {},
},
};
export default config;.storybook/preview.ts - Don't think any changes to this one from template. import '../src/index.css';
const preview: Preview = {
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
};
export default preview;thirdparty/@storybook-solidjs/package.json Downgraded tsup
"tsup": "^8.3.0",thirdparty/@storybook-solidjs/scripts/prepare/build.ts
|
|
I assume its a somewhat temporary issue and would be fixed soon fingers crossed. |
|
I have this issue too |
|
@LiamKarlMitchell Thanks for your setup!, I think there's a mistake here:
Actually, it should be esbuildPlugins, not It also works with 9.0.0-alpha.2 (I tried to create a private package to apply this change without adding all the content to my repo, but I failed miserably 😅) |
|
Sounds like a promising find!
…On Wed, 16 Apr 2025, 8:43 am LCoronelP, ***@***.***> wrote:
@LiamKarlMitchell <https://github.com/LiamKarlMitchell> Thanks for your
setup!, I think there's a mistake here:
***@***.***/scripts/prepare/build.ts
use eslintPlugins instead of plugins as the property name in build.
Actually, it should be *esbuildPlugins*, not eslintPlugins.
It also works with *9.0.0-alpha.2* (I tried to create a private package
to apply this change without adding all the content to my repo, but I
failed miserably 😅)
—
Reply to this email directly, view it on GitHub
<#26 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAPAP3MMAZAY3Q5U5B7D4W32ZVVP5AVCNFSM6AAAAAB23Z6AUOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQMBXGQ2TANJRGU>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
*lcoronelp* left a comment (storybookjs/solidjs#26)
<#26 (comment)>
@LiamKarlMitchell <https://github.com/LiamKarlMitchell> Thanks for your
setup!, I think there's a mistake here:
***@***.***/scripts/prepare/build.ts
use eslintPlugins instead of plugins as the property name in build.
Actually, it should be *esbuildPlugins*, not eslintPlugins.
It also works with *9.0.0-alpha.2* (I tried to create a private package
to apply this change without adding all the content to my repo, but I
failed miserably 😅)
—
Reply to this email directly, view it on GitHub
<#26 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAPAP3MMAZAY3Q5U5B7D4W32ZVVP5AVCNFSM6AAAAAB23Z6AUOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQMBXGQ2TANJRGU>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
|
I think all that needs to happen is for the solid package depend on the |
Agreed. The only demo I can find from Storybook is this one: Unfortunately, it does not work |
|
PR Created |
|
+1 |
|
@shilman The created PR fixes the current state to work.
Is a maintainer able to run the workflow to see if it passes? |
Describe the bug
When attempting to run storybook, I am receiving this error:
=> Failed to build the preview
Error: Missing "./viewport" specifier in "storybook" package
This is my package.json:
I am also seeing this warning when installing:
Issues with peer dependencies found
.
└─┬ storybook-solidjs-vite 1.0.0-beta.7
└─┬ @storybook/builder-vite 9.0.0-alpha.17
├── ✕ unmet peer storybook@^9.0.0-alpha.17: found 8.6.12
└─┬ @storybook/csf-plugin 9.0.0-alpha.17
└── ✕ unmet peer storybook@^9.0.0-alpha.17: found 8.6.12
Environment
The text was updated successfully, but these errors were encountered: