如何在ReactShinyWidget中嵌入ReactShinyInput？报错求助

错误原因 #

在同一个R包中先后使用scaffoldReactWidget和scaffoldReactShinyInput时，默认的webpack配置仅会处理第一个scaffold生成的前端入口文件，导致第二个输入控件的代码未被编译到指定目录，R端的addResourcePath无法找到对应资源路径，从而抛出错误。无需为每个scaffold函数创建独立项目，只需调整webpack配置和资源路径即可解决。

修复现有项目的步骤 #

1. 修改webpack配置文件
   打开项目根目录下的webpack.config.js，将entry对象修改为包含两个组件的入口路径：

const path = require('path');

module.exports = {
  entry: {
    reactflow: './srcjs/reactflow.js',
    action_button: './srcjs/action_button.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'inst/htmlwidgets/lib/[name]')
  },
  // 保留原有module、externals等配置
};

2. 验证R端资源路径配置
   打开R/action_button.R文件，确认addResourcePath的directoryPath指向正确的编译产物目录：

addResourcePath(
  prefix = 'action_button-input-1.0.0',
  directoryPath = system.file('htmlwidgets/lib/action_button', package = 'reactflow')
)

若路径不符，修改为对应编译产物的实际位置。

3. 重新编译并加载包
   执行以下命令重新构建前端代码并更新包：

system("yarn run webpack --mode=development")
devtools::document()
devtools::load_all()

4. 重新运行Shiny应用
   此时执行runApp()即可正常加载两个React组件。

从头创建同时包含Widget和Input的R包流程 #

1. 初始化R包

usethis::create_package("reactflowWithInput")
setwd("reactflowWithInput")

2. 生成ReactFlow Widget基础结构

reactR::scaffoldReactWidget("reactflow", list("@xyflow/react" = "^12.0.1"), edit = FALSE)

3. 添加React Shiny Input控件

reactR::scaffoldReactShinyInput("action_button", list("reactstrap" = "^8.9.0"), edit = FALSE)

4. 更新webpack配置
   编辑webpack.config.js，添加两个组件的入口（同修复步骤1中的配置）。

5. 安装依赖并编译前端代码

system("yarn install")
system("yarn run webpack --mode=development")

6. 文档化并加载包

devtools::document()
devtools::load_all()

7. 编写Shiny应用测试
   创建app.R文件：

library(shiny)
library(reactflowWithInput)

ui <- fluidPage(
  titlePanel("React Widget + Input Example"),
  reactflowOutput('widgetOutput'),
  action_buttonInput('action_btn', label = "Click Me")
)

server <- function(input, output, session) {
  output$widgetOutput <- renderReactflow(
    reactflow("Hello from React Flow!")
  )
  
  observeEvent(input$action_btn, {
    showNotification("Button clicked!")
  })
}

shinyApp(ui, server)

8. 运行应用
   执行shiny::runApp()即可正常使用两个React组件。

关键注意事项 #

• 同一个R包内的所有reactR组件共享webpack配置，新增组件必须手动在entry中添加对应入口。
• 确保每个组件的R文件中addResourcePath的路径与webpack输出路径一致。
• 每次修改前端代码或添加新组件后，都需要重新执行webpack编译、文档化和加载包的操作。

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