Storybook: Issue with writing addon with Svelte and Storybook

Created on 14 Jan 2020  ·  27Comments  ·  Source: storybookjs/storybook

Describe 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:

  1. Follow the tutorial until the mentioned section
  2. Follow the steps in that section
  3. Run npm storybook
  4. 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.

svelte documentation
Source
picture jonniebigodes

Most helpful comment

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!

picture shilman on 9 Feb 2020
👍2

All 27 comments

@shilman it looks like it is treating a file that ends in /register.js as a preset? What's going on with the escaping. @jonniebigodes are you on windows?

tmeasday picture tmeasday on 15 Jan 2020

@tmeasday yes..yes i am...i'm running windows 10. Also to add a bit more context it seems that using the naming scheme provided in the documentation will yeld the same result.

jonniebigodes picture jonniebigodes on 15 Jan 2020

@tmeasday @jonniebigodes I think the parsing code has a problem with relative paths. Open PR here, which I'll get merged/released today: https://github.com/storybookjs/storybook/pull/9454

shilman picture shilman on 15 Jan 2020

@shilman thanks for the speedy fix. I'll be on the lookout and check this pr and when i'ts merged bump Storybook version to check it out.

jonniebigodes picture jonniebigodes on 15 Jan 2020

I've checked that a new pr went through and a new Storybook version was released and i updated my version to 5.3.4 and the issue still persists, still getting the same error.

As a test i changed ./storybook/main.js from:

module.exports = {
  stories: ["../src/components/**/*.stories.js"],
  addons: [
    "@storybook/addon-actions",
    "@storybook/addon-links",
    "@storybook/addon-knobs",
    require.resolve('./addons/register.js')
  ]
};

to:

module.exports = {
  stories: ["../src/components/**/*.stories.js"],
  addons: [
    "@storybook/addon-actions",
    "@storybook/addon-links",
    "@storybook/addon-knobs",
    "./addons/register.js"
  ]
};

and running npm run storybook yelds the following:

WARN force closed preview build

