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.

TypeError when using addon-centered with ReactJS

See original GitHub issue

Describe the bug An TypeError appears when I try to use addon-centered.

To Reproduce Steps to reproduce the behavior:

  1. Install @storybook/addon-centered (yarn add @storybook/addon-centered -D)
  2. Include it in the .storybook/main.js file.
  3. start storybook
  4. See the error

Obs: If a story tries to use the addon-centered, storybook still works, but the story is not centralized.

Expected behavior No error should appear, and the story should be centralized.

Code snippets .storybook/main.js:

const path = require('path');

module.exports = {
    stories: ['../**/__stories__/**/*.stories.(js|mdx)'],
    addons: [
        '@storybook/addon-actions',
        '@storybook/addon-links',
        'storybook-addon-jsx',
        '@storybook/addon-knobs',
        '@storybook/addon-notes/register-panel',
        {
            name: '@storybook/addon-docs',
            options: {
                configureJSX: true
            }
        }
    ]
}

button.stories.js:

import * as React from 'react'
import centered from '@storybook/addon-centered/react'
import Button from '../Button'

export default {
    component: Button,
    title: 'button',
    decorators: [centered]
}

export const basic = (): React.ReactNode => {
    return (
        <Button />
    )
}

System: Environment Info:

System: OS: Linux 5.3 Ubuntu 18.04.3 LTS (Bionic Beaver) CPU: (4) x64 Intel® Core™ i5-6500 CPU @ 3.20GHz Binaries: Node: 12.1.0 - ~/.nvm/versions/node/v12.1.0/bin/node Yarn: 1.17.3 - ~/.yarn/bin/yarn npm: 6.9.0 - ~/.nvm/versions/node/v12.1.0/bin/npm Browsers: Chrome: 78.0.3904.97 Firefox: 75.0

Additional Context: Complete error:

