search

whitespace-se / storybook-addon-html

A Storybook addon that extracts and displays compiled syntax-highlighted HTML
Other
95 stars 43 forks source link

Uncaught TypeError with Storybook 7 / Vite #99

Closed jeffpreussner closed 1 year ago

jeffpreussner commented 1 year ago

Getting a TypeError that prevents Storybook from loading.

Relevant package versions:

Panel.js:12 Uncaught TypeError: import_addons.addons.register is not a function at Panel.js:12:51 (anonymous) @ Panel.js:12 Show 1 more frame

dannyk3941 commented 1 year ago

Having a similar issue when upgrading to Storybook v7 that is preventing the story's from loading. 

1:56:25 PM [vite] error while updating dependencies:
Error: Build failed with 4 errors:
../../node_modules/@whitespace/storybook-addon-html/dist/esm/Panel.js:14:56: ERROR: Could not resolve "@storybook/api"
../../node_modules/@whitespace/storybook-addon-html/dist/esm/Panel.js:15:27: ERROR: Could not resolve "@storybook/components"
../../node_modules/@whitespace/storybook-addon-html/dist/esm/components/SyntaxHighlighter.js:18:23: ERROR: Could not resolve "@storybook/theming"
../../node_modules/@whitespace/storybook-addon-html/dist/esm/components/SyntaxHighlighter.js:19:38: ERROR: Could not resolve "@storybook/components"
j0k3r commented 1 year ago

Same here:

ERR! Error: [vite]: Rollup failed to resolve import "@storybook/api" from "/home/travis/build/.../node_modules/@whitespace/storybook-addon-html/dist/esm/Panel.js".

dryton commented 1 year ago

It looks like Storybook 7 uses "@storybook/manager-api" for the Storybook hooks now: https://storybook.js.org/docs/react/addons/addons-api#storybook-hooks

JackofD commented 1 year ago

Just bumping this, as I'm having what looks like the same issues as the original poster. I'm using Storybook 7 with Vue and Vite.

This shows up in the terminal after running storybook: WARN You (or an addon) are using the 'config' preset field. This has been replaced by 'previewAnnotations' and will be removed in 8.0

And this is the error in the browser/console: TypeError: import_addons.addons.register is not a function at http://localhost:6006/node_modules/.cache/.vite-storybook/deps/@whitespace_storybook-addon-html_dist_esm_preset_manager__js.js?v=cc2a5e99:25187:22

If I take out the HTML addon from the addons array in main.js - things run as per normal.

My package.json - relevant packages

"devDependencies": {
    "@storybook/addon-essentials": "^7.0.20",
    "@storybook/addon-interactions": "^7.0.20",
    "@storybook/addon-links": "^7.0.20",
    "@storybook/addon-mdx-gfm": "^7.0.20",
    "@storybook/blocks": "^7.0.20",
    "@storybook/testing-library": "^0.1.0",
    "@storybook/vue3": "^7.0.20",
    "@storybook/vue3-vite": "^7.0.20",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vue/test-utils": "^2.3.2",
    "@whitespace/storybook-addon-html": "^5.1.5",
    "jsdom": "^22.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "storybook": "^7.0.20",
    "vite": "^4.3.5",
    "vitest": "^0.31.0"
  }

Hoping we have a solve for this.

jaylaw81 commented 1 year ago

Having the same issue as well. In regards to the addon

TypeError: addons.register is not a function
Koda-Pig commented 1 year ago

Bumping, getting the same error.

okamoai commented 1 year ago

https://github.com/whitespace-se/storybook-addon-html/blob/02d6dacf233f627de0322cc16bae5539fe505541/preset.js#L9-L11

Calling './dist/esm/preset/manager' in previewAnnotations, but isn't it supposed to be './dist/esm/preset/preview'? When I tried correcting this in my own environment, I confirmed that the error was resolved.

jeanfredrik commented 1 year ago

I've merged #100 and published v5.1.6. Does upgrading to that version solve this issue?

j0k3r commented 1 year ago

@jeanfredrik yes fixed, thanks!

josh-bluegrass commented 1 year ago

Thanks so much @jeanfredrik!