Issue with writing addon with Svelte and Storybook #9421

jonniebigodes · 2020-01-13T23:56:10Z

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:

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.

The text was updated successfully, but these errors were encountered:

tmeasday · 2020-01-14T23:07:41Z

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

jonniebigodes · 2020-01-14T23:58:49Z

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

shilman · 2020-01-15T00:58:51Z

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

jonniebigodes · 2020-01-15T17:09:54Z

@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 · 2020-01-16T18:43:10Z

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! svelte-app@1.0.0 storybook: `start-storybook -p 6006 -s public`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the svelte-app@1.0.0 storybook script.

shilman · 2020-01-16T19:01:35Z

@ndelangen any idea what's going on here?

jonniebigodes · 2020-01-16T19:02:56Z

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 · 2020-01-17T00:16:00Z

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

ndelangen · 2020-01-23T11:20:27Z

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

jonniebigodes · 2020-01-24T01:35:01Z

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

ndelangen · 2020-01-27T20:24:00Z

PR is open!

jonniebigodes · 2020-01-27T21:37:17Z

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

ndelangen · 2020-01-28T00:43:43Z

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

LeeBurton · 2020-02-05T15:44:25Z

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

shilman · 2020-02-07T16:13:06Z

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.

jonniebigodes · 2020-02-07T18:21:37Z

@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 · 2020-02-08T01:53:55Z

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

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!

shilman · 2020-02-09T07:13:26Z

@jonniebigodes Possibly relevant? #9773

jonniebigodes · 2020-02-09T17:01:03Z

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

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.

shilman · 2020-02-09T17:57:26Z

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 · 2020-02-11T09:33:49Z

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

shilman · 2020-02-11T13:35:36Z

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

jonniebigodes · 2020-02-11T16:15:45Z

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

ndelangen · 2020-02-11T17:03:14Z

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 · 2020-02-11T17:04:27Z

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

andrei-ilyukovich · 2020-02-12T14:44:15Z

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

jonniebigodes · 2020-02-21T15:01:26Z

@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

shilman added svelte documentation labels Jan 14, 2020

jonniebigodes mentioned this issue Jan 14, 2020

feat: update documentation to match version 5.3 chromaui/learnstorybook.com#251

Merged

ndelangen self-assigned this Jan 23, 2020

ndelangen mentioned this issue Jan 27, 2020

Core: Support custom addons using JSX #9648

Merged

ndelangen added this to the 5.3.x milestone Jan 27, 2020

shilman closed this as completed Feb 7, 2020

shilman reopened this Feb 8, 2020

jonniebigodes closed this as completed Feb 21, 2020

jonniebigodes mentioned this issue Feb 21, 2020

Issue with Create addon section chromaui/learnstorybook.com#284

Closed

benwoodward mentioned this issue May 3, 2020

When trying to import in components: Cannot use import statement outside a module benwoodward/elixir_svelte_render#2

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue with writing addon with Svelte and Storybook #9421

Issue with writing addon with Svelte and Storybook #9421

jonniebigodes commented Jan 13, 2020

tmeasday commented Jan 14, 2020 •

edited

jonniebigodes commented Jan 14, 2020

shilman commented Jan 15, 2020 •

edited

jonniebigodes commented Jan 15, 2020

jonniebigodes commented Jan 16, 2020 •

edited

shilman commented Jan 16, 2020

jonniebigodes commented Jan 16, 2020 •

edited

jonniebigodes commented Jan 17, 2020 •

edited

ndelangen commented Jan 23, 2020

jonniebigodes commented Jan 24, 2020

ndelangen commented Jan 27, 2020

jonniebigodes commented Jan 27, 2020

ndelangen commented Jan 28, 2020

LeeBurton commented Feb 5, 2020

shilman commented Feb 7, 2020

jonniebigodes commented Feb 7, 2020

jonniebigodes commented Feb 8, 2020

shilman commented Feb 9, 2020

jonniebigodes commented Feb 9, 2020

shilman commented Feb 9, 2020

andrei-ilyukovich commented Feb 11, 2020

shilman commented Feb 11, 2020

jonniebigodes commented Feb 11, 2020

ndelangen commented Feb 11, 2020

ndelangen commented Feb 11, 2020

andrei-ilyukovich commented Feb 12, 2020

jonniebigodes commented Feb 21, 2020

Issue with writing addon with Svelte and Storybook #9421

Issue with writing addon with Svelte and Storybook #9421

Comments

jonniebigodes commented Jan 13, 2020

tmeasday commented Jan 14, 2020 • edited

jonniebigodes commented Jan 14, 2020

shilman commented Jan 15, 2020 • edited

jonniebigodes commented Jan 15, 2020

jonniebigodes commented Jan 16, 2020 • edited

shilman commented Jan 16, 2020

jonniebigodes commented Jan 16, 2020 • edited

jonniebigodes commented Jan 17, 2020 • edited

ndelangen commented Jan 23, 2020

jonniebigodes commented Jan 24, 2020

ndelangen commented Jan 27, 2020

jonniebigodes commented Jan 27, 2020

ndelangen commented Jan 28, 2020

LeeBurton commented Feb 5, 2020

shilman commented Feb 7, 2020

jonniebigodes commented Feb 7, 2020

jonniebigodes commented Feb 8, 2020

shilman commented Feb 9, 2020

jonniebigodes commented Feb 9, 2020

shilman commented Feb 9, 2020

andrei-ilyukovich commented Feb 11, 2020

shilman commented Feb 11, 2020

jonniebigodes commented Feb 11, 2020

ndelangen commented Feb 11, 2020

ndelangen commented Feb 11, 2020

andrei-ilyukovich commented Feb 12, 2020

jonniebigodes commented Feb 21, 2020

tmeasday commented Jan 14, 2020 •

edited

shilman commented Jan 15, 2020 •

edited

jonniebigodes commented Jan 16, 2020 •

edited

jonniebigodes commented Jan 16, 2020 •

edited

jonniebigodes commented Jan 17, 2020 •

edited