> yarn storybook                    
yarn run v1.17.3
$ start-storybook -s .storybook/public -p 9001 -c .storybook
info @storybook/react v5.3.18
info 
info => Loading static files from: /home/anny/dev/intelie/live/webapp/.storybook/public .
info => Loading presets
WARN   Failed to load preset: "@storybook/addon-centered" on level 1
ERR! TypeError: Cannot read property 'STORYBOOK_ENV' of undefined
ERR!     at /home/anny/dev/intelie/live/node_modules/@storybook/addon-centered/dist/index.js:20:25
ERR!     at deprecated (internal/util.js:67:15)
ERR!     at Object.<anonymous> (/home/anny/dev/intelie/live/node_modules/@storybook/addon-centered/dist/index.js:21:236)
ERR!     at Module._compile (internal/modules/cjs/loader.js:759:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:628:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:555:12)
ERR!     at Module.require (internal/modules/cjs/loader.js:666:19)
ERR!     at require (internal/modules/cjs/helpers.js:16:16)
ERR!     at interopRequireDefault (/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:164:18)
ERR!     at loadPreset (/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:174:22)
ERR!     at /home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:230:20
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets (/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:229:18)
ERR!     at loadPreset (/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:194:18)
ERR!     at /home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:230:20
ERR!  TypeError: Cannot read property 'STORYBOOK_ENV' of undefined
ERR!     at /home/anny/dev/intelie/live/node_modules/@storybook/addon-centered/dist/index.js:20:25
ERR!     at deprecated (internal/util.js:67:15)
ERR!     at Object.<anonymous> (/home/anny/dev/intelie/live/node_modules/@storybook/addon-centered/dist/index.js:21:236)
ERR!     at Module._compile (internal/modules/cjs/loader.js:759:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:628:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:555:12)
ERR!     at Module.require (internal/modules/cjs/loader.js:666:19)
ERR!     at require (internal/modules/cjs/helpers.js:16:16)
ERR!     at interopRequireDefault (/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:164:18)
ERR!     at loadPreset (/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:174:22)
ERR!     at /home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:230:20
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets (/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:229:18)
ERR!     at loadPreset (/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:194:18)
ERR!     at /home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:230:20 {
ERR!   stack: "TypeError: Cannot read property 'STORYBOOK_ENV' of undefined\n    at " +
ERR!     '/home/anny/dev/intelie/live/node_modules/@storybook/addon-centered/dist/index.js:20:25\n' +
ERR!     '    at deprecated (internal/util.js:67:15)\n    at Object.<anonymous> ' +
ERR!     '(/home/anny/dev/intelie/live/node_modules/@storybook/addon-centered/dist/index.js:21:236)\n' +
ERR!     '    at Module._compile (internal/modules/cjs/loader.js:759:30)\n    at ' +
ERR!     'Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)\n   ' +
ERR!     ' at Module.load (internal/modules/cjs/loader.js:628:32)\n    at ' +
ERR!     'Function.Module._load (internal/modules/cjs/loader.js:555:12)\n    at ' +
ERR!     'Module.require (internal/modules/cjs/loader.js:666:19)\n    at require ' +
ERR!     '(internal/modules/cjs/helpers.js:16:16)\n    at interopRequireDefault ' +
ERR!     '(/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:164:18)\n' +
ERR!     '    at loadPreset ' +
ERR!     '(/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:174:22)\n' +
ERR!     '    at ' +
ERR!     '/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:230:20\n' +
ERR!     '    at Array.reduce (<anonymous>)\n    at loadPresets ' +
ERR!     '(/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:229:18)\n' +
ERR!     '    at loadPreset ' +
ERR!     '(/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:194:18)\n' +
ERR!     '    at ' +
ERR!     '/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:230:20'
ERR! }
info => Loading presets
WARN   Failed to load preset: "@storybook/addon-centered" on level 1
ERR! TypeError: Cannot read property 'STORYBOOK_ENV' of undefined
ERR!     at /home/anny/dev/intelie/live/node_modules/@storybook/addon-centered/dist/index.js:20:25
ERR!     at deprecated (internal/util.js:67:15)
ERR!     at Object.<anonymous> (/home/anny/dev/intelie/live/node_modules/@storybook/addon-centered/dist/index.js:21:236)
ERR!     at Module._compile (internal/modules/cjs/loader.js:759:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:628:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:555:12)
ERR!     at Module.require (internal/modules/cjs/loader.js:666:19)
ERR!     at require (internal/modules/cjs/helpers.js:16:16)
ERR!     at interopRequireDefault (/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:164:18)
ERR!     at loadPreset (/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:174:22)
ERR!     at /home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:230:20
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets (/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:229:18)
ERR!     at loadPreset (/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:194:18)
ERR!     at /home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:230:20
ERR!  TypeError: Cannot read property 'STORYBOOK_ENV' of undefined
ERR!     at /home/anny/dev/intelie/live/node_modules/@storybook/addon-centered/dist/index.js:20:25
ERR!     at deprecated (internal/util.js:67:15)
ERR!     at Object.<anonymous> (/home/anny/dev/intelie/live/node_modules/@storybook/addon-centered/dist/index.js:21:236)
ERR!     at Module._compile (internal/modules/cjs/loader.js:759:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:628:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:555:12)
ERR!     at Module.require (internal/modules/cjs/loader.js:666:19)
ERR!     at require (internal/modules/cjs/helpers.js:16:16)
ERR!     at interopRequireDefault (/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:164:18)
ERR!     at loadPreset (/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:174:22)
ERR!     at /home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:230:20
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets (/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:229:18)
ERR!     at loadPreset (/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:194:18)
ERR!     at /home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:230:20 {
ERR!   stack: "TypeError: Cannot read property 'STORYBOOK_ENV' of undefined\n    at " +
ERR!     '/home/anny/dev/intelie/live/node_modules/@storybook/addon-centered/dist/index.js:20:25\n' +
ERR!     '    at deprecated (internal/util.js:67:15)\n    at Object.<anonymous> ' +
ERR!     '(/home/anny/dev/intelie/live/node_modules/@storybook/addon-centered/dist/index.js:21:236)\n' +
ERR!     '    at Module._compile (internal/modules/cjs/loader.js:759:30)\n    at ' +
ERR!     'Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)\n   ' +
ERR!     ' at Module.load (internal/modules/cjs/loader.js:628:32)\n    at ' +
ERR!     'Function.Module._load (internal/modules/cjs/loader.js:555:12)\n    at ' +
ERR!     'Module.require (internal/modules/cjs/loader.js:666:19)\n    at require ' +
ERR!     '(internal/modules/cjs/helpers.js:16:16)\n    at interopRequireDefault ' +
ERR!     '(/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:164:18)\n' +
ERR!     '    at loadPreset ' +
ERR!     '(/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:174:22)\n' +
ERR!     '    at ' +
ERR!     '/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:230:20\n' +
ERR!     '    at Array.reduce (<anonymous>)\n    at loadPresets ' +
ERR!     '(/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:229:18)\n' +
ERR!     '    at loadPreset ' +
ERR!     '(/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:194:18)\n' +
ERR!     '    at ' +
ERR!     '/home/anny/dev/intelie/live/node_modules/@storybook/core/dist/server/presets.js:230:20'
ERR! }
info => Loading custom babel config
info => Loading custom babel config
info => Loading config/preview file in ".storybook".
info => Adding stories defined in ".storybook/main.js".
info => Using default Webpack setup.
(node:14551) DeprecationWarning: 
  Using "import centered from '@storybook/addon-centered'" is deprecated.
  Please use either:
  "import centered from '@storybook/addon-centered/react'"
  or
  "import centered from '@storybook/addon-centered/vue'"

