Storybook: TypeError when using addon-centered with ReactJS

[AnnyCaroline]

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(R) Core(TM) 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

[shilman]

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?

[jgarplind]

I made a workaround which works fine for my simple purposes (as my team is not ready to upgrade to 6.x yet)

.storybook/preview-body.html

<div id="custom-root"></div>

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

[yannbf]

Hey @AnnyCaroline I could not reproduce the issue, and I made a setup quite similar to yours, using addon-centered (version 5.3.18) both on component story format and storiesOf format. It worked on both.

Could you provide a minimal repo so I can better assist you with the issue?

[yannbf]

OK I managed to reproduce the issue! Even though your example of main.js doesn't have @storybook/addon-centered in the addons property, you do say to include in there in your steps. After doing that the issue happens.

So this addon is not supposed to be registered, and to fix the issue you just need to remove it from your main.js addons.

Let me know if that helps!

[AnnyCaroline]

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.

[yannbf]

Hey @AnnyCaroline I'm glad you found a way to fix your issue, however it's unfortunate that there's a bug! I created a bug report out of this, and if you don't mind I will close this issue as the original problem has been solved. Thanks!