Recently, I was confronted with the problem that an image doesn't appear in the image component in
storybook
.
I searched for a solution and I found
the issue.
Even though there is already such a solution, it was a little hard to find it. This is why I am writing this post. Actually, there are other ways to solve the problem with some code but I didn't want to write more code in my project.
First, let me show you the problem. I set up a project with a command
npx create-next-app
and made a component.
An error occurs. I've encountered it while writing this post, meanwhile I haven't seen any errors in my project.
info@storybook/reactv6.4.18info=> Loading presetsinfo=> 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...`toshowwherethewarningwascreated)info=> Using implicit CSS loadersinfo=> Using default Webpack4 setupERR! 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)
WARNBrokenbuild,fixtheerrorabove.WARNYoumayneedtorefreshthebrowser.npmERR! code ELIFECYCLE
npmERR! errno 1
npmERR! next-storybook-image-test@ storybook: `start-storybook -p 6006`
npmERR! Exit status 1
npmERR!
npmERR! Failed at the next-storybook-image-test@ storybook script.
npmERR! This is probably not a problem with npm. There is likely additional logging output above.
npmERR! A complete log of this run can be found in:
npmERR! C:\Users\hskco\AppData\Roaming\npm-cache\_logs\2022-02-06T07_30_05_523Z-debug.log
PSC:\Users\hskco\OneDrive\바탕 화면\dev\next-storybook-image-test> Enter fullscreen modeExit fullscreen mode
+Plus
I've reported the storybook-addon-next issue in github and I got the answer from the author.
It was the problem of the webpack version.
There is the guide for upgrading the builder from webpack4 to webpack5.
After upgrading it, storybook-addon-next@1.4.1 works.
If you haven't started your project yet, I'd recommend you to initialize the storybook with npx sb init --builder webpack5.
I am studying for improving my English skills and am looking for a software developer position in Frankfurt.
Linkedin: www.linkedin.com/in/dev-licokr
I am studying for improving my English skills and am looking for a software developer position in Frankfurt.
Linkedin: www.linkedin.com/in/dev-licokr
Once unpublished, all posts by lico will become hidden and only accessible to themselves.
If lico is not suspended, they can still re-publish their posts from their dashboard.