Storybook: Adding addons.js and webpack.config.js removes action logger

[devdigital]

Starting with a clean install, if you add an addons.js file and a webpack.config.js file in the .storybook folder, then the actions logger is removed and 'No Panels Available' is displayed instead.

The contents of the addons.js file is empty. The contents of the webpack.config.js file is from the documentation:

const path = require('path');

module.exports = {
  module: {
    loaders: [
      {
        test: /.scss$/,
        loaders: ["style", "css", "sass"],
        include: path.resolve(__dirname, '../')
      }
    ]
  }
}

It seems you can have an addons.js file OR a webpack.config.js file but not both.

This might be intended behaviour, but how do you get the actions logger back?

I've tried installing the 'Actions' addon, and adding the following to addons.js, but the action logger is still not displayed:

import '@kadira/storybook/addons'
import '@kadira/storybook-addon-actions/register'

[arunoda]

Actually, you only need to put this line only:

import '@kadira/storybook/addons'

And you need to reload the browser window to see those changes.

[devdigital]

Sorry, this still isn't working for me (testing on Windows), steps to reproduce:

1. New folder, npm init, npm i react react-dom --save
2. getstorybook
3. Create addons.js file with import '@kadira/storybook/addons' content in .storybook folder
4. Create webpack.config.js file in .storybook folder with following content:

const path = require('path');

module.exports = {
  module: {
    loaders: [
      {
        test: /.scss$/,
        loaders: ["style", "css", "sass"],
        include: path.resolve(__dirname, '../')
      }
    ]
  }
}

1. npm run storybook

Expected: Action logger is displayed
Actual: No Panels Available is displayed

Remove addons.js or webpack.config.js file - Action logger is displayed

[arunoda]

Let me try this exact steps to reproduce it.

[arunoda]

@devdigital I checked again. It's working pretty fine with the steps you mentioned.
I assume, that's something only happening in windows.

Unfortunately, I don't have a windows box to test this right now.
I am seeking help from someone who could try to follow these steps and verify it's happening or not.

[UsulPro]

as I remember, getStorybook works not properly on Windows
I can test it tomorrow
@devdigital if you just starting a new project you can do it many other ways
https://getstorybook.io/docs/react-storybook/basics/slow-start-guide

[devdigital]

I think the issue is unrelated to getstorybook, that was just used to reproduce the problem. Would be useful to know if those steps cause the same problem for you on Windows, including not using getstorybook.

[devdigital]

Ok, just tried npm run storybook from a command prompt rather than Git bash, and the action logger appears. So it looks like it's related to a webpack casing issue on Windows. Warnings are displayed in Git bash when you run npm run storybook, but the issue is actually causing the action logger to break. See https://github.com/webpack/webpack/issues/2694 and https://github.com/storybooks/react-native-storybook/issues/113.

[UsulPro]

Ok. I reproduced your steps with the same result.
but did you note the issue during getstorybook?

so doing npm i after getstorybook solves this problem

[arunoda]

@UsulPro could you send me the npm debug log where installing deps gets failed.
I'll have a look at it.

[UsulPro]

Here is a repo after getstorybook https://github.com/UsulPro/myjunkstaff/blob/master/clean2.zip
but there are no npm-debug.log in it.
everything in node_modules - it is React and React-dom only

[UsulPro]

@arunoda maybe this could help?

var spawnSync = require('spawn-sync');

result = spawnSync('npm', ['install'], { stdio: 'inherit' });

console.log(result);

Here is a log with error I got:
spawnSync.txt

[devdigital]

Yes I ran npm install after, so it looks like this is 2 issues

[ndelangen]

I think has been resolved / answered ?

[alvaropinot]

Just in case it helps. I had this issue, I had had an old version of storybook alongside a new version of the plugins, reinstalling solved the issue :)