Storybook Server V7

[distant oar]

Trying to upgrade my project to Storybook v7 + @storybook/server.

When I run storybook dev -p 6006 I get:

Error: Invalid value of '@storybook/server' in the 'framework' field of Storybook config.

Here's my config.

module.exports = {
  "stories": ["../stories/**/button.@(json)"],
  "addons": ["@storybook/addon-links", "@storybook/addon-essentials"],
  "framework": "@storybook/server",
  "core": {
    "builder": "@storybook/builder-vite"
  },
  "features": {
    // "storyStoreV7": true
  },
  docs: {
    autodocs: true
  }
};

Storybook Server V7

[sick moat]

hey @distant oar! I'm wondering if you were able to resolve this? sorry that nobody got back to you beforehand!

[distant oar]

Hi @sick moat , nope I didn't resolve it. I haven't revisited.

I haven't checked for any updated docs either

[sick moat]

thanks for the quick response!

<@&1104071723713835068> - any ideas?

[brazen gale]

Did you upgrade the dependencies manually? If so, you should instead run "npx storybook@latest upgrade"

It looks like your config is still following the 6.5 format

[distant oar]

I think I tried both

[zenith thistle]

Try @storybook/server-webpack5

[fast marlin]

I haven't looked at how the core.builder option works, but I don't think "builder": "@storybook/builder-vite" would work. Since we are using Angular's builder that uses webpack. I don't know if that option is even being considered. I don't have it set in my projects and I don't think new projects initialize with it set, for Angular.

Also, if you manually upgraded, do you switch to using the Angular, builder? storybook dev and storybook build are not supported for Angular, at the moment, so you would configure it in angular.json and use ng run my-proj:storybook. The docs install troubleshooting list the options, but the README has an example, if needed. https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular

[distant oar]

Tried npx storybook@latest upgrade followed by npx storybook@next automigrate

ok figured it out.

# main.js
module.exports = {
  "stories": ["../stories/**/button.@(json)"],
  "addons": ["@storybook/addon-links", "@storybook/addon-essentials"],
  "framework": "@storybook/server-webpack5",
  "core": {
    "builder": "@storybook/builder-vite"
  },
  "features": {
    // "storyStoreV7": true
  },
  docs: {
    autodocs: true
  }
};

works…

The storybook project is nested in another project. The postcss.config.cjs and tsconfig.json files in the parent folders were causing errors. I added empty postcss.config.cjs and tsconfig.json files and we're all good.

https://github.com/storybookjs/storybook/issues/21038 helped me out

Had to set the

"storyStoreV7": false in main.js