Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Impossible to use the Notes addon as a panel

See original GitHub issue

Describe the bug

Using the new configuration format, it is not possible to use the “Notes” addon as a panel anymore.

To Reproduce

Here is our main.js, as documented here:

module.exports = {
  stories: ['./stories/*.story.tsx'],
  addons: [
    '@storybook/addon-knobs',
    '@storybook/addon-actions',
    '@storybook/addon-a11y',
    '@storybook/addon-notes/register-panel',
  ],
};

When starting up Storybook with start-storybook --config-dir storybook --port 9001 --static-dir ., we get the following errors:

info @storybook/react v5.3.3
info
info => Loading static files from: /Users/astorije/my-repository .
info => Loading presets
WARN   Failed to load preset: "@storybook/addon-notes/register-panel" on level 1
ERR! /Users/astorije/my-repository/node_modules/@storybook/components/node_modules/react-syntax-highlighter/dist/esm/languages/prism/jsx.js:1
ERR! import jsx from "refractor/lang/jsx.js";
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Cannot use import statement outside a module
ERR!     at Module._compile (internal/modules/cjs/loader.js:895:18)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:815:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:727:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:852:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at Object.<anonymous> (/Users/astorije/my-repository/node_modules/@storybook/components/dist/syntaxhighlighter/syntaxhighlighter.js:54:35)
ERR!     at Module._compile (internal/modules/cjs/loader.js:959:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:815:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:727:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:852:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at Object.<anonymous> (/Users/astorije/my-repository/node_modules/@storybook/components/dist/index.js:218:26)
ERR!     at Module._compile (internal/modules/cjs/loader.js:959:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
ERR!  /Users/astorije/my-repository/node_modules/@storybook/components/node_modules/react-syntax-highlighter/dist/esm/languages/prism/jsx.js:1
ERR! import jsx from "refractor/lang/jsx.js";
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Cannot use import statement outside a module
ERR!     at Module._compile (internal/modules/cjs/loader.js:895:18)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:815:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:727:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:852:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at Object.<anonymous> (/Users/astorije/my-repository/node_modules/@storybook/components/dist/syntaxhighlighter/syntaxhighlighter.js:54:35)
ERR!     at Module._compile (internal/modules/cjs/loader.js:959:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:815:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:727:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:852:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at Object.<anonymous> (/Users/astorije/my-repository/node_modules/@storybook/components/dist/index.js:218:26)
ERR!     at Module._compile (internal/modules/cjs/loader.js:959:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10) {
ERR!   stack: '/Users/astorije/my-repository/node_modules/@storybook/components/node_modules/react-syntax-highlighter/dist/esm/languages/prism/jsx.js:1\n' +
ERR!     'import jsx from "refractor/lang/jsx.js";\n' +
ERR!     '^^^^^^\n' +
ERR!     '\n' +
ERR!     'SyntaxError: Cannot use import statement outside a module\n' +
ERR!     '    at Module._compile (internal/modules/cjs/loader.js:895:18)\n' +
ERR!     '    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)\n' +
ERR!     '    at Module.load (internal/modules/cjs/loader.js:815:32)\n' +
ERR!     '    at Function.Module._load (internal/modules/cjs/loader.js:727:14)\n' +
ERR!     '    at Module.require (internal/modules/cjs/loader.js:852:19)\n' +
ERR!     '    at require (internal/modules/cjs/helpers.js:74:18)\n' +
ERR!     '    at Object.<anonymous> (/Users/astorije/my-repository/node_modules/@storybook/components/dist/syntaxhighlighter/syntaxhighlighter.js:54:35)\n' +
ERR!     '    at Module._compile (internal/modules/cjs/loader.js:959:30)\n' +
ERR!     '    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)\n' +
ERR!     '    at Module.load (internal/modules/cjs/loader.js:815:32)\n' +
ERR!     '    at Function.Module._load (internal/modules/cjs/loader.js:727:14)\n' +
ERR!     '    at Module.require (internal/modules/cjs/loader.js:852:19)\n' +
ERR!     '    at require (internal/modules/cjs/helpers.js:74:18)\n' +
ERR!     '    at Object.<anonymous> (/Users/astorije/my-repository/node_modules/@storybook/components/dist/index.js:218:26)\n' +
ERR!     '    at Module._compile (internal/modules/cjs/loader.js:959:30)\n' +
ERR!     '    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)'
ERR! }
info => Loading presets
WARN   Failed to load preset: "@storybook/addon-notes/register-panel" on level 1
ERR! /Users/astorije/my-repository/node_modules/@storybook/components/node_modules/react-syntax-highlighter/dist/esm/languages/prism/jsx.js:1
ERR! import jsx from "refractor/lang/jsx.js";
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Cannot use import statement outside a module
ERR!     at Module._compile (internal/modules/cjs/loader.js:895:18)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:815:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:727:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:852:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at Object.<anonymous> (/Users/astorije/my-repository/node_modules/@storybook/components/dist/syntaxhighlighter/syntaxhighlighter.js:54:35)
ERR!     at Module._compile (internal/modules/cjs/loader.js:959:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:815:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:727:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:852:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at Object.<anonymous> (/Users/astorije/my-repository/node_modules/@storybook/components/dist/index.js:218:26)
ERR!     at Module._compile (internal/modules/cjs/loader.js:959:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
ERR!  /Users/astorije/my-repository/node_modules/@storybook/components/node_modules/react-syntax-highlighter/dist/esm/languages/prism/jsx.js:1
ERR! import jsx from "refractor/lang/jsx.js";
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Cannot use import statement outside a module
ERR!     at Module._compile (internal/modules/cjs/loader.js:895:18)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:815:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:727:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:852:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at Object.<anonymous> (/Users/astorije/my-repository/node_modules/@storybook/components/dist/syntaxhighlighter/syntaxhighlighter.js:54:35)
ERR!     at Module._compile (internal/modules/cjs/loader.js:959:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:815:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:727:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:852:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at Object.<anonymous> (/Users/astorije/my-repository/node_modules/@storybook/components/dist/index.js:218:26)
ERR!     at Module._compile (internal/modules/cjs/loader.js:959:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10) {
ERR!   stack: '/Users/astorije/my-repository/node_modules/@storybook/components/node_modules/react-syntax-highlighter/dist/esm/languages/prism/jsx.js:1\n' +
ERR!     'import jsx from "refractor/lang/jsx.js";\n' +
ERR!     '^^^^^^\n' +
ERR!     '\n' +
ERR!     'SyntaxError: Cannot use import statement outside a module\n' +
ERR!     '    at Module._compile (internal/modules/cjs/loader.js:895:18)\n' +
ERR!     '    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)\n' +
ERR!     '    at Module.load (internal/modules/cjs/loader.js:815:32)\n' +
ERR!     '    at Function.Module._load (internal/modules/cjs/loader.js:727:14)\n' +
ERR!     '    at Module.require (internal/modules/cjs/loader.js:852:19)\n' +
ERR!     '    at require (internal/modules/cjs/helpers.js:74:18)\n' +
ERR!     '    at Object.<anonymous> (/Users/astorije/my-repository/node_modules/@storybook/components/dist/syntaxhighlighter/syntaxhighlighter.js:54:35)\n' +
ERR!     '    at Module._compile (internal/modules/cjs/loader.js:959:30)\n' +
ERR!     '    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)\n' +
ERR!     '    at Module.load (internal/modules/cjs/loader.js:815:32)\n' +
ERR!     '    at Function.Module._load (internal/modules/cjs/loader.js:727:14)\n' +
ERR!     '    at Module.require (internal/modules/cjs/loader.js:852:19)\n' +
ERR!     '    at require (internal/modules/cjs/helpers.js:74:18)\n' +
ERR!     '    at Object.<anonymous> (/Users/astorije/my-repository/node_modules/@storybook/components/dist/index.js:218:26)\n' +
ERR!     '    at Module._compile (internal/modules/cjs/loader.js:959:30)\n' +
ERR!     '    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)'
ERR! }
info => Loading config/preview file in "storybook".
info => Adding stories defined in "storybook/main.js".

Storybook starts up but the “Notes” tab is missing.

Expected behavior

We expect the “Notes” tab to appear as a panel when using the documented format:

Screen Shot 2020-01-15 at 6 11 02 PM

When using the following main.js:

module.exports = {
  stories: ['./stories/*.story.tsx'],
  addons: [
    '@storybook/addon-knobs',
    '@storybook/addon-actions',
    '@storybook/addon-a11y',
    '@storybook/addon-notes',
  ],
};

Storybook starts correctly and the “Notes” tab is available, but obviously not as a panel:

Screen Shot 2020-01-15 at 6 15 13 PM

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
  Binaries:
    Node: 12.14.0 - ~/.nvm/versions/node/v12.14.0/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.14.0/bin/npm
  Browsers:
    Safari: 12.1.2
  npmPackages:
    @storybook/addon-a11y: 5.3.3 => 5.3.3
    @storybook/addon-actions: 5.3.3 => 5.3.3
    @storybook/addon-knobs: 5.3.3 => 5.3.3
    @storybook/addon-notes: 5.3.3 => 5.3.3
    @storybook/addons: 5.3.3 => 5.3.3
    @storybook/node-logger: 5.3.3 => 5.3.3
    @storybook/react: 5.3.3 => 5.3.3
    @storybook/theming: 5.3.3 => 5.3.3

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:8 (6 by maintainers)

github_iconTop GitHub Comments

2reactions
shilmancommented, Jan 16, 2020

Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.5 containing PR #9497 that references this issue. Upgrade today to try it out!

1reaction
astorijecommented, Jan 16, 2020

I can confirm that v5.3.5 fixes the issue. Thanks @shilman! 🙏

Read more comments on GitHub >

github_iconTop Results From Across the Web

Addon knowledge base - Storybook - JS.ORG
This page details additional information about addon creation. Use it as a quick reference guide when creating your own addons. Disable the addon...
Read more >
World of Warcraft Addons: You NEED to try HandyNotes! (Find ...
Download HandyNotes here! https://www.curseforge.com/wow/ addons /handynotesToday's Awesome Addon is one I've truly not appreciated enough, ...
Read more >
Pin Notes - Addons - World of Warcraft - CurseForge
This addon allows you to create in-game groups of text notes attached to the borders of the screen, they can be opened and...
Read more >
Awesome "Python Scripts & Notes" Panel
This is really an awesome AddOn! Makes your life so much easier when you work a lot with scripts. It would be awesome...
Read more >
Unable to install add-ons (extensions or themes) | Firefox Help
An inability to install an extension can be the result of problems with the extension, Firefox preferences, or the version of Firefox you...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Story roots not working as expected with 5.3

Next page

Stories appearing in reverse order in v5.3.3