(node:14551) DeprecationWarning: 
  Using "import centered from '@storybook/addon-centered'" is deprecated.
  Please use either:
  "import centered from '@storybook/addon-centered/react'"
  or
  "import centered from '@storybook/addon-centered/vue'"

info => Using base config because react-scripts is not installed.
webpack built 924aa3d05f65de07312a in 10057ms

Issue Analytics

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

github_iconTop GitHub Comments

1reaction
AnnyCarolinecommented, Apr 29, 2020

Thank you very much, @yannbf. I didn’t notice this detail. After removing @storybook/addon-center it worked just fine.

The solution proposed by @jgarplind also worked, and it’s great if you want to have all the stories centralized by default. I had only to make a few adjustments:

<style>
  html {
    height: 100%;
  }

  body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

Unfortunately, the layout solution proposed by @shilman didn’t work very well. After opening the centralized block, all the others are centralized too. I tested using 6.0.0-beta.0 and v6.0.0-alpha.46. layout

1reaction
shilmancommented, Apr 13, 2020

starting in storybook 6.0 we’re deprecating addon centered and we have a built-in layout parameter that controls the layout:

https://github.com/storybookjs/storybook/blob/next/examples/official-storybook/stories/core/layout.stories.js

Give that a try?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Uncaught TypeError in React js - Stack Overflow
The problem is coming from the parent component, the one using the ProductReviews component. – Emile Bergeron. Apr 16 at 17:17. look sir...
Read more >
TypeError Handling in React.js for Map Function | Pluralsight
Learn why this error occurs and how to fix it: Uncaught TypeError: this.props.data.map is not a function.
Read more >
Test Utilities - React
ReactTestUtils makes it easy to test React components in the testing framework of your choice. At Facebook we use Jest for painless JavaScript...
Read more >
React JS UNDEFINED Solution | Reactjs Learning - YouTube
TypeError : Cannot read property 'map' of undefined- Map is not a function- Map is not ... I created ReactJS app by using...
Read more >
TypeError: Cannot destructure property '…' of 'Object ...
ReactJS Pass Functions through Context — TypeError: Cannot destructure property '…' of 'Object(…)(…)' as it is undefined. Last night I spent around 3...
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

Use Tailwindcss and css modules with Storybook

Next page

Module not found error doesn't properly exit during build