ModuleNotFoundError: Module not found: Error: Can't resolve './addons/register.js' in '\learnstorybook_with_svelte\taskbox-storybook-uniconfig'
    at factory.create (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\webpack\lib\Compilation.js:925:10)
    at factory (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\webpack\lib\NormalModuleFactory.js:401:22)
    at resolver (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\webpack\lib\NormalModuleFactory.js:130:21)
    at asyncLib.parallel (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\webpack\lib\NormalModuleFactory.js:224:22)
    at \learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\neo-async\async.js:2830:7
    at \learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\neo-async\async.js:6877:13
    at normalResolver.resolve (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\webpack\lib\NormalModuleFactory.js:214:25)
    at doResolve (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\enhanced-resolve\lib\Resolver.js:213:14)
    at hook.callAsync (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\enhanced-resolve\lib\Resolver.js:285:5)
    at _fn0 (eval at create (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at resolver.doResolve (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:44:7)
    at hook.callAsync (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\enhanced-resolve\lib\Resolver.js:285:5)
    at _fn0 (eval at create (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at hook.callAsync (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\enhanced-resolve\lib\Resolver.js:285:5)
    at _fn0 (eval at create (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:27:1)
    at resolver.doResolve (\learnstorybook_with_svelte\taskbox-storybook-uniconfig\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:67:43)
resolve './addons/register.js' in '\learnstorybook_with_svelte\taskbox-storybook-uniconfig'
  using description file: \learnstorybook_with_svelte\taskbox-storybook-uniconfig\package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: \learnstorybook_with_svelte\taskbox-storybook-uniconfig\package.json (relative path: ./addons/register.js)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        \learnstorybook_with_svelte\taskbox-storybook-uniconfig\addons\register.js doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        \learnstorybook_with_svelte\taskbox-storybook-uniconfig\addons\register.js.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        \learnstorybook_with_svelte\taskbox-storybook-uniconfig\addons\register.js.js doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        \learnstorybook_with_svelte\taskbox-storybook-uniconfig\addons\register.js.jsx doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        \learnstorybook_with_svelte\taskbox-storybook-uniconfig\addons\register.js.json doesn't exist
      as directory
        \learnstorybook_with_svelte\taskbox-storybook-uniconfig\addons\register.js doesn't exist

WARN FATAL broken build!, will close the process,
WARN Fix the error below and restart storybook.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] storybook: `start-storybook -p 6006 -s public`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] storybook script.
jonniebigodes picture jonniebigodes on 16 Jan 2020

@ndelangen any idea what's going on here?

shilman picture shilman on 16 Jan 2020

Just did @shilman, removed node_modules and updated package.json to the following

{
...
"devDependencies": {
    "@babel/core": "^7.8.0",
    "@babel/preset-react": "^7.8.3",
    "@rollup/plugin-commonjs": "^11.0.0",
    "@rollup/plugin-node-resolve": "^6.0.0",
    "@storybook/addon-actions": "^5.3.4",
    "@storybook/addon-knobs": "^5.3.4",
    "@storybook/addon-links": "^5.3.4",
    "@storybook/addon-storyshots": "^5.3.4",
    "@storybook/addons": "^5.3.4",
    "@storybook/api": "^5.3.4",
    "@storybook/components": "^5.3.4",
    "@storybook/svelte": "^5.3.4",
    "@storybook/theming": "^5.3.4",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/svelte": "^1.11.0",
    "babel-loader": "^8.0.6",
    "jest": "^24.9.0",
    "jest-transform-svelte": "^2.1.0",
    "rollup": "^1.20.0",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^5.1.2",
    "storybook-chromatic": "^3.4.1",
    "svelte": "^3.17.0",
    "svelte-loader": "^2.13.6"
  },
}

Ran npm install and issued npm run storybook and got the same error.
Just committed the code to the repo i've mentioned in the description

jonniebigodes picture jonniebigodes on 16 Jan 2020

To add more context, while working on the updates for the angular documentation, the same issue is present. And this is based on version 5.3.5

jonniebigodes picture jonniebigodes on 17 Jan 2020

I'll add this to my todo list, @jonniebigodes is this repo the way to reproduce the problem?:
https://github.com/jonniebigodes/updated-intro-to-storybook-with-svelte

ndelangen picture ndelangen on 23 Jan 2020

@ndelangen yes, the code in the repo was the one used for the updates on the documentation for >=5.3

jonniebigodes picture jonniebigodes on 24 Jan 2020

PR is open!

ndelangen picture ndelangen on 27 Jan 2020

@ndelangen thank you for the time and effort you put into this.

jonniebigodes picture jonniebigodes on 27 Jan 2020
❤1

Thanks, if you'd like to help. the PR could use a review ;)

ndelangen picture ndelangen on 28 Jan 2020

We are also having problems with relative paths and using path.resolve() for register and presets. Would be great if a fix could be merged ASAP.

@shilman

LeeBurton picture LeeBurton on 5 Feb 2020
👍1

Jiminy cricket!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.7 containing PR #9648 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

shilman picture shilman on 7 Feb 2020

@shilman and @ndelangen sorry for not responding sooner. I'm going to re-run the code again with this alpha version and check if everything is ok and we proceed from there. Sounds good?

jonniebigodes picture jonniebigodes on 7 Feb 2020

@shilman and @ndelangen just just updated everything related to Storybook to the alpha version mentioned, so now my package.json file looks like the following:

{
"rest of the configuration is ommited for brevity":"",
"devDependencies": {
    "@babel/core": "^7.8.0",
    "@babel/preset-react": "^7.8.3",
    "@rollup/plugin-commonjs": "^11.0.0",
    "@rollup/plugin-node-resolve": "^6.0.0",
    "@storybook/addon-actions": "^6.0.0-alpha.8",
    "@storybook/addon-knobs": "^6.0.0-alpha.8",
    "@storybook/addon-links": "^6.0.0-alpha.8",
    "@storybook/addon-storyshots": "^6.0.0-alpha.8",
    "@storybook/addons": "^6.0.0-alpha.8",
    "@storybook/api": "^6.0.0-alpha.8",
    "@storybook/components": "^6.0.0-alpha.8",
    "@storybook/svelte": "^6.0.0-alpha.8",
    "@storybook/theming": "^6.0.0-alpha.8",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/svelte": "^1.11.0",
    "babel-loader": "^8.0.6",
    "jest": "^24.9.0",
    "jest-transform-svelte": "^2.1.0",
    "rollup": "^1.20.0",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^5.1.2",
    "storybook-chromatic": "^3.4.1",
    "svelte": "^3.17.0",
    "svelte-loader": "^2.13.6"
  },
}

Issuing npm run storybook storybook now yelds:

Failed to load preset: " \\taskbox-storybook-uniconfig\\.storybook\\addons\\register.js" on level 1
ERR!  taskbox-storybook-uniconfig\.storybook\addons\register.js:1
ERR! import React, { Fragment } from "react";
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Cannot use import statement outside a module
ERR!     at Module._compile (internal/modules/cjs/loader.js:891:18)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:811:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:723:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:848:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at interopRequireDefault ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:164:18)
ERR!     at loadPreset ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:174:22)
ERR!     at  taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:230:20
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:229:18)
ERR!     at loadPreset ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:194:18)
ERR!     at  taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:230:20
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:229:18)
ERR!     at getPresets ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:279:25)
ERR!   taskbox-storybook-uniconfig\.storybook\addons\register.js:1
ERR! import React, { Fragment } from "react";
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Cannot use import statement outside a module
ERR!     at Module._compile (internal/modules/cjs/loader.js:891:18)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:811:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:723:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:848:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at interopRequireDefault ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:164:18)
ERR!     at loadPreset ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:174:22)
ERR!     at  taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:230:20
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:229:18)
ERR!     at loadPreset ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:194:18)
ERR!     at  taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:230:20
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:229:18)
ERR!     at getPresets ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:279:25) {
ERR!   stack: ' \\taskbox-storybook-uniconfig\\.storybook\\addons\\register.js:1\n' +
ERR!     'import React, { Fragment } from "react";\n' +
ERR!     '^^^^^^\n' +
ERR!     '\n' +
ERR!     'SyntaxError: Cannot use import statement outside a module\n' +
ERR!     '    at Module._compile (internal/modules/cjs/loader.js:891:18)\n' +
ERR!     '    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)\n' +
ERR!     '    at Module.load (internal/modules/cjs/loader.js:811:32)\n' +
ERR!     '    at Function.Module._load (internal/modules/cjs/loader.js:723:14)\n' +
ERR!     '    at Module.require (internal/modules/cjs/loader.js:848:19)\n' +
ERR!     '    at require (internal/modules/cjs/helpers.js:74:18)\n' +
ERR!     '    at interopRequireDefault ( \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:164:18)\n' +
ERR!     '    at loadPreset ( \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:174:22)\n' +
ERR!     '    at  \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:230:20\n' +
ERR!     '    at Array.reduce (<anonymous>)\n' +
ERR!     '    at loadPresets ( \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:229:18)\n' +
ERR!     '    at loadPreset ( \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:194:18)\n' +
ERR!     '    at  \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:230:20\n' +
ERR!     '    at Array.reduce (<anonymous>)\n' +
ERR!     '    at loadPresets ( \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:229:18)\n' +
ERR!     '    at getPresets ( \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:279:25)'
ERR! }
info => Loading presets
WARN   Failed to load preset: " \\taskbox-storybook-uniconfig\\.storybook\\addons\\register.js" on level 1
ERR!  taskbox-storybook-uniconfig\.storybook\addons\register.js:1
ERR! import React, { Fragment } from "react";
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Cannot use import statement outside a module
ERR!     at Module._compile (internal/modules/cjs/loader.js:891:18)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:811:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:723:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:848:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at interopRequireDefault ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:164:18)
ERR!     at loadPreset ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:174:22)
ERR!     at  taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:230:20
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:229:18)
ERR!     at loadPreset ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:194:18)
ERR!     at  taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:230:20
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:229:18)
ERR!     at getPresets ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:279:25)
ERR!   taskbox-storybook-uniconfig\.storybook\addons\register.js:1
ERR! import React, { Fragment } from "react";
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Cannot use import statement outside a module
ERR!     at Module._compile (internal/modules/cjs/loader.js:891:18)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:811:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:723:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:848:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at interopRequireDefault ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:164:18)
ERR!     at loadPreset ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:174:22)
ERR!     at  taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:230:20
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:229:18)
ERR!     at loadPreset ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:194:18)
ERR!     at  taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:230:20
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:229:18)
ERR!     at getPresets ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:279:25) {
ERR!   stack: ' \\taskbox-storybook-uniconfig\\.storybook\\addons\\register.js:1\n' +
ERR!     'import React, { Fragment } from "react";\n' +
ERR!     '^^^^^^\n' +
ERR!     '\n' +
ERR!     'SyntaxError: Cannot use import statement outside a module\n' +
ERR!     '    at Module._compile (internal/modules/cjs/loader.js:891:18)\n' +
ERR!     '    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)\n' +
ERR!     '    at Module.load (internal/modules/cjs/loader.js:811:32)\n' +
ERR!     '    at Function.Module._load (internal/modules/cjs/loader.js:723:14)\n' +
ERR!     '    at Module.require (internal/modules/cjs/loader.js:848:19)\n' +
ERR!     '    at require (internal/modules/cjs/helpers.js:74:18)\n' +
ERR!     '    at interopRequireDefault ( \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:164:18)\n' +
ERR!     '    at loadPreset ( \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:174:22)\n' +
ERR!     '    at  \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:230:20\n' +
ERR!     '    at Array.reduce (<anonymous>)\n' +
ERR!     '    at loadPresets ( \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:229:18)\n' +
ERR!     '    at loadPreset ( \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:194:18)\n' +
ERR!     '    at  \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:230:20\n' +
ERR!     '    at Array.reduce (<anonymous>)\n' +
ERR!     '    at loadPresets ( \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:229:18)\n' +
ERR!     '    at getPresets ( \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:279:25)'
ERR! }
info => Loading config/preview file in "./.storybook".
info => Adding stories defined in ".storybook\main.js".
````

