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

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

Apr 10 '25 14:04 jkole822

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

https://github.com/storybookjs/solidjs/issues/23

https://github.com/storybookjs/storybook/discussions/31083

Apr 11 '25 10:04 LiamKarlMitchell

Can you show your working setup?

Apr 12 '25 23:04 jkole822

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

Apr 12 '25 23:04 jkole822

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 use eslintPlugins not plugins as property name in build.

Apr 13 '25 00:04 LiamKarlMitchell

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

Apr 13 '25 01:04 LiamKarlMitchell

I have this issue too

Apr 13 '25 21:04 ghost

@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 😅)

Apr 15 '25 20:04 lcoronelp

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 https://github.com/storybookjs/solidjs/issues/26#issuecomment-2807450515, 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) https://github.com/storybookjs/solidjs/issues/26#issuecomment-2807450515

@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 https://github.com/storybookjs/solidjs/issues/26#issuecomment-2807450515, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAPAP3MMAZAY3Q5U5B7D4W32ZVVP5AVCNFSM6AAAAAB23Z6AUOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQMBXGQ2TANJRGU . You are receiving this because you were mentioned.Message ID: @.***>

Apr 15 '25 21:04 LiamKarlMitchell

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.

Apr 16 '25 03:04 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.

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

Apr 16 '25 07:04 ghost

PR Created

Apr 16 '25 08:04 LiamKarlMitchell

+1

Apr 24 '25 07:04 Hdnaye

@shilman The created PR fixes the current state to work. It says

1 workflow awaiting approval

Is a maintainer able to run the workflow to see if it passes? Thanks

Apr 27 '25 00:04 LiamKarlMitchell

hey I had the same error and was able to fix it with: https://github.com/storybookjs/solidjs/issues/18#issuecomment-2574893685

versions:

storybook: ^8.5.3
storybook-solidjs: 1.0.0-beta.7
storybook-solidjs-vite: 1.0.0-beta.7

May 18 '25 00:05 nmathew98

same error

May 20 '25 10:05 minhdtb

@nmathew98 this doesn't work for me, it loads but with a ReferenceError: React is not defined instead of the component :(

BUT! making a patch with pnpm with the code from https://github.com/storybookjs/solidjs/issues/26#issuecomment-2808817035 PR, works great (with 8.6.14)

May 20 '25 12:05 lcoronelp

@nmathew98 this doesn't work for me, it loads but with a ReferenceError: React is not defined instead of the component :(

BUT! making a patch with pnpm with the code from #26 (comment) PR, works great (with 8.6.14)

yea I ran into that after haha, assumed it was working just because it launched. I think its trying to use the wrong jsx because of: https://github.com/storybookjs/solidjs/issues/23

May 23 '25 10:05 nmathew98

@nmathew98 this doesn't work for me, it loads but with a ReferenceError: React is not defined instead of the component :(

BUT! making a patch with pnpm with the code from #26 (comment) PR, works great (with 8.6.14)

@lcoronelp

yea this works great now, tried to downgrade but it ends up just throwing in ci for some reason, thanks!!

May 24 '25 03:05 nmathew98

Hey folks!

Struggled with this all day yesterday, but got it to work. Packed everything into a lib that creates a working scaffold - create-solid-storybook

Just do:

npx create-solid-storybook my-solid-app
cd my-solid-app
npm run storybook

And thats it

May 25 '25 20:05 kachurun

Hey folks!

Struggled with this all day yesterday, but got it to work. Packed everything into a lib that creates a working scaffold - create-solid-storybook

Just do:
npx create-solid-storybook my-solid-app
cd my-solid-app
npm run storybook
And thats it

Hello ! Thanks for sharing this ! Is it something that is possible actually with Solidstart or is it not there yet ?

May 30 '25 13:05 nicolas-geysse

I haven't used SolidStart and I don't know what problems it might have. Most likely, it all depends on how you are going to use it, the usual client components will definitely work regardless of the environment. I think problems can only arise with components tied to the router. Try it and if you encounter problems, create an issue in https://github.com/kachurun/create-solid-storybook

May 30 '25 15:05 kachurun