ValidationError: Invalid configuration object when using the addon in Storybook v7

[MichaelRydl]

Hello,

I have a problem with the "@whitespace/storybook-addon-html" when I´m using it in Storybook v7.

When I try to build and run Storybook I get this error:

When I comment out the addon from the "main.js" file, then it works fine and I´m able to build and run Storybook.

Do you have any idea why is this happening?

My version of this addon is: "~5.1.6", version of the Webpack is "^5.86.0" and version of the Storybook is "^7.0.20".

This is my "main.js" file:

Thank you.

[AlexSkrypnyk]

The same issue with SB 6

[tfrijsewijk]

WARN You (or an addon) are using the 'config' preset field. This has been replaced by 'previewAnnotations' and will be removed in 8.0

The error gave it away. If I remove the module.exports.config property from preset.js everything works. It appears as if Storybook is evaluating both config and configAnnotations. Addons should pick one. Starting from SB8 config will not be used anymore.

---

Today I used patch-package to patch @whitespace/[email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/@whitespace/storybook-addon-html/preset.js b/node_modules/@whitespace/storybook-addon-html/preset.js
index aca6ca4..f23183d 100644
--- a/node_modules/@whitespace/storybook-addon-html/preset.js
+++ b/node_modules/@whitespace/storybook-addon-html/preset.js
@@ -1,7 +1,3 @@
-function config(entry = []) {
-  return [...entry, require.resolve("./dist/esm/preset/preview")];
-}
-
 function managerEntries(entry = []) {
   return [...entry, require.resolve("./dist/esm/preset/manager")];
 }
@@ -12,6 +8,5 @@ function previewAnnotations(entry = []) {
 
 module.exports = {
   managerEntries,
-  config,
   previewAnnotations,
 };

This issue body was partially generated by patch-package.

[stubar]

I am also facing this issue, the patch didn't seem to work for me. Although I've not actually used [patch-package](https://github.com/ds300/patch-package) I just went in and edited preset.js manually.

I'm on SB 6 with @whitespace/[email protected]

[thucne]

I faced the same issue when trying to build the storybook, (SB 6)

The issue is resolved by adding this library @testing-library/dom to devDependencies and move @whitespace/storybook-addon-html to Dependencies (not sure the reason is one of them or both)

[tfrijsewijk]

I am also facing this issue, the patch didn't seem to work for me. Although I've not actually used [patch-package](https://github.com/ds300/patch-package) I just went in and edited preset.js manually.

I'm on SB 6 with @whitespace/[email protected]

Make sure to delete the Storybook build cache directory before testing changes in node_modules. I believe it's located in /node_modules/.cache.