ryanclementshax / storybook-addon-next Goto Github PK
View Code? Open in Web Editor NEWA no config Storybook addon that makes Next.js features just work in Storybook
License: MIT License
A no config Storybook addon that makes Next.js features just work in Storybook
License: MIT License
I don't know why I'm facing the same error when I start storybook.
I tried 3 times with 3 different projects and my folder name is just cut off.
https://github.com/FrancoRATOVOSON/coeur-next
Saw the same problem 2 times :
Here's my package.json
"dependencies": {
"next": "12.1.0",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"@babel/core": "^7.17.5",
"@storybook/addon-actions": "^6.4.19",
"@storybook/addon-essentials": "^6.4.19",
"@storybook/addon-interactions": "^6.4.19",
"@storybook/addon-links": "^6.4.19",
"@storybook/builder-webpack5": "^6.4.19",
"@storybook/manager-webpack5": "^6.4.19",
"@storybook/react": "^6.4.19",
"@storybook/testing-library": "^0.0.9",
"@types/node": "17.0.21",
"@types/react": "17.0.39",
"babel-loader": "^8.2.3",
"eslint": "8.10.0",
"eslint-config-next": "12.1.0",
"eslint-plugin-storybook": "^0.5.7",
"storybook-addon-next": "^1.6.1",
"typescript": "4.6.2"
}
And my main.js
module.exports = {
"stories": [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"storybook-addon-next"
],
"framework": "@storybook/react",
"core": {
"builder": "webpack5"
}
}
It's an empty project I created to test the behavior and got the same issue.
^1.6.1
Clicking links for all the examples lead to a page Not Found
, and all of the links under Table of Contents and Supported features do not work, as do some in the contents of the article. Seems like all of the hashed id's are not set for the links to go to that element of the page.
I was able to find the repo for tailwindcss example based on the URL params though, but should be fixed to prevent any confusion
https://storybook.js.org/addons/storybook-addon-next
Not Found
Expected to see a working github page for the Example links, and expected the other links to bring me to other parts of the page
Every time
No response
macOS
Firefox 97.0.1 (64 bit)
1.6.1
No response
Before installing this addon, I was able to enable strict mode in storybook by doing:
reactOptions: {
strictMode: true,
}
in my main.ts
as documented by this issue storybookjs/storybook#12734 and associated PR.
This was working fine, I would see my effects being called twice on mount.
Since adding this package, any combination of strictMode: true
or putting reactStrictMode: true
in the next.config.js
I am using for this addon results in all stories throwing:
Error
Rendered more hooks than during the previous render.
Call Stack
useHook
vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-285286.iframe.bundle.js:12364:13
useMemoLike
vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-285286.iframe.bundle.js:12391:18
useMemo
vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-285286.iframe.bundle.js:12403:10
withOutline
vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-285286.iframe.bundle.js:11886:81
undefined
vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-285286.iframe.bundle.js:12269:21
undefined
vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-285286.iframe.bundle.js:34690:12
undefined
vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-285286.iframe.bundle.js:34739:14
renderWithHooks
vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-285286.iframe.bundle.js:139816:18
mountIndeterminateComponent
vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-285286.iframe.bundle.js:143580:13
beginWork
vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-285286.iframe.bundle.js:145093:16
Is this expected? Do you have an idea right off the bat of what is happening here?
I will fill in a valid reproduction if it's not immediately obvious to you why this might be happening. I believe the one liner in Steps to reproduce
will cause this if you run one of your examples with it.
reactOptions: { strictMode: true }
to your export from .storybook/main.js
.I expect storybook's strict mode API to "just work".
Every time
No response
Mac OS
Next 13.1.1
Storybook 6.5.15
React 18.2.0
1.7.1
No response
After adding this addon to a fresh NextJS and Storybook and storybook-addon-next installation all with default configuration, and attempting to start Storybook, I have an error.
Run commands below
npx create-next-app@latest bug
cd bug
npx sb init
, say yes or no to eslintPlugin question, doesn't make a differencenpm i -D --force storybook-addon-next
(force needed because otherwise peer dependency fails; see #68 which isn't yet released).storybook/main.js
, add 'storybook-addon-nextto the end (or start, no difference) of the
addons` arraynpm run storybook
info @storybook/react v6.4.22
info
info => Loading presets
info => Using implicit CSS loaders
info => Using default Webpack4 setup
ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR! - configuration.module.rules[12].type should be one of these:
ERR! "javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
ERR! -> Module type to use for the module
ERR! at webpack (/path/to/bug/node_modules/webpack/lib/webpack.js:31:9)
ERR! at Object.start (/path/to/bug/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:92:18)
ERR! at async Promise.all (index 0)
ERR! at async storybookDevServer (/path/to/bug/node_modules/@storybook/core-server/dist/cjs/dev-server.js:126:28)
ERR! at async buildDevStandalone (/path/to/bug/node_modules/@storybook/core-server/dist/cjs/build-dev.js:115:31)
ERR! at async buildDev (/path/to/bug/node_modules/@storybook/core-server/dist/cjs/build-dev.js:161:5)
ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR! - configuration.module.rules[12].type should be one of these:
ERR! "javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
ERR! -> Module type to use for the module
ERR! at webpack (/path/to/bug/node_modules/webpack/lib/webpack.js:31:9)
ERR! at Object.start (/path/to/bug/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:92:18)
ERR! at async Promise.all (index 0)
ERR! at async storybookDevServer (/path/to/bug/node_modules/@storybook/core-server/dist/cjs/dev-server.js:126:28)
ERR! at async buildDevStandalone (/path/to/bug/node_modules/@storybook/core-server/dist/cjs/build-dev.js:115:31)
ERR! at async buildDev (/path/to/bug/node_modules/@storybook/core-server/dist/cjs/build-dev.js:161:5)
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
Storybook starts
Every time
No response
1.6.2
I had to install the package with --force
, since #68 is not yet released.
Currently does not work when using the the src directory feature - https://nextjs.org/docs/advanced-features/src-directory.
https://github.com/scpaye506/nextjs-storybook-addon-src-bug
npm install
npm run storybook
As a user, I expected storybook to run when using a src directory, but got the below errors:
ModuleNotFoundError: Module not found: Error: Can't resolve '../styles/globals.css'
Every time
No response
v1.4.4
No response
When developing locally (i.e. yarn watch
in the root directory and yarn storybook
in any of the examples), the storybook command fails unable to find any of the packages required or resolved directly (i.e. require('package')
or require.resolve('package')
.
This repo
yarn watch
in the root repo
yarn storybook
in any of the examples
storybook is able to build and start
Every time
No response
WSL
1.4.3
No response
Nextjs automatically support tsconfig's paths and base url while addon add only root path to module resolution.
export const configureAbsoluteImports = (baseConfig: WebpackConfig): void => void baseConfig.resolve?.modules?.push(path.resolve())
here
https://github.com/StephanAksenchenko/Sb-addon-next-bug
I expect it should work identically
Every time
No response
Os - linux
Node - 16.14.0
v 1.6.2
No response
The following component works in storybook on with [email protected]:
import React from "react";
import Image from "next/image";
export default {
title: "Example/Image",
component: Image,
argTypes: {
backgroundColor: { control: "color" },
},
};
const Template = (args) => (
<Image src="https://via.placeholder.com/100x100" width={100} height={100} />
);
export const ExampleStoryWithNextImage = Template.bind({});
On next v12.1.5, it breaks however (see attached screenshots below).
https://github.com/romandecker/storybook-addon-next-image-issue-mre
npm install
npm run storybook
Note that if you change the version of next
in package.json
to v12.1.4
, and re-run npm install
and npm run storybook
, it will work.
I expected the external image to work with next v12.1.5 just like it did in v12.1.4:
Every time
1.6.2
No response
When using CSS @import in a .css
the below error is thrown.
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
TypeError: url.startsWith is not a function
https://github.com/andykenward/storybook-addon-next/commit/4a67992f3aa3e809944b38eb961e02892bee48a3
your-file.css
file to styles
folder. Perhaps with some css in the file.@import './your-file.css'
into styles/global.css
.yarn storybook
.You should get an error and crash.
To support @import
in .css
files.
Every time
No response
14.18.2
& 16.13.0
1.4.1
This does not happen in version 1.4.0.
I was unable to run storybook in the nextv12 example out of the box. Tried downgrading the next version to the explicit versions in the package.json file but still did not work.
1.6.7 repo
As a user I expected to run storybook
No response
No response
1.6.7
No response
With addon-next in .storybook/main.js and svg's images in introduction.stories.mdx didn't render. I remove storybook-addon-next and images render again.
Edit: But this is a small thing. Otherwise. Removed all boilerplate. Next images as well as mui icons works fine. (thumb up!)
module.exports = {
stories: [
'../stories//*.stories.mdx',
'../stories//*.stories.@(js|jsx|ts|tsx)'
],
addons: [
'storybook-addon-next'
'@storybook/addon-a11y',
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
],
framework: '@storybook/react',
core: {
builder: 'webpack5'
}
}
add 'storybook-addon-next' and run 'npm run storybook
svg should be visible from mdx files
No response
No response
Windows 10
v1.4.3
No response
Just wanted to say thank you for creating this - it's awesome!
When use this plugin with Vite builder Storybook always show the error Invalid Version: undefined
updating
Install Storybook with Vite builder and this plugin
That this plugin could work with Vite builder
No response
MacOS 12.3.1
1.6.4
No response
main
branch failed. 🚨I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main
branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here are some links that can help you:
If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.
The npm token configured in the NPM_TOKEN
environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/
.
If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default "
Authorization and writes" level.
Please make sure to set the NPM_TOKEN
environment variable in your CI with the exact value of the npm token.
Good luck with your project ✨
Your semantic-release bot 📦🚀
Next image loader doesn't support avif format due to the use of the package image-size which doesn't support avif
None
Add an <Image src="mum.avif" />
in a component which has a story.
Run Storybook
Crash with this stack trace:
ModuleBuildError: Module build failed (from ./node_modules/storybook-addon-next/dist/images/next-image-loader-stub.js):
TypeError: unsupported file type: undefined (file: undefined)
at lookup (/Users/johann/Dev/lab/template/node_modules/image-size/dist/index.js:42:11)
at imageSize (/Users/johann/Dev/lab/template/node_modules/image-size/dist/index.js:98:16)
at Object.nextImageLoaderStub (/Users/johann/Dev/lab/template/node_modules/storybook-addon-next/dist/images/next-image-loader-stub.js:12:56)
at processResult (/Users/johann/Dev/lab/template/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:758:19)
at /Users/johann/Dev/lab/template/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:860:5
at /Users/johann/Dev/lab/template/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:400:11
at /Users/johann/Dev/lab/template/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:252:18
at runSyncOrAsync (/Users/johann/Dev/lab/template/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:156:3)
at iterateNormalLoaders (/Users/johann/Dev/lab/template/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:251:2)
at /Users/johann/Dev/lab/template/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:224:4
at /Users/johann/Dev/lab/template/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:834:15
at Array.eval (eval at create (/Users/johann/Dev/lab/template/node_modules/@storybook/builder-webpack5/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)
at runCallbacks (/Users/johann/Dev/lab/template/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:27:15)
at /Users/johann/Dev/lab/template/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:200:4
at /Users/johann/Dev/lab/template/node_modules/graceful-fs/graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
WARN Broken build, fix the error above.
Support avif format
Every time
No response
1.6.9
Could be solved by using a package that supports avif format to get dimensions of images (e.g probe-image-size)
Using storybook-addon-next in combination with builder-vite produces an error once storybook server started.
Reproduce repo link.
I've added instruction to start.
All packages have latest versions.
A warning message:
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more:
Error message is somehow related with next-image-stub.js
:
Uncaught TypeError: Invalid Version: undefined
at new SemVer (semver.js:19:13)
at compare (compare.js:3:3)
at Object.gt (gt.js:2:29)
at node_modules/storybook-addon-next/dist/images/next-image-stub.js (next-image-stub.js:7:22)
at __require2 (chunk-S5KM4IGW.js?v=7ad206d8:18:50)
at node_modules/storybook-addon-next/dist/preview.js (preview.js:7:1)
at __require2 (chunk-S5KM4IGW.js?v=7ad206d8:18:50)
at dep:storybook-addon-next_dist_preview__js:1:16
Branch bug:
https://github.com/dvakatsiienko/next-vite-storybook/tree/bug
http://localhost:6006/
As a user I expect a correctly rendered page.
Every time
1.6.9
No response
I've spent a lot of time with the next/storybook community making sure I've built something that works for them. I'd appreciate it if you could use my addon internally rather than just copy/pasting it.
It would also limit the scope of bugs for you and allow us to collaborate.
What do you think?
Does not add absolute path to the imgix server for the img src.
Sorry no repo...
Use next/image
component in a story with the following configuration:
next.config
images: {
loader: "imgix",
path: "https://my-account.imgix.net",
},
Component with next/image
<Image src={"7f552320-6810-5a2d-8a47-521b22068ae5"} alt={"Alt"} width={42} height={42} />
When running Next (yarn dev
) the img src will automatically be set to https://my-account.imgix.net/7f552320-6810-5a2d-8a47-521b22068ae5
.
When running Storybook the img src will only be 7f552320-6810-5a2d-8a47-521b22068ae5
right now. This results in a load to localhost and a 404 response.
Every time
No response
macOS
v1.6.2
No response
The addon breaks styled-jsx
with SCSS support using either @storybook/preset-scss
or a webpack .scss
rule (see below). The Stackblitz example is based off of this repo's nextv12
example.
https://stackblitz.com/edit/github-quwche?file=README.md
yarn storybook
ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: ~/storybook-addon-next-scss/pages/index.js: Nesting detected at 5:11. Unfortunately nesting is not supported by styled-jsx.
storybook-addon-next
in .storybook/main.js:L6yarn storybook
) and see that Storybook works correctly and displays green text.With a working instance of Next.js and Storybook that supports SCSS in styled-jsx
I expect that this would continue to work after adding storybook-addon-next
.
Every time
No response
1.6.2
No response
Storybook will throw an error TypeError: Cannot redefine property: __esModule
at this line with using [email protected] or later.
none
Working Storybook
Every time
No response
v1.6.6
I did some digging and found that the default import of next/image
has been fixed by this PR.
The built code looks like following, so you need not to redefine __esModule
property on next-image-stub.tsx.
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
I need to wrap my custom StoreProvider
provider in decorator
export const decorators = [
(Story, context) => (
<StoreProvider>
<Story />
</StoreProvider>
),
]
inside my StoreProvider
(react context) got wrote useRouter
hook from nextjs..
because of decorator is render outside from nextjs.. so how can I solve it?
I am using nextjs 13
none, private project
expect next router to be mounted
No response
No response
v1.6.10
No response
When I run the command npm run storybook
with v1.4.1
, the error occurs.
Here is the log.
info @storybook/react v6.4.18
info
info => Loading presets
info => Serving static files from ./.\public at /
(node:14304) DeprecationWarning: You have specified an invalid glob, we've attempted to fix it, please ensure that the glob you specify is valid. See: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#correct-globs-in-mainjs
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Using implicit CSS loaders
info => Using default Webpack4 setup
ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR! - configuration.module.rules[12].type should be one of these:
ERR! "javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
ERR! -> Module type to use for the module
ERR! at webpack (C:\Users\hskco\OneDrive\바탕 화면\dev\next-storybook-image-test\node_modules\webpack\lib\webpack.js:31:9)
ERR! at Object.start (C:\Users\hskco\OneDrive\바탕 화면\dev\next-storybook-image-test\node_modules\@storybook\builder-webpack4\dist\cjs\index.js:92:18)
ERR! at async Promise.all (index 0)
ERR! at async storybookDevServer (C:\Users\hskco\OneDrive\바탕 화면\dev\next-storybook-image-test\node_modules\@storybook\core-server\dist\cjs\dev-server.js:126:28)
ERR! at async buildDevStandalone (C:\Users\hskco\OneDrive\바탕 화면\dev\next-storybook-image-test\node_modules\@storybook\core-server\dist\cjs\build-dev.js:115:31)
ERR! at async buildDev (C:\Users\hskco\OneDrive\바탕 화면\dev\next-storybook-image-test\node_modules\@storybook\core-server\dist\cjs\build-dev.js:161:5)
ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR! - configuration.module.rules[12].type should be one of these:
ERR! "javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
ERR! -> Module type to use for the module
ERR! at webpack (C:\Users\hskco\OneDrive\바탕 화면\dev\next-storybook-image-test\node_modules\webpack\lib\webpack.js:31:9)
ERR! at Object.start (C:\Users\hskco\OneDrive\바탕 화면\dev\next-storybook-image-test\node_modules\@storybook\builder-webpack4\dist\cjs\index.js:92:18)
ERR! at async Promise.all (index 0)
ERR! at async storybookDevServer (C:\Users\hskco\OneDrive\바탕 화면\dev\next-storybook-image-test\node_modules\@storybook\core-server\dist\cjs\dev-server.js:126:28)
ERR! at async buildDevStandalone (C:\Users\hskco\OneDrive\바탕 화면\dev\next-storybook-image-test\node_modules\@storybook\core-server\dist\cjs\build-dev.js:115:31)
ERR! at async buildDev (C:\Users\hskco\OneDrive\바탕 화면\dev\next-storybook-image-test\node_modules\@storybook\core-server\dist\cjs\build-dev.js:161:5)
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! next-storybook-image-test@ storybook: `start-storybook -p 6006`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the next-storybook-image-test@ storybook script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\hskco\AppData\Roaming\npm-cache\_logs\2022-02-06T07_30_05_523Z-debug.log
But It works well with v1.4.0
.
Local
\1. Create a project with next
npx create-next-app test
\2. Install the package
npm install -D storybook-addon-next
\3. Add the addon in main.js
module.exports = {
stories: ["../components/**/*.stories.(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"storybook-addon-next",
],
framework: "@storybook/react",
staticDirs: ["../public"],
};
\4. Run storybook
npm run storybook
Run storybook without errors.
Every time
No response
Here are packages that I installed
"dependencies": {
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"next": "12.0.10",
"react": "17.0.2",
"react-dom": "17.0.2",
"storybook-addon-next": "^1.4.1"
},
"devDependencies": {
"@babel/core": "^7.17.0",
"@storybook/addon-actions": "^6.4.18",
"@storybook/addon-essentials": "^6.4.18",
"@storybook/addon-links": "^6.4.18",
"@storybook/react": "^6.4.18",
"babel-loader": "^8.2.3",
"eslint": "8.8.0",
"eslint-config-next": "12.0.10"
}
v1.4.1
No response
Next.js 12.2 support new link behavior.
From https://nextjs.org/blog/next-12-2#other-improvements
next/link no longer requires manually adding as a child. You can now opt into this behavior in a backward-compatible way.
I added the newNextLinkBehavior
flag in my next config in next.config.js
{
experimental: {
newNextLinkBehavior: true,
}
}
but when I use storybook with the new link behavior it seems to not understand it.
I get
Multiple children were passed to <Link> with `href` of `/` but only one child is supported https://nextjs.org/docs/messages/link-multiple-children
error although in my app this resolves well.
nextjs example with-storybook-app
{
experimental: {
newNextLinkBehavior: true,
}
}
to next.config.js
.
2. Create a component with multiple children inside Link like
import Link from "next/link";
export function MenuItem() {
return (
<Link href="/" >
<div/>
<div/>
</Link>
);
}
import { ComponentMeta, ComponentStory } from "@storybook/react";
import { MenuItem } from "./MenuItem";
export default {
component: MenuItem,
} as ComponentMeta<typeof MenuItem>;
const Template: ComponentStory<typeof MenuItem> = (args) => (
<MenuItem {...args} />
);
export const Regular = Template.bind({});
No error will occur and the new link behavior will be supported
Every time
MacOS Monterey 12.4
Chrome Version 103.0.5060.114 (Official Build) (arm64)
^1.6.7
No response
As of Next 12.1.5, this addon no longer seems to work with Next Image.
Full error message:
Error: Failed to parse src "static/media/public/nyan-cat.png" on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)
at defaultLoader (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:55971:23)
at defaultImageLoader (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:55790:16)
at http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:55755:39
at Array.map (<anonymous>)
at generateImgAttrs (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:55755:24)
at ImageElement (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:55896:183)
at renderWithHooks (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:79513:18)
at mountIndeterminateComponent (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:82339:13)
at beginWork (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:83577:16)
at HTMLUnknownElement.callCallback (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:68473:14)
https://github.com/rsanchez-forks/storybook-addon-next/tree/next-12.1.5-issue/examples/nextv12
examples/nextv12
, run yarn add [email protected]
yarn storybook
As a user, expect next-image to work within Storybook.
Every time
Main branch, Commit hash a7efc09
Next 12.1.4 does not have the same issue.
Hello and thank you for this repo
I suspect this is more a problem with my code than your plugin but this is the issue I'm encountering.
Failed to parse src "static/media/public/logo.jpeg" on next/image
, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)
The image does exist at: http://localhost:6006/logo.jpeg
I have tried #72 and a few other things.
Here is a POC repo - https://github.com/Bowriverstudio/faustwp-storybook
Problem is in this story - components/TestImage/tests/TestImage.stories.jsx
Thank you
https://github.com/Bowriverstudio/faustwp-storybook
Download https://github.com/Bowriverstudio/faustwp-storybook
npm i
npm run storybook
Look at http://localhost:6006/?path=/story/example-testimage--test-image-story
I expect to see an image
No response
No response
macOS
1.6.9
No response
I had a React project and tried to use the addon-next to work properly with Sass, since in my researches it helps with some problems that i was facing when using just the Storybook default config for Sass. But, when I installed sddon-next and tried to build my project, I got an error.
Default config from docs
I expected to build storybook correctly
Every time
1.6.7
No response
Describe the bug
When a mount a <style jsx global>
element I got an error:
ReferenceError: _JSXStyle is not defined
at GlobalStyles (http://localhost:3000/main.iframe.bundle.js:68147:34)
at renderWithHooks (http://localhost:3000/vendors-node_modules_ebay_nice-modal-react_lib_esm_index_js-node_modules_gogaille_sanity-imag-919ca0.iframe.bundle.js:141207:18)
at mountIndeterminateComponent (http://localhost:3000/vendors-node_modules_ebay_nice-modal-react_lib_esm_index_js-node_modules_gogaille_sanity-imag-919ca0.iframe.bundle.js:144033:13)
at beginWork (http://localhost:3000/vendors-node_modules_ebay_nice-modal-react_lib_esm_index_js-node_modules_gogaille_sanity-imag-919ca0.iframe.bundle.js:145271:16)
at HTMLUnknownElement.callCallback (http://localhost:3000/vendors-node_modules_ebay_nice-modal-react_lib_esm_index_js-node_modules_gogaille_sanity-imag-919ca0.iframe.bundle.js:130167:14)
at Object.invokeGuardedCallbackDev (http://localhost:3000/vendors-node_modules_ebay_nice-modal-react_lib_esm_index_js-node_modules_gogaille_sanity-imag-919ca0.iframe.bundle.js:130216:16)
at invokeGuardedCallback (http://localhost:3000/vendors-node_modules_ebay_nice-modal-react_lib_esm_index_js-node_modules_gogaille_sanity-imag-919ca0.iframe.bundle.js:130278:31)
at beginWork$1 (http://localhost:3000/vendors-node_modules_ebay_nice-modal-react_lib_esm_index_js-node_modules_gogaille_sanity-imag-919ca0.iframe.bundle.js:150181:7)
at performUnitOfWork (http://localhost:3000/vendors-node_modules_ebay_nice-modal-react_lib_esm_index_js-node_modules_gogaille_sanity-imag-919ca0.iframe.bundle.js:148993:12)
at workLoopSync (http://localhost:3000/vendors-node_modules_ebay_nice-modal-react_lib_esm_index_js-node_modules_gogaille_sanity-imag-919ca0.iframe.bundle.js:148924:5)
And my GlobalStyles
component:
import theme from "guidelines/Theme/theme";
const GlobalStyles = () => (
<style global jsx>{`
html {
min-height: 100vh;
}
body,
#__next {
/**
* Mobile viewport bug fix
* @see https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
*/
min-height: 100vh;
min-height: fill-available;
background-color: ${theme.color.background.cream};
}
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
`}</style>
);
Additional context
Next.js v12.0.7
When a component that's in a story calls a function that calls getConfig
, Storybook will error:
next_config__WEBPACK_IMPORTED_MODULE_0__["default"]() is undefined
loadConfig@http://localhost:6006/main.iframe.bundle.js:206:65
[email protected]:Vinnl/repro-storybook-addon-next-getconfig.git
git clone [email protected]:Vinnl/repro-storybook-addon-next-getconfig.git
npm install
npm run storybook
A story with the page is opened, showing
{
someKey: "some value",
}
Instead, you see the error described above.
Every time
No response
1.5.0
No response
Since updating to version 1.6.4, I'm getting the above error. Our project does not use a tsconfig.json file. As I understand, support for tsconfig.json was added in this version.
Might this be a bug or can one configure to not search for tsconfig.json?
https://github.com/wolfram-ostec/storybook-addon-next-no-tsconfig
I expected Storybook to run without a tsconfig.json
Every time
No response
v1.6.4
No response
Receiving the following error message: Invalid src prop (http://loremflickr.com/640/480/transport) on
next/image, hostname "loremflickr.com" is not configured under images in your
next.config.js``
Issue happens with Next.js >= v12.1.5 https://github.com/vercel/next.js/releases/tag/v12.1.5
Remote Images from an external domain should work as they did before Next.js v12.1.5
Every time
No response
v1.6.2
No response
From a fresh Next installation with Typescript, and a fresh Storybook installation with Webpack 5, I am getting a Error: Cannot find module 'webpack/lib/util/makeSerializable.js'
error when I try to start Storybook.
See commands below
npx create-next-app@latest bug --typescript
cd bug
npx sb init --builder webpack5
-- in my test I said yes to the linter questionnpm i -D --force storybook-addon-next
storybook-addon-next
to the end of the addons
arraynpm run storybook
Error: Cannot find module 'webpack/lib/util/makeSerializable.js'
Require stack:
- /tmp/bug/node_modules/@storybook/react-docgen-typescript-plugin/dist/dependency.js
- /tmp/bug/node_modules/@storybook/react-docgen-typescript-plugin/dist/plugin.js
- /tmp/bug/node_modules/@storybook/react-docgen-typescript-plugin/dist/index.js
- /tmp/bug/node_modules/@storybook/react/dist/cjs/server/framework-preset-react-docgen.js
- /tmp/bug/node_modules/@storybook/core-common/dist/cjs/presets.js
- /tmp/bug/node_modules/@storybook/core-common/dist/cjs/index.js
- /tmp/bug/node_modules/@storybook/core-server/dist/cjs/index.js
- /tmp/bug/node_modules/@storybook/core/dist/cjs/server.js
- /tmp/bug/node_modules/@storybook/core/server.js
- /tmp/bug/node_modules/@storybook/react/dist/cjs/server/index.js
- /tmp/bug/node_modules/@storybook/react/bin/index.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/tmp/bug/node_modules/@storybook/react-docgen-typescript-plugin/dist/dependency.js:6:55)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at /tmp/bug/node_modules/@storybook/react-docgen-typescript-plugin/dist/plugin.js:108:42
at Hook.eval [as call] (eval at create (/tmp/bug/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:374:1)
at Hook.CALL_DELEGATE [as _call] (/tmp/bug/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
at Compiler.newCompilation (/tmp/bug/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1122:26)
at /tmp/bug/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1166:29 {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/tmp/bug/node_modules/@storybook/react-docgen-typescript-plugin/dist/dependency.js',
'/tmp/bug/node_modules/@storybook/react-docgen-typescript-plugin/dist/plugin.js',
'/tmp/bug/node_modules/@storybook/react-docgen-typescript-plugin/dist/index.js',
'/tmp/bug/node_modules/@storybook/react/dist/cjs/server/framework-preset-react-docgen.js',
'/tmp/bug/node_modules/@storybook/core-common/dist/cjs/presets.js',
'/tmp/bug/node_modules/@storybook/core-common/dist/cjs/index.js',
'/tmp/bug/node_modules/@storybook/core-server/dist/cjs/index.js',
'/tmp/bug/node_modules/@storybook/core/dist/cjs/server.js',
'/tmp/bug/node_modules/@storybook/core/server.js',
'/tmp/bug/node_modules/@storybook/react/dist/cjs/server/index.js',
'/tmp/bug/node_modules/@storybook/react/bin/index.js'
]
}
Storybook starts
Every time
No response
1.6.2
No response
@storybook/addon-postcss
const path = require('path');
module.exports = {
stories: [
'../stories/**/*.stories.mdx',
'../stories/**/*.stories.@(js|jsx|ts|tsx)',
],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
{
name: '@storybook/addon-postcss',
options: {
postcssLoaderOptions: {
implementation: require('postcss'),
},
},
},
],
framework: '@storybook/react',
core: {
builder: '@storybook/builder-webpack5',
},
webpackFinal: async (config) => {
config.resolve.modules = [path.resolve(__dirname, '..'), 'node_modules'];
return config;
},
staticDirs: ['../public'],
};
const path = require('path');
module.exports = {
stories: [
'../stories/**/*.stories.mdx',
'../stories/**/*.stories.@(js|jsx|ts|tsx)',
],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'storybook-addon-next',
{
name: '@storybook/addon-postcss',
options: {
postcssLoaderOptions: {
implementation: require('postcss'),
},
},
},
],
framework: '@storybook/react',
core: {
builder: '@storybook/builder-webpack5',
},
webpackFinal: async (config) => {
config.resolve.modules = [path.resolve(__dirname, '..'), 'node_modules'];
return config;
},
staticDirs: ['../public'],
};
It occurs this error message.
Error: PostCSS plugin tailwindcss requires PostCSS 8.
https://github.com/kyujonglee/storybook-nextjs-tailwindcss
storybook
nextjs
tailwindcss3
work together.
No response
No response
v1.6.4
No response
Styles, that I import in preview.js
are ignored in the result bundle without any issue in the console. Storybook stories are unstyled.
To reproduce the issue, try to run storybook in both development/production mode from your example in the repo
https://github.com/RyanClementsHax/storybook-addon-next/tree/main/examples/with-tailwindcss
I'm facing same issue in real project also.
https://github.com/RyanClementsHax/storybook-addon-next/tree/main/examples/with-tailwindcss
To reproduce the issue, try to run storybook in both development/production mode from your example in the repo
https://github.com/RyanClementsHax/storybook-addon-next/tree/main/examples/with-tailwindcss
Weback pick up the styles that you import in preview.js
file.
Every time
No response
OS: macOS
Node: 0.39.1
1.6.6
No response
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"18.1.0" from the root project
npm ERR! peerOptional react@"^16.8.0 || ^17.0.0 || ^18.0.0" from @storybook/[email protected]
npm ERR! node_modules/@storybook/addon-actions
npm ERR! dev @storybook/addon-actions@"6.5.3" from the root project
npm ERR! peer @storybook/addon-actions@"^6.0.0" from [email protected]
npm ERR! node_modules/storybook-addon-next
npm ERR! dev storybook-addon-next@"1.6.2" from the root project
npm ERR! 2 more (react-dom, next)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0" from [email protected]
npm ERR! node_modules/storybook-addon-next
npm ERR! dev storybook-addon-next@"1.6.2" 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-05-20T07_58_57_872Z-debug-0.log
just use the storybook 6.5.3
react 18,
storybook 6.5.3
i expect it to install :)
No response
No response
windows
1.6.2
No response
Hi I am using Storybook 6.4.22 with Next 12.1.5 and Typescript 4.4.2(Node 16). I have to add global fonts for our stories. I tried adding that in preview.js and it worked fine initially. I had to use 'storybook-addon-next' because some of our components are pulling info out of configs(getConfig()?.serverRuntimeConfig?.config). After adding the addon my global import of fonts has stopped working.
Thanks in advance for your help.
module.exports = {
stories: ['../src//*.stories.mdx', '../src//*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'storybook-addon-tags',
'storybook-addon-next',
],
framework: '@storybook/react',
core: {
builder: '@storybook/builder-webpack5',
},
}
import '@UI/palette/build/web/fonts/fonts-cdn.css' //css import
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}
explained above
explained above
none
No response
none
-OS[MAC OS]
"^1.6.2"
No response
Using the experimental "allowFutureImage" with storybook, it throw Error.
The "next/future/image" component is experimental and may be subject to breaking changes. To enable this experiment, please include `experimental: { images: { allowFutureImage: true } }` in your next.config.js file.
nextjs example with-storybook-app
npx create-next-app --example with-storybook with-storybook-app
// next.config.js
module.exports = {
...
experimental: {
images: {
allowFutureImage: true,
},
},
}
// pages/nextjsImages.js
import Image from 'next/future/image'
with next.config.js setup, the stories including future/image should load without error.
Every time
1.6.7
No response
SassError: SassError: expected "{".
╷
2 │ import API from "!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
│ ^
╵
components/Container/styles.module.scss 2:98 root stylesheet
at Object.loader (/Users/mikhailkiselyov/WebstormProjects/tajwork/node_modules/sass-loader/dist/index.js:69:14)
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
https://sharemycode.io/c/3bc21b0
start-storybook -p 6006
Successful build
Every time
No response
macOS Monterey (12.0.1 (21A559))
Google Chrome (101.0.4951.64 ARM)
^1.6.6
main.js config
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
"stories": [
"../**/*.stories.mdx",
"../**/*.stories.@(js|jsx|ts|tsx)",
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/preset-scss",
"storybook-addon-next"
],
"framework": "@storybook/react",
"core": {
"builder": "@storybook/builder-webpack5"
},
"webpackFinal": async (config) => {
config.resolve.plugins = [
...(config.resolve.plugins || []),
new TsconfigPathsPlugin({
extensions: config.resolve.extensions,
}),
];
return config;
},
}
preview.js config
import "../styles/globals.css";
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}
nextjs.config:
/** @type {import('next').NextConfig} */
const { i18n } = require("./next-i18next.config");
const path = require("path");
const nextConfig = {
reactStrictMode: true,
images: {
domains: ["chelyabinsk.zarplata.ru", "cdn3.zp.ru"],
},
sassOptions: {
includePaths: [path.join(__dirname, "styles")],
},
i18n,
};
module.exports = nextConfig;
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
n/a
upgrade next to 13.0.0.
should install properly
Every time
No response
any
1.6.9
No response
I'm not sure if this is related to #67
I am building a site which loads images from various different sources. Next's next/image
component allows a loader
prop which allows me to pass in a function which generates URLs for a given image at various different widths.
I have different loader functions which produce different aspect ratios, and that sort of thing.
It seems that when run via storybook-addon-next
, the loader prop is ignored or overruled, and I get the plain src
coming through, which is not an actual loadable URL. This would also be the case if using some built-in loaders -- cloudinary
for sure and possibly others.
Sorry, none
import { Story, ComponentMeta } from "@storybook/react";
import Image from "next/image";
export default {
title: "ImageTest",
component: ImageTest,
} as ComponentMeta<typeof ImageTest>;
export const ImageTest: Story = () => (
<Image
src="my-untranslated-src"
alt=""
layout="responsive"
loader={({ src, width, quality }) => `https://placekitten.com/${width}/${width}`}
width={400}
height={300}
/>
);
This loader is obviously pretend.
This ought to come out with a kitten image, but it'll result in a broken image because storybook will render an image with "my-untranslated-src" as the source, and there is no such image.
No response
No response
n/a
v1.6.6
No response
Loading fonts seems to be failing with:
ModuleBuildError: Module build failed (from ./node_modules/storybook-addon-next/dist/images/next-image-loader-stub.js):
TypeError: unsupported file type: undefined (file: undefined)
at lookup (/Users/.../node_modules/image-size/dist/index.js:52:11)
at imageSize (/Users/.../node_modules/image-size/dist/index.js:104:16)
Webpack config shows that the font is being loaded via next-image-loader-stub
:
{
test: /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
use: [
{
loader: '/Users/.../node_modules/storybook-addon-next/dist/images/next-image-loader-stub.js',
options: { filename: 'static/media/[path][name][ext]' }
}
]
},
Perhaps it's because font files won't have a width
and height
?
Just guessing... Would love to hear your insights.
Thanks!
http://forking.example.on.codesandbox.fails.to.build
I expected static file imports to work as before, but next-image-loader-stub
seems to be breaking.
No response
No response
v1.3.1
No response
Storybook gives the error:
The "next/future/image" component is experimental and may be subject to breaking changes. To enable this experiment, please include
experimental: { images: { allowFutureImage: true } } in your next.config.js file.
None
import NextImage from 'next/future/image'
Storybook start normally
Every time
No response
v 1.6.7
No response
I'm using the experimental "raw" layout but with storybook I get the following error:
The "raw" layout is currently experimental and may be subject to breaking changes. To use layout="raw", include
experimental: { images: { layoutRaw: true } }
in your next.config.js file.
I do have allowed this experimental feature in next.config.js, and also configured storybook main.js to use the next.config.js file ("nextConfigPath"). However it doesn't seem to work.
Are experimental features not supported, or is there anything I could do to make this work?
not yet...
Create a storybook with an Image component with props layout="raw"
.
If the experimental images: { layoutRaw: true, }
is available in next.config.js, the Image component should load.
No response
No response
Ubuntu 20.04 (WSL2)
Next.js 12.1.4
Storybook 6.4.19
storybook-addon-next 1.6.2
1.6.2
No response
Storybook is started but gives the error:
530.manager.bundle.js:71222
Warning: ReactDOM.render is no longer supported in React 18.
Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.
Learn more: https://reactjs.org/link/switch-to-createroot
Default config from docs
12.1.6
12.1.7-canary.29
Working Storybook
Every time
Operating System:
Platform: darwin
Arch: x64
Version: Darwin Kernel Version 21.1.0: Wed Oct 13 17:33:24 PDT 2021; root:xnu-8019.41.5~1/RELEASE_ARM64_T8101
Binaries:
Node: 14.17.5
npm: 7.21.1
Yarn: 1.22.11
pnpm: N/A
Relevant packages:
next: 12.1.7-canary.29
react: 18.1.0
react-dom: 18.1.0
^1.6.6
Critical issue, can not work with storybook at next canary version
Storybook gives the error:
ModuleBuildError: Module build failed (from ./node_modules/storybook-addon-next/dist/images/next-image-loader-stub.js):
TypeError: Cannot read properties of undefined (reading 'replace')
at Object.nextImageLoaderStub (/Users/anatoo/Workspace/xxx/xxx/node_modules/storybook-addon-next/dist/images/next-image-loader-stub.js:7:75)
at processResult (/Users/anatoo/Workspace/xxx/xxx/node_modules/webpack/lib/NormalModule.js:758:19)
at /Users/anatoo/Workspace/xxx/xxx/node_modules/webpack/lib/NormalModule.js:860:5
at /Users/anatoo/Workspace/xxx/xxx/node_modules/loader-runner/lib/LoaderRunner.js:400:11
at /Users/anatoo/Workspace/xxx/xxx/node_modules/loader-runner/lib/LoaderRunner.js:252:18
at runSyncOrAsync (/Users/anatoo/Workspace/xxx/xxx/node_modules/loader-runner/lib/LoaderRunner.js:156:3)
at iterateNormalLoaders (/Users/anatoo/Workspace/xxx/xxx/node_modules/loader-runner/lib/LoaderRunner.js:251:2)
at /Users/anatoo/Workspace/xxx/xxx/node_modules/loader-runner/lib/LoaderRunner.js:224:4
at /Users/anatoo/Workspace/xxx/xxx/node_modules/webpack/lib/NormalModule.js:834:15
at Array.eval (eval at create (/Users/anatoo/Workspace/xxx/xxx/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)
at runCallbacks (/Users/anatoo/Workspace/xxx/xxx/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:27:15)
None
@nrwl/react/plugins/storybook
addon to ".storybook/main.js"Storybook start normally
Every time
No response
v1.6.7
@nrwl/react/plugin/storybook
add the below webpack loader rule.
{
test: /\.(bmp|png|jpe?g|gif|webp|avif)$/,
type: 'asset',
parser: { dataUrlCondition: { maxSize: 10000 } }
}
storybook-addon-next
's configureStaticImageImport
function refer generator.filename
option of the rule.
const assetRule = rules?.find(
rule =>
typeof rule !== 'string' &&
rule.test instanceof RegExp &&
rule.test.test('test.jpg')
) as RuleSetRule
assetRule.test = /\.(apng|eot|otf|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
rules?.push({
test: /\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,
issuer: { not: /\.(css|scss|sass)$/ },
use: [
{
loader: require.resolve('./next-image-loader-stub'),
options: {
filename: assetRule.generator?.filename // <<----
}
}
]
})
rules?.push({
test: /\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,
issuer: /\.(css|scss|sass)$/,
type: 'asset/resource',
generator: {
filename: assetRule.generator?.filename // <<----
}
})
https://github.com/RyanClementsHax/storybook-addon-next/blob/main/src/images/webpack.ts#L15-L41
As a result, the generator.filename
option is undefined and the storybook is broken.
With a fresh Next 12, Storybook with webpack 5 and storybook-addon-next setup I can't use SVGR for the importing of SVGs.
When using the following next.config.js
I would like to use the addon to import any image (except svg) to be imported like Next would normally do it.
module.exports = {
reactStrictMode: true,
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ['@svgr/webpack']
});
return config
}
}
So just with above configuration, the plugin will import a StaticImageData
object for SVGs and bypass the SVGR loader entirely.
Unfortunately, when running storybook with the addon and the added svg configuration to the main.js
will throw an error.
const path = require('path');
module.exports = {
stories: [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(js|jsx|ts|tsx)"
],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
{
name: 'storybook-addon-next',
options: {
nextConfigPath: path.resolve(__dirname, '../next.config.js')
}
}
],
framework: "@storybook/react",
core: {
"builder": "webpack5"
},
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.svg$/,
use: ['@svgr/webpack']
});
return config
},
}
This error occurs during building with the configuration above.
ModuleBuildError: Module build failed (from ./node_modules/storybook-addon-next/dist/images/next-image-loader-stub.js):
TypeError: unsupported file type: undefined (file: undefined)
at lookup (/Users/jeroen.roumen/Development/storybook-webpack5/node_modules/image-size/dist/index.js:51:11)
at imageSize (/Users/jeroen.roumen/Development/storybook-webpack5/node_modules/image-size/dist/index.js:109:16)
at Object.nextImageLoaderStub (/Users/jeroen.roumen/Development/storybook-webpack5/node_modules/storybook-addon-next/dist/images/next-image-loader-stub.js:12:56)
at processResult (/Users/jeroen.roumen/Development/storybook-webpack5/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:758:19)
at /Users/jeroen.roumen/Development/storybook-webpack5/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:860:5
at /Users/jeroen.roumen/Development/storybook-webpack5/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /Users/jeroen.roumen/Development/storybook-webpack5/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at runSyncOrAsync (/Users/jeroen.roumen/Development/storybook-webpack5/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:156:3)
at iterateNormalLoaders (/Users/jeroen.roumen/Development/storybook-webpack5/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:250:2)
at iterateNormalLoaders (/Users/jeroen.roumen/Development/storybook-webpack5/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:239:10)
at /Users/jeroen.roumen/Development/storybook-webpack5/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:254:3
at context.callback (/Users/jeroen.roumen/Development/storybook-webpack5/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at cb (util.js:290:31)
at processTicksAndRejections (internal/process/task_queues.js:82:21)
ModuleBuildError: Module build failed (from ./node_modules/storybook-addon-next/dist/images/next-image-loader-stub.js):
TypeError: unsupported file type: undefined (file: undefined)
at lookup (/Users/jeroen.roumen/Development/storybook-webpack5/node_modules/image-size/dist/index.js:51:11)
at imageSize (/Users/jeroen.roumen/Development/storybook-webpack5/node_modules/image-size/dist/index.js:109:16)
It seems the addon is not detecting to not use the stub or something else might be going on there.
Can provide a zip with a project
@svgr/webpack
.svg
and use @svgr/webpack
as loader.svg
into a .stories
fileyarn storybook
and it should present the error from aboveAs a user I would like the addon to check my current next.config.js
webpack configuration and use SVGR to import .svg
files in storybook alongside normal images which would use the next-image-loader-stub
.
No response
No response
1.6.2
No response
When using in a project that is a yarn workspace (on a monorepo setup), the plugin fails to find modules because of node_modules being hoisted up to the root folder:
yarn storybook
yarn run v1.22.17
$ start-storybook -p 6006 -s public
info @storybook/react v6.4.18
info
(node:61699) DeprecationWarning: --static-dir CLI flag is deprecated, see:
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
info => Serving static files from ./public at /
info => Using implicit CSS loaders
ERR! Error: Cannot find module '<project-root>/storybook-addon-next/examples/with-tailwindcss/node_modules/next/package.json'
ERR! Require stack:
ERR! - <project-root>/storybook-addon-next/examples/node_modules/storybook-addon-next/dist/utils.js
ERR! - <project-root>/storybook-addon-next/examples/node_modules/storybook-addon-next/dist/preset.js
ERR! - <project-root>/storybook-addon-next/examples/node_modules/@storybook/core-common/dist/cjs/presets.js
ERR! - <project-root>/storybook-addon-next/examples/node_modules/@storybook/core-common/dist/cjs/index.js
ERR! - <project-root>/storybook-addon-next/examples/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - <project-root>/storybook-addon-next/examples/node_modules/@storybook/core/dist/cjs/server.js
ERR! - <project-root>/storybook-addon-next/examples/node_modules/@storybook/core/server.js
ERR! - <project-root>/storybook-addon-next/examples/node_modules/@storybook/react/dist/cjs/server/index.js
ERR! - <project-root>/storybook-addon-next/examples/node_modules/@storybook/react/bin/index.js
ERR! at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
ERR! at Function.Module._load (node:internal/modules/cjs/loader:778:27)
ERR! at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR! at require (node:internal/modules/cjs/helpers:102:18)
ERR! at getNextjsVersion (<project-root>/storybook-addon-next/examples/node_modules/storybook-addon-next/dist/utils.js:9:1)
ERR! at configureStaticImageImport (<project-root>/storybook-addon-next/examples/node_modules/storybook-addon-next/dist/images/webpack.js:14:50)
ERR! at configureImages (<project-root>/storybook-addon-next/examples/node_modules/storybook-addon-next/dist/images/webpack.js:8:5)
ERR! at <project-root>/storybook-addon-next/examples/node_modules/storybook-addon-next/dist/preset.js:29:35
ERR! at Generator.next (<anonymous>)
ERR! at fulfilled (<project-root>/storybook-addon-next/examples/node_modules/tslib/tslib.js:114:62)
ERR! Error: Cannot find module '<project-root>/storybook-addon-next/examples/with-tailwindcss/node_modules/next/package.json'
ERR! Require stack:
ERR! - <project-root>/storybook-addon-next/examples/node_modules/storybook-addon-next/dist/utils.js
ERR! - <project-root>/storybook-addon-next/examples/node_modules/storybook-addon-next/dist/preset.js
ERR! - <project-root>/storybook-addon-next/examples/node_modules/@storybook/core-common/dist/cjs/presets.js
ERR! - <project-root>/storybook-addon-next/examples/node_modules/@storybook/core-common/dist/cjs/index.js
ERR! - <project-root>/storybook-addon-next/examples/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - <project-root>/storybook-addon-next/examples/node_modules/@storybook/core/dist/cjs/server.js
ERR! - <project-root>/storybook-addon-next/examples/node_modules/@storybook/core/server.js
ERR! - <project-root>/storybook-addon-next/examples/node_modules/@storybook/react/dist/cjs/server/index.js
ERR! - <project-root>/storybook-addon-next/examples/node_modules/@storybook/react/bin/index.js
ERR! at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
ERR! at Function.Module._load (node:internal/modules/cjs/loader:778:27)
ERR! at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR! at require (node:internal/modules/cjs/helpers:102:18)
ERR! at getNextjsVersion (<project-root>/storybook-addon-next/examples/node_modules/storybook-addon-next/dist/utils.js:9:1)
ERR! at configureStaticImageImport (<project-root>/storybook-addon-next/examples/node_modules/storybook-addon-next/dist/images/webpack.js:14:50)
ERR! at configureImages (<project-root>/storybook-addon-next/examples/node_modules/storybook-addon-next/dist/images/webpack.js:8:5)
ERR! at <project-root>/storybook-addon-next/examples/node_modules/storybook-addon-next/dist/preset.js:29:35
ERR! at Generator.next (<anonymous>)
ERR! at fulfilled (<project-root>/storybook-addon-next/examples/node_modules/tslib/tslib.js:114:62) {
ERR! code: 'MODULE_NOT_FOUND',
ERR! requireStack: [
ERR! '<project-root>/storybook-addon-next/examples/node_modules/storybook-addon-next/dist/utils.js',
ERR! '<project-root>/storybook-addon-next/examples/node_modules/storybook-addon-next/dist/preset.js',
ERR! '<project-root>/storybook-addon-next/examples/node_modules/@storybook/core-common/dist/cjs/presets.js',
ERR! '<project-root>/storybook-addon-next/examples/node_modules/@storybook/core-common/dist/cjs/index.js',
ERR! '<project-root>/storybook-addon-next/examples/node_modules/@storybook/core-server/dist/cjs/index.js',
ERR! '<project-root>/storybook-addon-next/examples/node_modules/@storybook/core/dist/cjs/server.js',
ERR! '<project-root>/storybook-addon-next/examples/node_modules/@storybook/core/server.js',
ERR! '<project-root>/storybook-addon-next/examples/node_modules/@storybook/react/dist/cjs/server/index.js',
ERR! '<project-root>/storybook-addon-next/examples/node_modules/@storybook/react/bin/index.js'
ERR! ]
ERR! }
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
https://github.com/volkyeth/storybook-addon-next/tree/broken-with-yarn-workspaces
git clone --branch broken-with-yarn-workspaces [email protected]:volkyeth/storybook-addon-next.git
cd storybook-addon-next/examples
yarn install
cd with-tailwindcss
yarn storybook
Package should work with yarn workspaces
Every time
No response
OS: MacOS
1.4.2
I'm not sure what's the fix for this as I'm not very experienced at packaging libs. I'll try to look into it but if someone knows how to make it compatible please advise and I'll try to make a PR
Due to this breaking change on css-loader 6.0.0:
for url and import options Function type was removed in favor Object type with the filter property, i.e. before
{ url: () => true }
, now{ url: { filter: () => true } }
and before{ import: () => true }
, now{ import: { filter: () => true } }
And due to the the version constraint ^6.5.1 the addon is broken because of current css-loader config that uses old format
requiring [email protected] (before the breaking changes) is a workaround
the repo examples should all be failing on storybook start 🤔
install with css-loader >6.0.0
storybook should start
Every time
No response
macOs
1.4.2
No response
I'm trying to use CSS modules with SCSS and have come up against an issue where the autoprefixer is not working on storybook, but working correctly when I run NextJS.
The mask-image
property is not being prefixed to support Chrome and the webkit browsers.
https://stackblitz.com/edit/nextjs-a7vvxx
.storybook/main.js
module.exports = {
stories: [
"../components/**/*.stories.mdx",
"../components/**/*.stories.@(js|jsx|ts|tsx)",
],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"storybook-addon-next",
],
framework: "@storybook/react",
core: {
builder: "@storybook/builder-webpack5",
},
staticDirs: ["../public"],
};
.browserlistrc
defaults
last 2 versions
not IE 11
scss
.playing {
width: 50px;
height: 50px;
background: #FFFFFF;
mask-image: url(https://upload.wikimedia.org/wikipedia/commons/0/03/Font_Awesome_5_solid_play-circle.svg);
mask-mode: alpha;
}
deps
"dependencies": {
"@mantine/core": "^4.2.12",
"@mantine/hooks": "^4.2.12",
"@mantine/next": "^4.2.12",
"classnames": "^2.3.1",
"date-fns": "^2.29.1",
"framer-motion": "^6.5.1",
"next": "12.2.2",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"@babel/core": "^7.18.9",
"@storybook/addon-actions": "^6.5.9",
"@storybook/addon-essentials": "^6.5.9",
"@storybook/addon-interactions": "^6.5.9",
"@storybook/addon-links": "^6.5.9",
"@storybook/addon-postcss": "^3.0.0-alpha.1",
"@storybook/builder-webpack5": "^6.5.9",
"@storybook/manager-webpack5": "^6.5.9",
"@storybook/react": "^6.5.9",
"@storybook/testing-library": "^0.0.13",
"@types/node": "18.0.6",
"@types/react": "18.0.15",
"@types/react-dom": "18.0.6",
"babel-loader": "^8.2.5",
"eslint": "8.20.0",
"eslint-config-next": "12.2.2",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-storybook": "^0.6.1",
"postcss": "^8.4.14",
"sass": "^1.54.0",
"storybook-addon-next": "^1.6.7",
"stylelint": "^14.9.1",
"stylelint-config-idiomatic-order": "^8.1.0",
"stylelint-config-prettier-scss": "^0.0.1",
"stylelint-config-standard-scss": "^5.0.0",
"typescript": "4.7.4",
"typescript-plugin-css-modules": "^3.4.0"
}
Every time
No response
macOS, Chrome
1.6.7
none
Describe the bug
I'm facing an issue when I started storybook
To Reproduce
Steps to reproduce the behavior:
yarn add storybook-addon-next -D
main.js
fileMy package.json
"devDependencies": {
"@babel/core": "^7.16.12",
"@commitlint/cli": "^16.1.0",
"@commitlint/config-conventional": "^16.0.0",
"@next/bundle-analyzer": "^12.0.8",
"@storybook/addon-a11y": "^6.4.14",
"@storybook/addon-actions": "^6.4.14",
"@storybook/addon-essentials": "^6.4.14",
"@storybook/addon-links": "^6.4.14",
"@storybook/addon-postcss": "^2.0.0",
"@storybook/addons": "^6.4.14",
"@storybook/builder-webpack5": "^6.4.14",
"@storybook/manager-webpack5": "^6.4.14",
"@storybook/react": "^6.4.14",
"@storybook/theming": "^6.4.14",
"@svgr/webpack": "^6.2.0",
"@tailwindcss/forms": "^0.4.0",
"@tailwindcss/typography": "^0.5.0",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@types/react": "^17.0.38",
"@types/tailwindcss": "^3.0.3",
"@typescript-eslint/eslint-plugin": "^5.10.1",
"@typescript-eslint/parser": "^5.10.1",
"autoprefixer": "^10.4.2",
"babel-jest": "^27.4.6",
"babel-loader": "^8.2.3",
"commitizen": "^4.2.4",
"commitlint-config-gitmoji": "^2.2.5",
"cz-customizable": "^6.3.0",
"eslint": "8.6.0",
"eslint-config-next": "^12.0.8",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"eslint-plugin-simple-import-sort": "^7.0.0",
"eslint-plugin-storybook": "^0.5.5",
"eslint-plugin-unused-imports": "^2.0.0",
"husky": "^7.0.4",
"identity-obj-proxy": "^3.0.0",
"inquirer-fuzzy-path": "^2.3.0",
"jest": "^27.4.7",
"lint-staged": "^12.3.1",
"next-sitemap": "^2.0.7",
"plop": "^3.0.5",
"postcss": "^8.4.5",
"prettier": "^2.5.1",
"prettier-plugin-tailwindcss": "^0.1.4",
"react-test-renderer": "^17.0.2",
"standard-version": "^9.3.2",
"storybook-addon-next": "^1.3.1",
"storybook-theme-css-vars": "^0.0.4",
"tailwindcss": "^3.0.16",
"typescript": "^4.5.5"
},
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.