[Bug] Missing "./viewport" specifier in "storybook" package

[jkole822]

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:

{
  ...
  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
    "serve-storybook": "pnpm dlx http-server ./storybook-static"
  },
  "devDependencies": {
    "@chromatic-com/storybook": "^3.2.4",
    "@storybook/addon-essentials": "^8.6.0-beta.0",
    "@storybook/addon-interactions": "^8.6.0-beta.0",
    "@storybook/blocks": "^8.6.0-beta.0",
    "@storybook/test": "^8.6.0-beta.0",
    "@tailwindcss/postcss": "^4.0.0",
    "@types/common-tags": "^1.8.4",
    "postcss": "^8.4.49",
    "prettier": "^3.4.2",
    "storybook": "^8.6.0-beta.0",
    "storybook-solidjs": "^1.0.0-beta.6",
    "storybook-solidjs-vite": "^1.0.0-beta.6",
    "tailwindcss": "^4.0.0",
    "typescript": "^5.7.3",
    "vite": "^6.0.7",
    "vite-plugin-solid": "^2.11.0"
  },
  "dependencies": {
    "@faker-js/faker": "^9.4.0",
    "@kobalte/core": "^0.13.7",
    "@solid-primitives/media": "^2.3.0",
    "common-tags": "^1.8.2",
    "solid-js": "^1.9.4",
    "uuid": "^11.0.5"
  }
}

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

• OS: iOS 15.4 Beta
• Node.js version: 20.13
• NPM version: 10.5.2

[LiamKarlMitchell]

So far I have only had it work on storybook v 9.0.0-alpha.1 + custom edits to resolve other errors with older version of the tsup

#23

storybookjs/storybook#31083

[jkole822]

Can you show your working setup?

[jkole822]

Also, not sure why the storybook peer dependency is set to "next".

[LiamKarlMitchell]

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": "pnpm@10.8.0+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
use eslintPlugins not plugins as property name in build.

[LiamKarlMitchell]

I assume its a somewhat temporary issue and would be fixed soon fingers crossed.

I have this issue too

[lcoronelp]

@LiamKarlMitchell Thanks for your setup!, I think there's a mistake here:

thirdparty/@storybook-solidjs/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 😅)

[LiamKarlMitchell]

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: ***@***.***>

[shilman]

I think all that needs to happen is for the solid package depend on the latest storybook package rather than the next package, if anyone wants to open a PR. Alternatively, if someone wants to upgrade solid to work with v9 I believe there's another issue for that.

I think all that needs to happen is for the solid package depend on the latest storybook package rather than the next package, if anyone wants to open a PR. Alternatively, if someone wants to upgrade solid to work with v9 I believe there's another issue for that.

Agreed. The only demo I can find from Storybook is this one:
https://stackblitz.com/github/storybookjs/sandboxes/tree/next/solid-vite/default-ts/after-storybook?file=package.json&preset=node

Unfortunately, it does not work

[LiamKarlMitchell]

PR Created

[Hdnaye]

+1