Storybook: babelRelayPlugin dose work with storybook

[Teemobustin]

I try to use storybook in f8app,which is an app provided by Facebook for tutorial purpose.
I get this:

ERROR in ./.storybook/config.js Module build failed: ReferenceError: Unknown plugin "./server/schema/babelRelayPlugin" specified in "foreign" at 0, attempted to resolve relative to "/Users/Kathy/f8app/.storybook" at /Users/Kathy/f8app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:177:17 at Array.map (native) at Function.normalisePlugins (/Users/Kathy/f8app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:153:20) at OptionManager.mergeOptions (/Users/Kathy/f8app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:245:36) at /Users/Kathy/f8app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:254:17 at /Users/Kathy/f8app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:316:22 at Array.map (native) at OptionManager.resolvePresets (/Users/Kathy/f8app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:305:20) at OptionManager.mergeOptions (/Users/Kathy/f8app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:253:29) at OptionManager.init (/Users/Kathy/f8app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:360:12) @ multi preview

Please give me a hint.

[arunoda]

React storybooks works with UI components. It can't handle Relay components. You have two options here.

1. Expose the original UI component from the module ( Before it wraps with Relay's higher order component)
2. Stub the Relay container: https://voice.kadira.io/stubbing-react-containers-for-testing-11bcd537e586#.pu21eacy6

[rohit-ravikoti]

I am having the same issue. The problem is in the .babelrc file:

{
  "passPerPreset": true,
  "presets": [
    {
      "plugins": [
        "./build/babelRelayPlugin"
      ]
    },
    "react",
    "es2015",
    "stage-0"
  ]
}

When I remove the "./build/babelRelayPlugin" line from plugins, storybook runs just fine (I used option 1 to expose original UI component). The problem is, the babelRelayPlugin is needed for the actual app to work.

Is there a way to exclude this plugin for storybook but keep it for the actual app?

[arunoda]

@rohit-ravikoti You can create a custom .babelrc file for storybook. See: https://github.com/kadirahq/react-storybook/blob/master/docs/configure_storybook.md#custom-babel-config

I hope that'll work.

[dallonf]

I think the bigger problem here is that babel plugins are being resolved relative to each file.

I'm running into the same sort of error message with a project-specific plugin ("plugins": ["./plugins/babel-code-example.js"] - but _only_ when running Storybook. Running Webpack without stroybook behaves as expected.

For those blocked by this issue, I found a workaround, but it's terrible :)

plugins: [
  "babel-core/../../plugins/babel-code-example.js"
]

This relies on babel-core (you can use any other module, but I like babel-core because it's Babel config and thus likely to be there) being in node_modules, at which point we can traverse paths back to where we want to be. Obviously not an ideal solution, but it does work.

[arunoda]

@dallonf I know the pain. Do you know anyway to fix that. May be changing our webpack config?
Would love to see a PR.

[eugene1g]

A solution that worked for me - I created a .storybook/.babelrc with {"extends": "../.babelrc"} and it seems to fully respect relative paths from the parent/project .babelrc file.

[arunoda]

I think we can close this.
@eugene1g mentioned way it how it suppose to be.