Created a new addon in a new file called `example-addon.js` with the following code:

```javascript
const React = require("react");
const {
  useParameter,
  useStorybookState,
  useAddonState
} = require("@storybook/api");
const { addons, types } = require("@storybook/addons");
const { AddonPanel, ActionBar } = require("@storybook/components");
const { styled } = require("@storybook/theming");
const getUrl = input => {
  return typeof input === "string" ? input : input.url;
};

const Iframe = styled.iframe({
  width: "100%",
  height: "100%",
  border: "0 none"
});
const Img = styled.img({
  width: "100%",
  height: "100%",
  border: "0 none",
  objectFit: "contain"
});

const Asset = ({ url }) => {
  if (!url) {
    return null;
  }
  if (url.match(/\.(png|gif|jpeg|tiff|svg|anpg|webp)/)) {
    return <Img alt="" src={url} />;
  }

  return <Iframe title={url} src={url} />;
};

export const Content = () => {
  const results = useParameter("assets", []); // story's parameter being retrieved here
  const [selected, setSelected] = useAddonState("my/design-assets", 0); // addon state being persisted here
  const { storyId } = useStorybookState(); // the story«s unique identifier being retrieved from Storybook global state

  if (results.length === 0) {
    return null;
  }

  if (results.length && !results[selected]) {
    setSelected(0);
    return null;
  }

  const url = getUrl(results[selected]).replace("{id}", storyId);

  return (
    <React.Fragment>
      <Asset url={url} />
      {results.length > 1 ? (
        <ActionBar
          actionItems={results.map((i, index) => ({
            title: typeof i === "string" ? `asset #${index + 1}` : i.name,
            onClick: () => setSelected(index)
          }))}
        />
      ) : null}
    </React.Fragment>
  );
};

