Storybook: CRA Addon Register and Preset not loaded

[philippone]

Describe the bug
I want to call register.js of my addon in CRA:

addons: [
        // not working
        'storybook-addon-pseudo-states-react/register',
]

but it's not applied.

There are no errors when starting storybook.

I observed similar behavior for my preset:

presets: [
        // not working
        'storybook-addon-pseudo-states-react/preset-postcss',
        // but same file in .storybook folder is working
        path.resolve('./.storybook/preset-postcss'),

To Reproduce
Steps to reproduce the behavior:

1. Reference Repo: https://github.com/philippone/create-react-app-storybook-addon-pseuo-states
2. npm run storybook
3. Toolbar Button is not there
4. Preset from node_modules is not loaded (only local one)

Expected behavior
Addon should have registered the Toolbar Button, Preset should be applied.

Screenshots
Toolbar button is not visible

Code snippets
Full main.js

module.exports = {
    stories: ['../src/**/*.stories.[tj]s'],
    presets: [
        {
            name: '@storybook/preset-create-react-app',
            options: {
                tsDocgenLoaderOptions: {},
            },
        },
        // working
        path.resolve('./.storybook/my-preset'),
        // not working
        'storybook-addon-pseudo-states-react/preset-postcss',
    ],
    addons: [
        // not working
        'storybook-addon-pseudo-states-react/register',

        'storybook-addon-pseudo-states-react/preset-postcss',
        '@storybook/addon-knobs',
        '@storybook/addon-actions',
        '@storybook/addon-links',
        '@storybook/addon-viewport',
    ],
};

System:
System:
OS: macOS 10.15.3
CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
Binaries:
Node: 13.7.0 - ~/.nvm/versions/node/v13.7.0/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.13.6 - ~/.nvm/versions/node/v13.7.0/bin/npm
Browsers:
Firefox: 72.0.2
Safari: 13.0.5
npmPackages:
@storybook/addon-actions: 6.0.0-alpha.9 => 6.0.0-alpha.9
@storybook/addon-docs: 6.0.0-alpha.9 => 6.0.0-alpha.9
@storybook/addon-knobs: 6.0.0-alpha.9 => 6.0.0-alpha.9
@storybook/addon-links: 6.0.0-alpha.9 => 6.0.0-alpha.9
@storybook/addon-viewport: 6.0.0-alpha.9 => 6.0.0-alpha.9
@storybook/addons: 6.0.0-alpha.9 => 6.0.0-alpha.9
@storybook/api: 6.0.0-alpha.9 => 6.0.0-alpha.9
@storybook/components: 6.0.0-alpha.9 => 6.0.0-alpha.9
@storybook/core-events: 6.0.0-alpha.9 => 6.0.0-alpha.9
@storybook/preset-create-react-app: 1.5.2 => 1.5.2
@storybook/react: 6.0.0-alpha.9 => 6.0.0-alpha.9

Additional context
My Addon: https://github.com/Ergosign/storybook-addon-pseudo-states
Register: https://github.com/Ergosign/storybook-addon-pseudo-states/blob/master/src/register/register.tsx

Same register.js is working in angular-cli project and lit-html

Tested with 5.3.12 and 6.0.0-alpha.9

[shilman]

Hi @philippone. Can you try taking everything from the presets array, appending it to the addons array, and removing the presets array entirely?

[philippone]

Hi @shilman ,

thanks for your fast reply, but unfortunately it did not help.

const path = require('path');

module.exports = {
    stories: ['../src/**/*.stories.[tj]s'],
    addons: [
        {
            name: '@storybook/preset-create-react-app',
            options: {
                tsDocgenLoaderOptions: {},
            },
        },
        // not working
        'storybook-addon-pseudo-states-react/register',
        // not working
        'storybook-addon-pseudo-states-react/preset-postcss',
        // working
        // path.resolve('./.storybook/preset-postcss'),
        '@storybook/addon-knobs',
        '@storybook/addon-actions',
        '@storybook/addon-links',
        '@storybook/addon-viewport',
    ],
};

Same result as before.

[shilman]

Ugh, do you have a repro I could look at? Or, you can put a console.log in node_modules after this line:

https://github.com/storybookjs/storybook/blob/master/lib/core/src/server/presets.js#L148

It should infer storybook-addon-pseudo-states-react/register as a "managerEntry" and storybook-addon-pseudo-states-react/preset-postcss as a "preset".

[shilman]

Also, it could be a problem with the package itself? The paths look kind of suspicious? E.g. https://github.com/Ergosign/storybook-addon-pseudo-states/blob/master/src/react/register.js points to './dist/register/register', and https://github.com/Ergosign/storybook-addon-pseudo-states/blob/master/src/react/register.ts points to '../register/register'

[philippone]

My Repo is here: https://github.com/philippone/create-react-app-storybook-addon-pseuo-states

Here is the output from https://github.com/storybookjs/storybook/blob/master/lib/core/src/server/presets.js#L148:

info => Loading presets

server/preset.js: { managerEntries: [] } { presets: [] }
server/preset.js: { managerEntries: [] } { presets: [] }
server/preset.js: { managerEntries: [] } { presets: [] }
server/preset.js: { managerEntries: [] } { presets: [] }
server/preset.js: { managerEntries: [] } { presets: [] }
server/preset.js: {
  managerEntries: [
    'storybook-addon-pseudo-states-react/register',
    '/Users/philipp/workspace/examples-addon-pseudo-states/create-react-app-pseudo-states/node_modules/@storybook/addon-actions/register.js',
    '/Users/philipp/workspace/examples-addon-pseudo-states/create-react-app-pseudo-states/node_modules/@storybook/addon-links/register.js',
    '/Users/philipp/workspace/examples-addon-pseudo-states/create-react-app-pseudo-states/node_modules/@storybook/addon-viewport/register.js'
  ]
} {
  presets: [
    { name: '@storybook/preset-create-react-app', options: [Object] },
    'storybook-addon-pseudo-states-react/preset-postcss',
    '/Users/philipp/workspace/examples-addon-pseudo-states/create-react-app-pseudo-states/node_modules/@storybook/addon-knobs/preset.js'
  ]
}
server/preset.js: { managerEntries: [] } { presets: [] }
server/preset.js: { managerEntries: [] } { presets: [] }
server/preset.js: { managerEntries: [] } { presets: [] }
info => Loading presets
server/preset.js: { managerEntries: [] } { presets: [] }
server/preset.js: { managerEntries: [] } { presets: [] }
server/preset.js: { managerEntries: [] } { presets: [] }
server/preset.js: { managerEntries: [] } { presets: [] }
server/preset.js: { managerEntries: [] } { presets: [] }
server/preset.js: {
  managerEntries: [
    'storybook-addon-pseudo-states-react/register',
    '/Users/philipp/workspace/examples-addon-pseudo-states/create-react-app-pseudo-states/node_modules/@storybook/addon-actions/register.js',
    '/Users/philipp/workspace/examples-addon-pseudo-states/create-react-app-pseudo-states/node_modules/@storybook/addon-links/register.js',
    '/Users/philipp/workspace/examples-addon-pseudo-states/create-react-app-pseudo-states/node_modules/@storybook/addon-viewport/register.js'
  ]
} {
  presets: [
    { name: '@storybook/preset-create-react-app', options: [Object] },
    'storybook-addon-pseudo-states-react/preset-postcss',
    '/Users/philipp/workspace/examples-addon-pseudo-states/create-react-app-pseudo-states/node_modules/@storybook/addon-knobs/preset.js'
  ]
}
server/preset.js: { managerEntries: [] } { presets: [] }
server/preset.js: { managerEntries: [] } { presets: [] }
server/preset.js: { managerEntries: [] } { presets: [] }
server/preset.js: { managerEntries: [] } { presets: [] }

info => Loading config/preview file in "./.storybook".

[philippone]

https://github.com/Ergosign/storybook-addon-pseudo-states/blob/master/src/react/register.ts points to '../register/register'
That's an import to share/register.ts to transpile the file into the dist folder of each framework (react, angular, lit-html, ...)

https://github.com/Ergosign/storybook-addon-pseudo-states/blob/master/src/react/register.js points to './dist/register/register',
Points to the transpiled register.js from the root of the package, to allow usage of

'storybook-addon-pseudo-states-react/register' instead of
'storybook-addon-pseudo-states-react/dist/react/register'

[shilman]

I think there's something wrong with your package export, at lest for preset-postcss:

> var pst = require('storybook-addon-pseudo-states-react/preset-postcss')
undefined
> pst
{}

register looks ok, so I'm not sure what's going on there:

> var register = require('storybook-addon-pseudo-states-react/register')
info ==> ADDON - registered
undefined

[philippone]

Found my mistake. preset-postscss was not exported correctly.

Now it's working 😀

Thanks for your help!!