检查`DragDropContext（SortableTreeWithoutDndContext）的渲染方法。

Question

我正在尝试在我的项目中使用react-sortable-tree模块，但是在将组件导入到应用程序中时遇到了以下错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of DragDropContext(SortableTreeWithoutDndContext)

这是我的代码：

import React, { Component } from "react";
import SortableTree from "react-sortable-tree";

export default class Dialog extends Component {
  constructor(props) {
    super(props);

    this.state = {
      treeData: [{ title: "Chicken", children: [{ title: "Egg" }] }]
    };
  }

  render() {
    return (
      <div style={{ height: 400 }}>
        <SortableTree
          treeData={this.state.treeData}
          onChange={treeData => this.setState({ treeData })}
        />
      </div>
    );
  }
}

这是我的babelrc配置

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "react-hot-loader/babel",
    [
      "import",
      { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }
    ]
  ]
}

和webpack.config.js

odule.exports = {
  resolve: {
    extensions: ["*", ".js", ".jsx", ".json"],
    alias: {
      Assets: path.resolve(__dirname, "assets"),
      src: path.resolve(__dirname, "src")
    }
  },
  devtool: "cheap-module-eval-source-map",
  entry: [
    "@babel/polyfill",
    "./src/webpack-public-path",
    "react-hot-loader/patch",
    "webpack-hot-middleware/client?reload=true",
    `${APP_DIR}/index.js`
  ],
  target: "web",
  mode: "development",
  output: {
    path: BUILD_DIR,
    publicPath: "/",
    filename: "bundle.js"
  },
  plugins: [
    new HardSourceWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new HtmlWebpackPlugin({
      template: "src/index.html",
      filename: "index.html",
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      inject: true
    }),
    new webpack.DefinePlugin({
      "process.env.WORKSPACE_ID": JSON.stringify(
        "17099f3e-640b-4294-a916-6aa199277c4c"
      )
    })
  ],
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      {
        test: /antd.*\.css$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              config: {
                path: "./postcss.config.js"
              }
            }
          }
        ]
      },
      {
        test: /\.eot(\?v=\d+.\d+.\d+)?$/,
        use: ["file-loader"]
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10000,
              mimetype: "application/font-woff"
            }
          }
        ]
      },
      {
        test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10000,
              mimetype: "application/octet-stream"
            }
          }
        ]
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10000,
              mimetype: "image/svg+xml"
            }
          }
        ]
      },
      {
        test: /\.(jpe?g|jpg|png|gif|ico)$/i,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]"
            }
          }
        ]
      },
      {
        test: /\.(jpe?g|jpg|png|gif)$/i,
        use: [
          {
            loader: "url-loader"
          }
        ]
      },
      {
        test: /\.css$/,
        exclude: /antd.*\.css$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              config: {
                path: "./postcss.config.js"
              }
            }
          }
        ]
      },
      {
        test: /(\.scss|\.sass)$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
              sourceMap: true,
              localIdentName: "[name]__[local]___[hash:base64:5]"
            }
          },
          {
            loader: "postcss-loader",
            options: {
              plugins: () => [require("autoprefixer")],
              sourceMap: true
            }
          },
          {
            loader: "sass-loader",
            options: {
              includePaths: [path.resolve(__dirname, "src", "scss")],
              sourceMap: true
            }
          }
        ]
      },
      {
        test: /\.less$/,
        loaders: "style-loader!css-loader!less-loader",
        query: {
          modifyVars: themeVariables
        }
      }
    ]
  }

我安装了最新的babel模块，并且已经在可以正常工作的不同项目中测试了相同组件。我知道这与我的配置有关，但我似乎不知道问题出在哪里。