Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Issue with writing addon with Svelte and Storybook
See original GitHub issueDescribe the bug
While updating the Svelte documentation for the LearnStorybook tutorial, to match the recent changes introduced in Storybook 5.3 all was going well up until the Creating addons section.
After following the steps provided by the tutorial and installing necessary packages, running npm run storybook yelds the following result
info @storybook/svelte v5.3.2
info
info => Loading static files from: \learnstorybook_with_svelte\taskbox-storybook-uniconfig\public .
info => Loading presets
WARN Failed to load preset: "\\learnstorybook_with_svelte\\taskbox-storybook-uniconfig\\.storybook\\addons\\register.js" on level 1
ERR! \learnstorybook_with_svelte\taskbox-storybook-uniconfig\.storybook\addons\register.js:1
ERR! (function (exports, require, module, __filename, __dirname) { import React, { Fragment } from "react";
ERR! ^^^^^
ERR!
ERR! SyntaxError: Unexpected identifier
ERR! at new Script (vm.js:79:7)
ERR! at createScript (vm.js:251:10)
ERR! at Object.runInThisContext (vm.js:303:10)
ERR! at Module._compile (internal/modules/cjs/loader.js:656:28)
ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
ERR! at Module.load (internal/modules/cjs/loader.js:598:32)
ERR! at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
ERR! at Function.Module._load (internal/modules/cjs/loader.js:529:3)
ERR! at Module.require (internal/modules/cjs/loader.js:636:17)
ERR! at require (internal/modules/cjs/helpers.js:20:18)
ERR! at interopRequireDefault (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\@storybook\core\dist\server\presets.js:154:18)
ERR! at loadPreset (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\@storybook\core\dist\server\presets.js:164:22)
ERR! at presets.reduce (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\@storybook\core\dist\server\presets.js:220:20)
ERR! at Array.reduce (<anonymous>)
ERR! at loadPresets (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\@storybook\core\dist\server\presets.js:219:18)
ERR! at loadPreset ( \learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\@storybook\core\dist\server\presets.js:184:18)
ERR! { \learnstorybook_with_svelte\taskbox-storybook-uniconfig\.storybook\addons\register.js:1
ERR! (function (exports, require, module, __filename, __dirname) { import React, { Fragment } from "react";
ERR! ^^^^^
ERR!
ERR! SyntaxError: Unexpected identifier
ERR! at new Script (vm.js:79:7)
ERR! at createScript (vm.js:251:10)
ERR! at Object.runInThisContext (vm.js:303:10)
ERR! at Module._compile (internal/modules/cjs/loader.js:656:28)
ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
ERR! at Module.load (internal/modules/cjs/loader.js:598:32)
ERR! at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
ERR! at Function.Module._load (internal/modules/cjs/loader.js:529:3)
ERR! at Module.require (internal/modules/cjs/loader.js:636:17)
ERR! at require (internal/modules/cjs/helpers.js:20:18)
ERR! at interopRequireDefault ( \learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\@storybook\core\dist\server\presets.js:154:18)
ERR! at loadPreset ( \learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\@storybook\core\dist\server\presets.js:164:22)
ERR! at presets.reduce (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\@storybook\core\dist\server\presets.js:220:20)
ERR! at Array.reduce (<anonymous>)
ERR! at loadPresets (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\@storybook\core\dist\server\presets.js:219:18)
ERR! at loadPreset (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\@storybook\core\dist\server\presets.js:184:18)
ERR! stack:
ERR! '\learnstorybook_with_svelte\\taskbox-storybook-uniconfig\\.storybook\\addons\\register.js:1\n(function (exports, require, module, __filename, __dirname) { import React, { Fragment } from "react";\n ^^^^^\n\nSyntaxError: Unexpected identifier\n at new Script (vm.js:79:7)\n at createScript (vm.js:251:10)\n at Object.runInThisContext (vm.js:303:10)\n at Module._compile (internal/modules/cjs/loader.js:656:28)\n at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)\n at Module.load (internal/modules/cjs/loader.js:598:32)\n at tryModuleLoad (internal/modules/cjs/loader.js:537:12)\n at Function.Module._load (internal/modules/cjs/loader.js:529:3)\n at Module.require (internal/modules/cjs/loader.js:636:17)\n at require (internal/modules/cjs/helpers.js:20:18)\n at interopRequireDefault (\\learnstorybook_with_svelte\\taskbox-storybook-uniconfig\\node_modules\\@storybook\\core\\dist\\server\\presets.js:154:18)\n at loadPreset (\\learnstorybook_with_svelte\\taskbox-storybook-uniconfig\\node_modules\\@storybook\\core\\dist\\server\\presets.js:164:22)\n at presets.reduce (\\learnstorybook_with_svelte\\taskbox-storybook-uniconfig\\node_modules\\@storybook\\core\\dist\\server\\presets.js:220:20)\n at Array.reduce (<anonymous>)\n at loadPresets (\\learnstorybook_with_svelte\\taskbox-storybook-uniconfig\\node_modules\\@storybook\\core\\dist\\server\\presets.js:219:18)\n at loadPreset (\\learnstorybook_with_svelte\\taskbox-storybook-uniconfig\\node_modules\\@storybook\\core\\dist\\server\\presets.js:184:18)' }
info => Loading presets
WARN Failed to load preset: "\\learnstorybook_with_svelte\\taskbox-storybook-uniconfig\\.storybook\\addons\\register.js" on level 1
ERR! \learnstorybook_with_svelte\taskbox-storybook-uniconfig\.storybook\addons\register.js:1
ERR! (function (exports, require, module, __filename, __dirname) { import React, { Fragment } from "react";
ERR! ^^^^^
ERR!
ERR! SyntaxError: Unexpected identifier
ERR! at new Script (vm.js:79:7)
ERR! at createScript (vm.js:251:10)
ERR! at Object.runInThisContext (vm.js:303:10)
ERR! at Module._compile (internal/modules/cjs/loader.js:656:28)
ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
ERR! at Module.load (internal/modules/cjs/loader.js:598:32)
ERR! at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
ERR! at Function.Module._load (internal/modules/cjs/loader.js:529:3)
ERR! at Module.require (internal/modules/cjs/loader.js:636:17)
ERR! at require (internal/modules/cjs/helpers.js:20:18)
ERR! at interopRequireDefault (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\@storybook\core\dist\server\presets.js:154:18)
ERR! at loadPreset (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\@storybook\core\dist\server\presets.js:164:22)
ERR! at presets.reduce (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\@storybook\core\dist\server\presets.js:220:20)
ERR! at Array.reduce (<anonymous>)
ERR! at loadPresets (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\@storybook\core\dist\server\presets.js:219:18)
ERR! at loadPreset (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\@storybook\core\dist\server\presets.js:184:18)
ERR! { \learnstorybook_with_svelte\taskbox-storybook-uniconfig\.storybook\addons\register.js:1
ERR! (function (exports, require, module, __filename, __dirname) { import React, { Fragment } from "react";
ERR! ^^^^^
ERR!
ERR! SyntaxError: Unexpected identifier
ERR! at new Script (vm.js:79:7)
ERR! at createScript (vm.js:251:10)
ERR! at Object.runInThisContext (vm.js:303:10)
ERR! at Module._compile (internal/modules/cjs/loader.js:656:28)
ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
ERR! at Module.load (internal/modules/cjs/loader.js:598:32)
ERR! at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
ERR! at Function.Module._load (internal/modules/cjs/loader.js:529:3)
ERR! at Module.require (internal/modules/cjs/loader.js:636:17)
ERR! at require (internal/modules/cjs/helpers.js:20:18)
ERR! at interopRequireDefault (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\@storybook\core\dist\server\presets.js:154:18)
ERR! at loadPreset (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\@storybook\core\dist\server\presets.js:164:22)
ERR! at presets.reduce (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\@storybook\core\dist\server\presets.js:220:20)
ERR! at Array.reduce (<anonymous>)
ERR! at loadPresets (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\@storybook\core\dist\server\presets.js:219:18)
ERR! at loadPreset (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\@storybook\core\dist\server\presets.js:184:18)
ERR! stack:
ERR! '\\learnstorybook_with_svelte\\taskbox-storybook-uniconfig\\.storybook\\addons\\register.js:1\n(function (exports, require, module, __filename, __dirname) { import React, { Fragment } from "react";\n ^^^^^\n\nSyntaxError: Unexpected identifier\n at new Script (vm.js:79:7)\n at createScript (vm.js:251:10)\n at Object.runInThisContext (vm.js:303:10)\n at Module._compile (internal/modules/cjs/loader.js:656:28)\n at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)\n at Module.load (internal/modules/cjs/loader.js:598:32)\n at tryModuleLoad (internal/modules/cjs/loader.js:537:12)\n at Function.Module._load (internal/modules/cjs/loader.js:529:3)\n at Module.require (internal/modules/cjs/loader.js:636:17)\n at require (internal/modules/cjs/helpers.js:20:18)\n at interopRequireDefault (\learnstorybook_with_svelte\\taskbox-storybook-uniconfig\\node_modules\\@storybook\\core\\dist\\server\\presets.js:154:18)\n at loadPreset (\\learnstorybook_with_svelte\\taskbox-storybook-uniconfig\\node_modules\\@storybook\\core\\dist\\server\\presets.js:164:22)\n at presets.reduce (\\learnstorybook_with_svelte\\taskbox-storybook-uniconfig\\node_modules\\@storybook\\core\\dist\\server\\presets.js:220:20)\n at Array.reduce (<anonymous>)\n at loadPresets (\\learnstorybook_with_svelte\\taskbox-storybook-uniconfig\\node_modules\\@storybook\\core\\dist\\server\\presets.js:219:18)\n at loadPreset (\\learnstorybook_with_svelte\\taskbox-storybook-uniconfig\\node_modules\\@storybook\\core\\dist\\server\\presets.js:184:18)' }
To Reproduce Steps to reproduce the behavior:
- Follow the tutorial until the mentioned section
- Follow the steps in that section
- Run
npm storybook - See error
Expected behavior The addon should be registered correctly and function properly.
Additional context The code that is being used to back the documentation is located here
Any help would be appreciated.
Issue Analytics
- State:
- Created 4 years ago
- Comments:27 (24 by maintainers)
Top Results From Across the Web
Svelte CSF Addon | Storybook: Frontend workshop for UI ...
Allows to write your stories in Svelte syntax and compiles it to Storybook's CSF syntax. See the native format tab in the getting...
Read more >Integrating Storybook with SvelteKit - CodingCat.dev
There is still an open issue with the addon-svelte-csf at the time of writing. Overall though, we were able to get a SvelteKit...
Read more >storybook/addon-docs - npm
DocsPage is a zero-config aggregation of your component stories, text descriptions, docgen comments, props tables, and code examples into clean, ...
Read more >Svelte Storybook Tailwind
A starter template for Svelte, TailwindCSS and Storybook. ... Svelte is a component framework that allows you to write highly-efficient, imperative code, ...
Read more >Integrating Storybook with SvelteKit - YouTube
Brittney will work on getting storybook integrated with SvelteKit.One of the amazing Svelte community members on Discord shared how to get ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Awesome, glad that it works. Let me figure out with @ndelangen whether we’ll patch this into 5.3 and I’ll let you know!
@andrei-ilyukovich i can confirm the issue is fixed, i got it deployed in here, if you select the default task story you’ll see that the assets tab is there and the images are displayed, so the custom addon is working as it should, I need to check on the angular code base i have, on which i was using for updating the documentation to see if the issue is fixed as well.