addons.register("my/design-assets", () => {
  addons.add("design-assets/panel", {
    title: "assets",
    type: types.PANEL,
    render: ({ active, key }) => (
      <AddonPanel active={active} key={key}>
        <Content />
      </AddonPanel>
    )
  });
});

Changed .storybook/main.js to the following:

module.exports = {
  stories: ["../src/components/**/*.stories.js"],
  addons: [
    "@storybook/addon-actions",
    "@storybook/addon-links",
    "@storybook/addon-knobs",
    require.resolve('./addons/example-addon.js')
  ]
};

Issuing npm run storybook now yelds the following:

WARN   Failed to load preset: " \\taskbox-storybook-uniconfig\\.storybook\\addons\\example-addon.js" on level 1
ERR!  taskbox-storybook-uniconfig\.storybook\addons\example-addon.js:31
ERR!     return <Img alt="" src={url} />;
ERR!            ^
ERR!
ERR! SyntaxError: Unexpected token '<'
ERR!     at Module._compile (internal/modules/cjs/loader.js:891:18)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:811:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:723:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:848:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at interopRequireDefault ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:164:18)
ERR!     at loadPreset ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:174:22)
ERR!     at  taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:230:20
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:229:18)
ERR!     at loadPreset ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:194:18)
ERR!     at  taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:230:20
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:229:18)
ERR!     at getPresets ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:279:25)
ERR!   taskbox-storybook-uniconfig\.storybook\addons\example-addon.js:31
ERR!     return <Img alt="" src={url} />;
ERR!            ^
ERR!
ERR! SyntaxError: Unexpected token '<'
ERR!     at Module._compile (internal/modules/cjs/loader.js:891:18)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:811:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:723:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:848:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at interopRequireDefault ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:164:18)
ERR!     at loadPreset ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:174:22)
ERR!     at  taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:230:20
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:229:18)
ERR!     at loadPreset ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:194:18)
ERR!     at  taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:230:20
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:229:18)
ERR!     at getPresets ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:279:25) {
ERR!   stack: ' \\taskbox-storybook-uniconfig\\.storybook\\addons\\example-addon.js:31\n' +
ERR!     '    return <Img alt="" src={url} />;\n' +
ERR!     '           ^\n' +
ERR!     '\n' +
ERR!     "SyntaxError: Unexpected token '<'\n" +
ERR!     '    at Module._compile (internal/modules/cjs/loader.js:891:18)\n' +
ERR!     '    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)\n' +
ERR!     '    at Module.load (internal/modules/cjs/loader.js:811:32)\n' +
ERR!     '    at Function.Module._load (internal/modules/cjs/loader.js:723:14)\n' +
ERR!     '    at Module.require (internal/modules/cjs/loader.js:848:19)\n' +
ERR!     '    at require (internal/modules/cjs/helpers.js:74:18)\n' +
ERR!     '    at interopRequireDefault ( \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:164:18)\n' +
ERR!     '    at loadPreset ( \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:174:22)\n' +
ERR!     '    at  \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:230:20\n' +
ERR!     '    at Array.reduce (<anonymous>)\n' +
ERR!     '    at loadPresets ( \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:229:18)\n' +
ERR!     '    at loadPreset ( \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:194:18)\n' +
ERR!     '    at  \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:230:20\n' +
ERR!     '    at Array.reduce (<anonymous>)\n' +
ERR!     '    at loadPresets ( \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:229:18)\n' +
ERR!     '    at getPresets ( \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:279:25)'
ERR! }
info => Loading presets
WARN   Failed to load preset: " \\taskbox-storybook-uniconfig\\.storybook\\addons\\example-addon.js" on level 1
ERR!  taskbox-storybook-uniconfig\.storybook\addons\example-addon.js:31
ERR!     return <Img alt="" src={url} />;
ERR!            ^
ERR!
ERR! SyntaxError: Unexpected token '<'
ERR!     at Module._compile (internal/modules/cjs/loader.js:891:18)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:811:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:723:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:848:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at interopRequireDefault ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:164:18)
ERR!     at loadPreset ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:174:22)
ERR!     at  taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:230:20
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:229:18)
ERR!     at loadPreset ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:194:18)
ERR!     at  taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:230:20
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:229:18)
ERR!     at getPresets ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:279:25)
ERR!   taskbox-storybook-uniconfig\.storybook\addons\example-addon.js:31
ERR!     return <Img alt="" src={url} />;
ERR!            ^
ERR!
ERR! SyntaxError: Unexpected token '<'
ERR!     at Module._compile (internal/modules/cjs/loader.js:891:18)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:811:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:723:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:848:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at interopRequireDefault ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:164:18)
ERR!     at loadPreset ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:174:22)
ERR!     at  taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:230:20
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:229:18)
ERR!     at loadPreset ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:194:18)
ERR!     at  taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:230:20
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:229:18)
ERR!     at getPresets ( taskbox-storybook-uniconfig\node_modules\@storybook\svelte\node_modules\@storybook\core\dist\server\presets.js:279:25) {
ERR!   stack: ' \\taskbox-storybook-uniconfig\\.storybook\\addons\\example-addon.js:31\n' +
ERR!     '    return <Img alt="" src={url} />;\n' +
ERR!     '           ^\n' +
ERR!     '\n' +
ERR!     "SyntaxError: Unexpected token '<'\n" +
ERR!     '    at Module._compile (internal/modules/cjs/loader.js:891:18)\n' +
ERR!     '    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)\n' +
ERR!     '    at Module.load (internal/modules/cjs/loader.js:811:32)\n' +
ERR!     '    at Function.Module._load (internal/modules/cjs/loader.js:723:14)\n' +
ERR!     '    at Module.require (internal/modules/cjs/loader.js:848:19)\n' +
ERR!     '    at require (internal/modules/cjs/helpers.js:74:18)\n' +
ERR!     '    at interopRequireDefault ( \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:164:18)\n' +
ERR!     '    at loadPreset ( \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:174:22)\n' +
ERR!     '    at  \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:230:20\n' +
ERR!     '    at Array.reduce (<anonymous>)\n' +
ERR!     '    at loadPresets ( \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:229:18)\n' +
ERR!     '    at loadPreset ( \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:194:18)\n' +
ERR!     '    at  \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:230:20\n' +
ERR!     '    at Array.reduce (<anonymous>)\n' +
ERR!     '    at loadPresets ( \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:229:18)\n' +
ERR!     '    at getPresets ( \\taskbox-storybook-uniconfig\\node_modules\\@storybook\\svelte\\node_modules\\@storybook\\core\\dist\\server\\presets.js:279:25)'
ERR! }
info => Loading config/preview file in "./.storybook".
info => Adding stories defined in ".storybook\main.js".
info => Using default Webpack setup.
webpack built cc9eb291906723a2bc43 in 13668ms
╭────────────────────────────────────────────────────╮
│                                                    │
│   Storybook 6.0.0-alpha.8 started                  │
│   16 s for manager and 15 s for preview            │
│                                                    │
│    Local:            http://localhost:6006/        │
│    On your network:  http://192.168.0.144:6006/    │
│                                                    │
╰────────────────────────────────────────────────────╯

