Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Impossible to use the Notes addon as a panel #9480

Closed
astorije opened this issue Jan 15, 2020 · 8 comments
Closed

Impossible to use the Notes addon as a panel #9480

astorije opened this issue Jan 15, 2020 · 8 comments
Labels
addon: notes bug
Milestone
5.3.x

Comments

@astorije
Copy link
Contributor

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
@shilman shilman mentioned this issue Jan 16, 2020
Merged
@shilman
Copy link
Member

shilman commented Jan 16, 2020

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.

@shilman shilman closed this as completed Jan 16, 2020
@shilman shilman added this to the 5.3.x milestone Jan 16, 2020
@EvgenyOrekhov
Copy link

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

@shilman
Copy link
Member

shilman commented Jan 16, 2020

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

@EvgenyOrekhov
Copy link

@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
Copy link
Contributor Author

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

@shilman
Copy link
Member

shilman commented Jan 16, 2020

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

@shilman shilman reopened this Jan 16, 2020
@shilman shilman mentioned this issue Jan 16, 2020
Merged
@astorije
Copy link
Contributor Author

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

@shilman
Copy link
Member

shilman commented 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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
addon: notes bug
Projects
None yet
Milestone
5.3.x
Development

No branches or pull requests
3 participants
@astorije @shilman @EvgenyOrekhov