react-modal versions available: 3.0.0

[dependencies]

There are new versions of react-modal available from npm.

3.0.0

• a2a7128 Release v3.0.0.
• d0f242b Merged next into master.
• de3c039 [chore] remove warning about injectCSS.
• f77b53e [chore] use canUseDOM from exenv.
• cc4577c Release 3.0.0-rc2.
• 1260850 [fixed] backward compatibility with previous react versions.
• 45ca9d4 Release v3.0.0-rc1.
• d25563c [fixed] check for both window and document.createElement.
• 2b835d6 [fixed] typeof returns a string (canUseDOM).
• cd10612 Release v3.0.0-alpha.
• b942504 [feature] initial support for react 16.

[Hypnosphi]

Should be handled in #2098

[bogas04]

@Hypnosphi I'm not sure where should I ask this question, but react-modal relies on babel-plugin-add-module-exports, which is incompatible with the way webpack 2.2+ works, while storybook 3+ relies on webpack 2 config (./storybook/webpack.config.js). So, how do I make it work ?

[Hypnosphi]

How exactly does it rely on it?

[bogas04]

It's in the .babelrc.

[Hypnosphi]

It's used only in react-modal library development and shouldn't affect end users. Which errors do you encounter?

[bogas04]

Using

start-storybook -p 6006

I get following error;

 assets:
      { 'static/manager.bundle.js': [Object],
        'static/preview.bundle.js': [Object],
        'static/manager.bundle.js.map': [Object],
        'static/preview.bundle.js.map': [Object] },
     errors:
      [ ModuleBuildError: Module build failed: ReferenceError: Unknown plugin "add-module-exports" specified in "/Users/.../node_modules/react-modal/.babelrc" at 0, attempted to resolve relative to "/Users/.../inputBox/node_modules/react-modal"

And when I supply this plugin at my app level, I get exports is not defined error on http://localhost:6006

[Hypnosphi]

Looks like you‘re processing node_modules with babel. How does your .storybook/webpack.config.js look like?

[bogas04]

I basically copy pasted my actual webpack.config.js, I guess that's the problem?

// var path = require('path')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var autoprefixer = require('autoprefixer')
var webpack = require('webpack')

const _exports = {};

module.exports = {
  output: {
    filename: '[name].js',
    chunkFilename: '[name].js',
    path: 'dist',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader'
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader!postcss-loader!sass-loader'
        })
      }
    ]
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false,
      postcss: [autoprefixer({browsers: ['last 2 versions', '> 5%']})]
    }),
    new ExtractTextPlugin('[name].css')
  ]
}

[Hypnosphi]

You should probably remove output and babel-loader, they are added automatically by storybook

[bogas04]

Hmm, it's really strange. Without using babel-loader, I get the error of unexpected token @ some JSX code, and whilst using it, it throws the add-module-exports error. Do you know what might be causing this @Hypnosphi ? Thanks !

[Hypnosphi]

Can you maybe upload your project or some relevant part of it on GitHub?

[bogas04]

Sure, I'll try to provide that. Thank you so much for taking out time to help me !