无法构建reactR闪亮小部件

Question

我正在尝试在 R 中创建一个基于

reactR

/

htmlwidgets

的包，它包含

react-flow

。

我遵循 reactR 的

官方

指南并使用以下内容，但出现了我不明白的错误。

最后，我想复制官方指南，其中有以下反应代码：

import { useCallback } from 'react';
import {
  ReactFlow,
  MiniMap,
  Controls,
  Background,
  useNodesState,
  useEdgesState,
  addEdge,
} from '@xyflow/react';

import '@xyflow/react/dist/style.css';

const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
  { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
];

const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];

function Flow() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
    >
      <MiniMap />
      <Controls />
      <Background />
    </ReactFlow>
  );
}

export default Flow;

MWE

创建脚手架

# make sure we have the latest versions available
# install.packages(c("shiny", "devtools", "usethis", "htmlwidgets", "reactR"))
sapply(c("shiny", "devtools", "usethis", "htmlwidgets", "reactR"), packageVersion)
#> $shiny
#> [1] 1 9 1
#> 
#> $devtools
#> [1] 2 4 5
#> 
#> $usethis
#> [1] 3 1 0
#> 
#> $htmlwidgets
#> [1] 1 6 4
#> 
#> $reactR
#> [1] 0 6 1

# create the package
usethis::create_package("reactflow")
# getwd() # to check that we are already in reactflow/

# add the react-flow dependency, note @xyflow/react as described here
# https://github.com/xyflow/xyflow/tree/main/packages/react
reactR::scaffoldReactWidget("reactflow", list("@xyflow/react" = "^12.3.5"), edit = FALSE)

system("yarn --version", intern = TRUE)
#> [1] "1.22.19"
system("yarn install") # takes a while...
#> ...
#> success Saved lockfile.

# check the packages
paste(readLines("packages.json"), collapse = "\n")
#> {
#>  "private": true,
#>  "dependencies": {
#>    "@xyflow/react": "^12.3.5"
#>  },
#>  "devDependencies": {
#>    "webpack": "^4.27.1",
#>    "webpack-cli": "^3.1.2",
#>    "@babel/core": "^7.2.0",
#>    "babel-loader": "^8.0.4",
#>    "@babel/preset-env": "^7.2.0",
#>    "@babel/preset-react": "^7.0.0",
#>    "css-loader": "^5.0.1",
#>    "style-loader": "^2.0.0"
#>  },
#>  "scripts": {
#>    "watch": "webpack --watch",
#>    "build": "webpack"
#>  }
#> }


system("yarn run webpack")
#> ...
#> Hash: 27f31466a4896d55fa04
#> Version: webpack 4.47.0
#> Time: 9896ms
#> Built at: 11/27/2024 8:26:31 AM
#>            Asset      Size  Chunks                   Chunk Names
#>     reactflow.js  1.06 KiB       0  [emitted]        main
#> reactflow.js.map  4.81 KiB       0  [emitted] [dev]  main
#> Entrypoint main = reactflow.js reactflow.js.map
#> [0] external "window.reactR" 42 bytes {0} [built]
#> [1] ./srcjs/reactflow.jsx 81 bytes {0} [built]

# I then fix the roxygen tags in R/reactflow.R
devtools::document()
devtools::install(quick = TRUE)
# installs correctly

shiny::runApp()

MWE 应用程序（没有反应流）按预期工作，因此我怀疑我正确设置了所有内容。

添加反应流程

首先我想要一个最小的反应流元素，这意味着我将

R/reactflow.R

更改为这个

reactflow <- function(message, width = NULL, height = NULL, elementId = NULL) {
  nodes <- list(
    list(id = "1", position = list(x = 0, y = 0), data = list(label = "1")),
    list(id = "2", position = list(x = 0, y = 100), data = list(label = "2"))
  )
  edges <- list(
    list(id = "e1-2", source = "1", target = "2")
  )
  component <- reactR::component(
    "reactflow",
    list(nodes = nodes, edges = edges)
  )

  # create widget
  htmlwidgets::createWidget(
    name = 'reactflow',
    component,
    width = width,
    height = height,
    package = 'ReactFlowR',
    elementId = elementId
  )
}

和

srcjs/reactflow.jsx

到

import { ReactFlow } from '@xyflow/react';
import '@xyflow/react/dist/style.css';

import { reactWidget } from 'reactR';

reactWidget('reactflow', 'output', ReactFlow);

现在，运行

devtools::document(); devtools::install(quick = TRUE); shiny::runApp()

可以正确构建所有内容，但应用程序不再工作。

相反，我在反应流应该在的地方看到了一个空元素，当我查看 JS 控制台时，我看到以下错误

我重新运行了

yarn install

和

yarn run webpack

但出现另一个错误：

ERROR in ./node_modules/@xyflow/react/dist/esm/index.js
Module not found: Error: Can't resolve 'react/jsx-runtime' in '.../node_modules/@xyflow/react/dist/esm'

注意这个 issue 建议升级到 React 18 应该可以修复它，但是

reactR:::react_version()

已经报告了 18.2 并且我正在使用 @xyflow/react 版本 12.3.5。 我也尝试用这个来配置

webpack.config.js

resolve: {
    alias: {
        "react/jsx-dev-runtime": "react/jsx-dev-runtime.js",
        "react/jsx-runtime": "react/jsx-runtime.js"
    }
}

但遇到了同样的错误。

知道如何开始解决这个问题吗？

Answer 1

由于依赖或配置不匹配而发生react/jsx-runtime错误。修复方法如下：

1。确保 React 18+ 运行：

yarn list react react-dom

如果 React 版本低于 18.2.0，请更新：

yarn add react@^18.2.0 react-dom@^18.2.0

2。重新安装依赖项 重新安装 React 和 @xyflow/react 以确保兼容性：

yarn add react react-dom @xyflow/react

3.修复 Webpack 配置 在 webpack.config.js 中添加：

resolve: {
  alias: {
    'react/jsx-runtime': require.resolve('react/jsx-runtime'),
    'react/jsx-dev-runtime': require.resolve('react/jsx-dev-runtime'),
  },
},

重建：

yarn run webpack

4。验证组件设置 确保您的reactflow.jsx正确渲染：

import ReactFlow from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import { reactWidget } from 'reactR';

reactWidget('reactflow', 'output', ({ nodes, edges }) => (
  <ReactFlow nodes={nodes} edges={edges} style={{ width: '100%', height: '100%' }} />
));

5。重建你的 R 包 在 R 中：

devtools::document()
devtools::install(quick = TRUE)
shiny::runApp()

这应该可以解决问题。如果您需要更多帮助，请告诉我！