Feel free to provide feedback!

jonniebigodes picture jonniebigodes on 8 Feb 2020

@jonniebigodes Possibly relevant? https://github.com/storybookjs/storybook/issues/9773

shilman picture shilman on 9 Feb 2020

@shilman that was spot on! i've updated my .storybook/main.js to the following:

module.exports = {
  stories: ["../src/components/**/*.stories.js"],
  addons: [
    "@storybook/addon-actions",
    "@storybook/addon-links",
    "@storybook/addon-knobs",
    './.storybook/addons/register.js'
  ]
};

Issued npm run storybook and i'm presented with the following:

storybook_custom_addon_runs_with_alpha

It buit and the addon is working as expected.

A quick question if you don't mind. Will this be only available on version 6 or will it be featured in a minor version of 5.3? I'm asking this so that i can make the changes to the documentation accordingly.

Feel free to provide feedback and it goes without saying, thank you for the quick fix and also to @ndelangen for the work he put into this.

jonniebigodes picture jonniebigodes on 9 Feb 2020

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!

shilman picture shilman on 9 Feb 2020
👍2

@shilman am I correct that fix should work properly for loading addons for any framewoork not just Svelte? I use @storybook/angular and the error still persists even with v6.0.0-alpha.9. Initially I thought that is was related to .tsx file extension, then changed it to .js but no luck:
info @storybook/angular v6.0.0-alpha.9 info info => Loading static files from: C:\Work\planck\web-components\dist\storybook-assets . info => Loading presets WARN Failed to load preset: "C:\\Work\\planck\\web-components\\src\\storybook\\config\\changelog\\register.js" on level 1 ERR! C:\Work\planck\web-components\src\storybook\config\changelog\register.js:1 ERR! (function (exports, require, module, __filename, __dirname) { import addons from "@storybook/addons"; 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:657:28) ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
@jonniebigodes could you please confirm that ./.storybook/addons/register.js just works fine in your setup? It looks strange to me as far as relative paths should not be supported yet as #9773 is still open.

andrei-ilyukovich picture andrei-ilyukovich on 11 Feb 2020

@andrei-ilyukovich the point of #9773 is not that the relative path convention is inconsistent in main.js, not that relative paths don't work. we've merged in @ndelangen 's fix into 6.0-alpha, and might patch it into 5.3 (TBD). Your issue seems to be a separate issue, probably related to your webpack/babel setup, which might be misconfigured for angular. Mind opening a separate issue with a repro?

shilman picture shilman on 11 Feb 2020

@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.

jonniebigodes picture jonniebigodes on 11 Feb 2020
❤1

short answer:
NO this cannot be ported to 5.3.

long answer:
If we port this to 5.3 it will break babel 6 compatibility in a minor version

ndelangen picture ndelangen on 11 Feb 2020

@jonniebigodes I'd be super glad to have some help documenting. You can target the next branch, because we cherry-pick from next to master anyway.

ndelangen picture ndelangen on 11 Feb 2020

@shilman I've created a separate issue #9830 with small repo to play with

andrei-ilyukovich picture andrei-ilyukovich on 12 Feb 2020

@shilman and @ndelangen once again thanks for the help in triaging this. If you both don't mind i'm going to close the issue as it's answered

jonniebigodes picture jonniebigodes on 21 Feb 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

wahengchang picture wahengchang  ·  3Comments
oriSomething picture oriSomething  ·  3Comments
shilman picture shilman  ·  3Comments
levithomason picture levithomason  ·  3Comments
tlrobinson picture tlrobinson  ·  3Comments