CODEWITHSUNDEEP
reactjswebpack
Asaf David
Asaf David

Reputation: 3297

using webpack ProvidePlugin in React storybook custom webpack config

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'
      }
    ]
  }
};

Upvotes: 1

Views: 1606

Answers (2)

lisez
lisez

Reputation: 26

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>

Upvotes: 0

enapupe
enapupe

Reputation: 17029

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).

Upvotes: 1

Related Questions