Support Storybook v7 for upgrading

[RyanClementsHax]

Describe the bug

storybook-addon-next doesn't fully support storybook v7 yet, but it should to help projects migrate.

Your minimal, reproducible example

N/A

Steps to reproduce

N/A

Expected behavior

N/A

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

N/A

storybook-addon-next version

N/A

Additional context

No response

[RyanClementsHax]

I'm currently running into an issue with webpack when upgrading examples/nextv13. I'm reaching out to storybook for help on this. The code is on the https://github.com/RyanClementsHax/storybook-addon-next/tree/sb-7 branch

[unpunnyfuns]

So, before I even get to the stage at looking at your branch, I would expect you to at least describe the problem.

[RyanClementsHax]

Oh please forgive me for my poor etiquete. When I do the following

1. yarn install in root of repo to install the addon's dependencies
2. yarn watch in root of repo to build the addon
3. yarn install in examples/nextv13 to install the example's dependencies
4. yarn storybook in examples/nextv13 to run storybook for the example

I get the following error.

ERR! TypeError: Cannot read properties of undefined (reading 'indexOf')
ERR!     at getFullTemplatePath (/home/ryanclementshax/dev/storybook-addon-next/examples/nextv13/node_modules/html-webpack-plugin/index.js:1027:18)
ERR!     at hookIntoCompiler (/home/ryanclementshax/dev/storybook-addon-next/examples/nextv13/node_modules/html-webpack-plugin/index.js:174:22)
ERR!     at <anonymous> (/home/ryanclementshax/dev/storybook-addon-next/examples/nextv13/node_modules/html-webpack-plugin/index.js:104:9)
ERR!     at Array.forEach (<anonymous>)
ERR!     at <anonymous> (/home/ryanclementshax/dev/storybook-addon-next/examples/nextv13/node_modules/html-webpack-plugin/index.js:103:20)
ERR!     at Hook.eval [as call] (eval at create (/home/ryanclementshax/dev/storybook-addon-next/examples/nextv13/node_modules/tapable/lib/HookCodeFactory.js:14:14), <anonymous>:7:1)
ERR!     at Hook.CALL_DELEGATE (/home/ryanclementshax/dev/storybook-addon-next/examples/nextv13/node_modules/tapable/lib/Hook.js:14:14)
ERR!     at createCompiler (/home/ryanclementshax/dev/storybook-addon-next/examples/nextv13/node_modules/webpack/lib/webpack.js:81:28)
ERR!     at create (/home/ryanclementshax/dev/storybook-addon-next/examples/nextv13/node_modules/webpack/lib/webpack.js:134:16)
ERR!     at webpack (/home/ryanclementshax/dev/storybook-addon-next/examples/nextv13/node_modules/webpack/lib/webpack.js:158:32)
ERR!  TypeError: Cannot read properties of undefined (reading 'indexOf')
ERR!     at getFullTemplatePath (/home/ryanclementshax/dev/storybook-addon-next/examples/nextv13/node_modules/html-webpack-plugin/index.js:1027:18)
ERR!     at hookIntoCompiler (/home/ryanclementshax/dev/storybook-addon-next/examples/nextv13/node_modules/html-webpack-plugin/index.js:174:22)
ERR!     at <anonymous> (/home/ryanclementshax/dev/storybook-addon-next/examples/nextv13/node_modules/html-webpack-plugin/index.js:104:9)
ERR!     at Array.forEach (<anonymous>)
ERR!     at <anonymous> (/home/ryanclementshax/dev/storybook-addon-next/examples/nextv13/node_modules/html-webpack-plugin/index.js:103:20)
ERR!     at Hook.eval [as call] (eval at create (/home/ryanclementshax/dev/storybook-addon-next/examples/nextv13/node_modules/tapable/lib/HookCodeFactory.js:14:14), <anonymous>:7:1)
ERR!     at Hook.CALL_DELEGATE (/home/ryanclementshax/dev/storybook-addon-next/examples/nextv13/node_modules/tapable/lib/Hook.js:14:14)
ERR!     at createCompiler (/home/ryanclementshax/dev/storybook-addon-next/examples/nextv13/node_modules/webpack/lib/webpack.js:81:28)
ERR!     at create (/home/ryanclementshax/dev/storybook-addon-next/examples/nextv13/node_modules/webpack/lib/webpack.js:134:16)
ERR!     at webpack (/home/ryanclementshax/dev/storybook-addon-next/examples/nextv13/node_modules/webpack/lib/webpack.js:158:32)

I think I'm missing something simple here. It's worth noting the dependencies of the example.

{
  "name": "nextv13",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "storybook": "storybook dev -p 6006 -s public",
    "build-storybook": "storybook build -s public",
    "serve-storybook": "serve storybook-static"
  },
  "dependencies": {
    "next": "^13.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sass": "^1.55.0"
  },
  "devDependencies": {
    "@babel/core": "^7.19.6",
    "@storybook/addon-actions": "^7.0.0",
    "@storybook/addon-essentials": "^7.0.0",
    "@storybook/addon-links": "^7.0.0",
    "@storybook/react-webpack5": "^7.0.0-alpha.0",
    "babel-loader": "^9.0.0",
    "serve": "^14.0.1",
    "storybook": "^7.0.0",
    "storybook-addon-next": "link:../../"
  }
}

and the storybook config

module.exports = {
  stories: [
    '../stories/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx)'
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    'storybook-addon-next'
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {}
  }
}

[IanVS]

This addon is no longer needed when using Storybook 7, it was turned into a dedicated framework instead. So, rather than using @storybook/react-webpack5 with this addon, you should use the @storybook/nextjs framework instead. Please see https://storybook.js.org/blog/integrate-nextjs-and-storybook-automatically for details.

Or, maybe there are reasons to continue using this addon rather than the official framework?

Edit: I see now you're the maintainer of this addon, and you have a note in the readme about this addon being deprecated. So I'm a little confused why you'd want to make the addon work in v7.

[RyanClementsHax]

The idea was to attempt to make migration easy. There are some breaking changes when going from storybook-addon-next to @storybook/nextjs like with how the router is configured for stories as one example of a friction point. I was hoping to make it easy, but it seams that a migration to another storybook framework might be needed anyway. I'm beginning to doubt the value of supporting SB 7 in this addon.

Alas, I'm going to keep trying. It was my fault for assuming this migration would be easy and just a matter of me bumping the peer dependencies of the addon's package.json lol

[JReinhold]

I'll let you decide if you want to upgrade this addon or not, I think the use case for a simpler migration path for users is valid, but there are of course always trade ofs.

However I see in your dependencies you list "@storybook/react-webpack5": "^7.0.0-alpha.0", which I can only imagine will break a couple of places, since that version is more than 6 months older than the rest of your Storybook dependencies. try removing -alpha.0 and see if that gets you further.

[RyanClementsHax]

Yeah, after considering this further, it seems that a migration would force adopting some framework anyway which defeats the purpose of what I'm trying to do here. Instead I'm considering making the migration as easy as possible with good docs and references.

Before I do this, does anyone have any contrasting opinions?

[github-actions[bot]]

This issue has been automatically marked stale because it it received no activity for 60 days. If you wish to keep this open, please leave a comment. Thanks.

[github-actions[bot]]

This issue has been automatically closed because it received no activity for 60 days. If you think this was closed by accident, please leave a comment. Thanks.