react-json-tree模块报错：无默认导出成员，如何解决？

问题原因 #

你使用了命名导入import { JSONTree } from 'react-json-tree'，但react-json-tree模块实际是默认导出JSONTree组件，导致构建工具无法找到对应的命名导出成员，触发错误。

解决步骤 #

1. 修改JsonViewer.jsx中的导入语句，将命名导入改为默认导入：

import React from "react";
// 替换原来的命名导入为默认导入
import JSONTree from 'react-json-tree'
import { Map } from 'immutable';

const JsonViewer = () => {
  const json = {
    array: [1, 2, 3],
    bool: true,
    object: {
      foo: 'bar',
    },
    immutable: Map({ key: 'value' }),
  };

  return (
    <JSONTree data={json} />
  )
};
export default JsonViewer;

2. 重新启动构建服务（如snowpack），错误即可消除。

额外验证（可选） #

如果修改后仍有问题，可以检查node_modules/react-json-tree目录下的导出文件：

• 查看package.json的main字段指向的文件（通常是lib/index.js）
• 确认文件末尾是否是export default JSONTree;类型的默认导出，而非命名导出

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