React Draggable组件导入后undefined，开发服务器报错求助

问题详情 #

启动开发服务器时抛出以下警告：

react-jsx-dev-runtime.development.js:87 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at draggable.js:9.

对应的draggable.js代码：

import React, { Component } from "react";
import ReactDOM from 'react-dom';
import { Draggable } from "react-draggable";
console.log(Draggable); //undefined
export class Board extends Component {
  render() {
    return (
      <div>
        <Draggable position={{ x: 0, y: 0 }} handle=".handle">
          <div>
            <div className="handle">Drag me</div>
            <div>I will move with the handle</div>
          </div>
        </Draggable>
      </div>
    );
  }
}

已执行npm install react-draggable，package.json显示版本为4.4.5，通过console.log确认导入的Draggable为undefined。

解决方案 #

问题根源是导入方式不匹配：react-draggable v4.x版本中，Draggable是默认导出，而非命名导出。你当前使用的命名导入{ Draggable }无法正确获取组件，导致其值为undefined。

修改导入语句为默认导入即可解决：

// 替换原有的命名导入
import Draggable from "react-draggable";

修改完成后重启开发服务器，组件即可正常渲染使用。

内容的提问来源于stack exchange，提问作者Robert Graham