尝试导入 formsy-react 时出错。无法读取未定义的属性“反应”

Question

注意：我创建了一个 git repo，以便可以复制问题 https://github.com/giovannicode/formsy-import-test

我正在尝试将 formsy-react 库用于 react js 项目。

但是我在导入文件时遇到了问题。我是 webpack 和 ES6 的新手，所以我不确定我是否遗漏了一些重要的东西。 这是我的 .babelrc 文件：

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

这是我的 webpack.config.js 文件：

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"
      },
    ]
  }
}

这是我的 app.jsx 文件：

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')
);

如果我注释掉 formsy-react 导入，该应用程序将正常工作。 但是当我添加导入时，我得到 浏览器中的以下错误：

Uncaught TypeError: Cannot read property 'React' of undefined

应用程序将通过 webpack 无错误地编译，但我不确定发生了什么。

注意：我创建了一个 git repo，以便可以复制问题 https://github.com/giovannicode/formsy-import-test

Answer 1

您正在尝试以两种方式导入依赖项，

从 ES6 导入模块和

import Formsy from 'forms-react'

并使用 require 加载模块

var React = require('react');

看你的代码你可能想使用 ES6 语法

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