1

I've built a wrapper package for drag and drop in React, and I added storybook examples. Since in my consumer React is exposed globally, i'm not importing React explicitly.

In the storybook examples I need to supply React as part of the custom webpack config, but for some reason it can't resolve React and I get a ReferenceError: React is not defined

This is the package - https://github.com/fiverr/drag_n_drop_package

And this is the custom webpack config file:

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      React: 'react'
    })
  ],
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: 'style!raw!sass'
      }
    ]
  }
};
Asaf David
  • 3,167
  • 2
  • 22
  • 38

2 Answers2

1

This is really strange but your storybook webpack.config.js is mixing webpack v1/v2. Importing webpack as

const webpack = require('@kadira/storybook/node_modules/webpack');

solves it because it uses the same webpack reference that storybook is using (v1).

enapupe
  • 15,691
  • 3
  • 29
  • 45
0

I found the following code in webpack.config.js at github:

externals: {
  react: 'React'
}

It looks as this question. If it needs to load the React lib from external, like CDN. The page has to be sure have a script tag for importing React lib. And make sure this script tag is in front of the bundle.js or the file which it generated by webpack, so the Object of React will exist when the following code needs to use React, such as:

<script src="./react.js"></script>
<script src="./bundle.js"></script>
Community
  • 1
  • 1
lisez
  • 26
  • 1
  • 3
  • I'm using externals in my consumer as it's already exposed globally, but in storybook I need to resolve the modules on build time. Anyway, @enapupe found my bug, but hanks for trying, I appreciate it :-) – Asaf David May 07 '17 at 19:01