使用 react-d3-tree 进行服务器端渲染的 NextJS 问题

Posted 2023-02-22

【中文标题】使用 react-d3-tree 进行服务器端渲染的 NextJS 问题

【英文标题】：NextJS issue with server side rendering with react-d3-tree

【发布时间】：2020-11-06 17:25:56

【问题描述】：

首先，我查看了react-d3-tree github 上的问题编号40 和95 我在 *** 上看不到任何对我有帮助的东西。我正在尝试实现 parseJSON 方法，这样我就可以从项目文件夹中获取自己的 JSON 文件，然后生成树形图。

让我们从我一开始所做的开始。我复制粘贴了在崩溃前工作了 2 秒的示例代码。原因？服务器端渲染。太好了，所以我找到了this from NextJS，它允许我禁用某些组件的 s-s-r。嘿，现在示例代码正在运行。让我们试试example code where they use external data！不，它找不到 parseJSON 方法。我不知道该怎么办，找不到任何东西来解决这个问题。我正在尝试导入这个与 s-s-r 有问题的函数，但因为它不是一个组件，所以我无法使用动态导入它，而且我无法正常导入，因为它会导致“未定义窗口”错误因为s-s-r。 以下是我主要的两个文件。

DynamicComponent.js [版本 1]

import dynamic from 'next/dynamic';

const Tree = dynamic(
  () => import('react-d3-tree'),
   s-s-r: false ,
);

export default Tree;

DynamicComponent.js [版本 2]

import dynamic from 'next/dynamic';

export const Tree = dynamic(
  () => import('react-d3-tree'),
   s-s-r: false ,
);

export const treeUtil = dynamic(
  () => import('react-d3-tree/src/util'),
   s-s-r: false ,
);

图表/index.js

import React from 'react';
import  Tree, treeUtil  from '../DynamicComponent';

const myTreeData = require('../fakeData.json');

class Diagram extends React.PureComponent 
  constructor() 
    super();

    this.state = 
      data: undefined,
    ;
  

  componentWillMount() 
    treeUtil.parseJSON(myTreeData)
      .then((data) => 
        this.setState( data );
      );
  

  render() 
    return (
      <div
        id="treeWrapper"
        style= width: '50em', height: '20em' 
      >
        <Tree data=this.state.data />
      </div>
    );
  


export default Diagram;

我在第 1 版中遇到的错误

ReferenceError: treeUtil is not defined

我在第 2 版中遇到的错误

TypeError: _DynamicComponent__WEBPACK_IMPORTED_MODULE_1__.treeUtil.parseJSON is not a function

请 ***，你是我唯一的希望。

【参考方案1】：

我在 Cytoscape 中遇到了同样的问题，这是一个类似的库（但专门用于图形网络可视化）。这需要大量的尝试和错误，但解决方案是：

动态导入组件 删除导入 JSON 并将其内联到 js 文件中。出于某种愚蠢的原因，这对我有用，而且是神奇的解决方法。 （您的 JSON 文件有多大？）在更糟糕的情况下尝试复制并粘贴到组件本身。

为你的组件试试这个：

// convert fakeData.json to fakeData.js
export default ...fake data here ;

---

import React from 'react';
import dynamic from 'next/dynamic'
import myTreeData from 'fakeData';

const Tree = dynamic(
  () => import('./dynamicComponent'),
    s-s-r: false 
);

// you can also delineate a loading component;


// converted to hooks for '21
 const Diagram = () => 
 
   const [data,setData] = useState();


  useEffect(() => 
    treeUtil.parseJSON(myTreeData)
      .then((data) => 
        setData(data);
      )
  ,[treeUtil,myTreeData,setData]);


    return (
      <div
        id="treeWrapper"
        style= width: '50em', height: '20em' 
      >
        <Tree data=data />
      </div>
    );
  

export default Diagram;

【参考方案2】：

我猜treeUtil 不是一个react 组件，所以你不能使用dynamic 来导入它。正常导入就可以了。

import dynamic from 'next/dynamic';

export const Tree = dynamic(
  () => import('react-d3-tree'),
   s-s-r: false ,
);

export  default as treeUtil  from 'react-d3-tree/src/util';

【讨论】：

似乎不起作用，似乎是语法问题。我收到了这个错误：语法错误：意外的令牌，预期的“;”在“=”符号处。

对不起，我打错了。改成export default as treeUtil from 'react-d3-tree/src/util' 怎么样？