Getting error when trying to import formsy-react. Cannot read property 'React' of undefined

Question

Note: I made a git repo so one can replicate the issue https://github.com/giovannicode/formsy-import-test

I am trying to use the formsy-react library for a react js project.

But I'm having trouble importing the file. I'm new to webpack and ES6 so I'm not sure if I'm missing something important. Here is my .babelrc file:

{
"presets": [
"es2015", "react"
 ]
}

Here is my webpack.config.js file:

var path = require("path");

module.exports = {
  resolve: {
    extensions: ['', '.js', '.jsx'],
  },
  //externals: 'react',
  entry: {
    'app': './app.jsx',
  },
  output: {
    path: __dirname,
    filename: "[name].js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx$/,
        include: __dirname,
        loader: "babel-loader"
      },
    ]
  }
}

And here is my app.jsx file:

import React from 'react';  
import ReactDOM from 'react-dom';

import {Formsy} from 'formsy-react';

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});

ReactDOM.render(
  <CommentBox />,
  document.getElementById('react-content')
);

If I comment out the formsy-react import, the app will work fine. But when I add the import I get the follow error in the browser:

Uncaught TypeError: Cannot read property 'React' of undefined

The app will compile without error through webpack though so im not sure what's going on.

Note: I made a git repo so one can replicate the issue https://github.com/giovannicode/formsy-import-test

Answer 1

You are trying to import dependencies in two ways,

module import from ES6 and

import Formsy from 'forms-react'

and loading the module with require

var React = require('react');

watching your code you probably want to use ES6 syntax

import React from 'react'
import Formsy from 'forms-react'