Storybook: Impossible to use the Notes addon as a panel

[astorije]

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:

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:

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

[shilman]

Yay!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.4 containing PR #9486 that references this issue. Upgrade today to try it out!

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

[EvgenyOrekhov]

Just tried 5.3.4, still getting the same error. Only we are using @storybook/ember.

[shilman]

@EvgenyOrekhov Can you remove node_modules & reinstall? And if that doesn't work, share your main.js config here?

[EvgenyOrekhov]

@shilman rm -rf node_modules && npm i didn't help.

main.js

module.exports = {
  stories: ["../stories/**/*.stories.js"],
  addons: [
    "@storybook/addon-knobs",
    "@storybook/addon-actions",
    "@storybook/addon-links",
    {
      name: "@storybook/addon-storysource",
      options: {
        loaderOptions: {
          prettierConfig: {
            printWidth: 80,
            singleQuote: false,
            trailingComma: "none",
            arrowParens: "always"
          }
        }
      }
    },
    "@storybook/addon-viewport",
    "@storybook/addon-notes/register-panel",
    "@storybook/addon-a11y",
    "@storybook/addon-backgrounds"
  ]
};

Storybook dependencies in package.json

{
    "@babel/core": "^7.8.3",
    "@storybook/addon-a11y": "^5.3.4",
    "@storybook/addon-actions": "^5.3.4",
    "@storybook/addon-backgrounds": "^5.3.4",
    "@storybook/addon-knobs": "^5.3.4",
    "@storybook/addon-links": "^5.3.4",
    "@storybook/addon-notes": "^5.3.4",
    "@storybook/addon-storysource": "^5.3.4",
    "@storybook/addon-viewport": "^5.3.4",
    "@storybook/addons": "^5.3.4",
    "@storybook/ember": "^5.3.4",
    "@storybook/source-loader": "^5.3.4",
    "@storybook/theming": "^5.3.4",
    "babel-loader": "^8.0.6",
    "ember-cli-storybook": "^0.1.0",
}

[astorije]

I can confirm that the problem is still present with v5.3.4. @shilman, would you mind re-opening this issue?

[shilman]

I see the problem, will fix in the next release.

[astorije]

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

[shilman]

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!