next 13 support

[bonesoul]

Describe the bug

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/next
npm ERR!   next@"13.0.0" from the root project
npm ERR!   peer next@"^8.1.1-canary.54 || >=9.0.0" from [email protected]
npm ERR!   node_modules/next-seo
npm ERR!     next-seo@"5.8.0" from the root project
npm ERR!   1 more (next-sitemap)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0" from [email protected]
npm ERR! node_modules/storybook-addon-next
npm ERR!   dev storybook-addon-next@"1.6.9" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/next
npm ERR!   peer next@"^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0" from [email protected]
npm ERR!   node_modules/storybook-addon-next
npm ERR!     dev storybook-addon-next@"1.6.9" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\shala\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\shala\AppData\Local\npm-cache\_logs\2022-10-25T22_25_34_802Z-debug-0.log
npm ERR! code 1
npm ERR! path E:\source\vizesizgezi
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c cd dataset && npm install && cd ../frontend && npm install && cd ../migrator && npm install && cd ../tasks && npm install && cd ../tools/image_gen && npm install && cd ../..

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\shala\AppData\Local\npm-cache\_logs\2022-10-25T22_25_21_001Z-debug-0.log

Your minimal, reproducible example

n/a

Steps to reproduce

upgrade next to 13.0.0.

Expected behavior

should install properly

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

any

storybook-addon-next version

1.6.9

Additional context

No response

[carneiroDotDev]

I simply deleted the storybook-addon-next from my package.jsonand all the images seem to be rendering fine. Notice there was an important change in how the <Image /> component works and maybe that is why the package wasn't needed on my side anymore (I am doing direct imports from next public folder).

[pm0u]

I also ran into errors with this plugin. I opted to follow the guide from storybook here to force unoptimized images. I also ran into an issue with Next 13 that the next/link component would not render the child anchor when you pass a React element as the child (text nodes seem to work fine) - found a workaround here: storybookjs/storybook#19813

Edit: the issue with next/link has been resolved in storybook v7 (still in alpha)

[RyanClementsHax]

Thank you all for your patience :)

[github-actions]

🎉 This issue has been resolved in version 1.7.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[bonesoul]

@RyanClementsHax
package.json still lacks next-13 in peer dependencies:

https://github.com/RyanClementsHax/storybook-addon-next/blob/main/package.json#L83

and errors with next-13 projects:

npm ERR! Could not resolve dependency:
npm ERR! peer next@"^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0" from [email protected]
npm ERR! node_modules/storybook-addon-next
npm ERR!   dev storybook-addon-next@"1.7.0" from the root project

[RyanClementsHax]

crap

[RyanClementsHax]

Try v1.7.1

I just pushed an update

[Karibash]

Using the new font optimization from Next.js v13 causes an error.
https://nextjs.org/docs/basic-features/font-optimization

bootstrap:27 Uncaught Error: @next/font/google failed to run or is incorrectly configured.
If you just installed `@next/font`, please try restarting `next dev` and resaving your file.

Read more: https://nextjs.org/docs/basic-features/font-optimization
    at ./node_modules/@next/font/google/index.js (index.js:15:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/pages/_app.tsx (stories.tsx:5:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./.storybook/preview.js (globals.css?b3a1:68:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./.storybook/preview.js-generated-config-entry.js (preview.js:15:1)
./node_modules/@next/font/google/index.js @ index.js:15
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/pages/_app.tsx @ stories.tsx:5
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./.storybook/preview.js @ globals.css?b3a1:68
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./.storybook/preview.js-generated-config-entry.js @ preview.js:15
__webpack_require__ @ bootstrap:24
__webpack_exec__ @ generated-stories-entry.cjs:6
(anonymous) @ generated-stories-entry.cjs:6
__webpack_require__.O @ chunk loaded:23
(anonymous) @ generated-stories-entry.cjs:6
webpackJsonpCallback @ jsonp chunk loading:560
(anonymous) @ main.iframe.bundle.js:1

[kodai3]

Is legacy Image component next/legacy/image supported?

[wfischer42]

@kodai3, I wasn't able to get this working using next/legacy/image, but it worked again after applying the codemod.

[kodai3]

I know it works with codemode but style went wrong at some part. I just used mock while relpacing from legacy to new

import * as NextLegacyImage from 'next/legacy/image';

const OriginalNextImage = NextLegacyImage.default;

Object.defineProperty(NextLegacyImage, 'default', {
  configurable: true,
  value: (props) => <OriginalNextImage {...props} unoptimized loader={({ src }) => src} />,
});