将 Flowise AI 聊天机器人嵌入到我的 React 应用程序中

Question

大家好，我正在尝试通过以下方式将聊天机器人嵌入到我的应用程序中：

import { BubbleChat } from 'flowise-embed-react'

const Chatbot = () => {
    return (
        <BubbleChat chatflowid="099e38db-3758-4427-a89f-8fd9f450b59c" apiHost="http://localhost:3000" />
    );
};


return (    <Chatbot /> )

这就是我添加到我的反应应用程序中的要点（现在在导航栏组件中只是为了看看它的工作原理），我收到以下错误：

Module not found: Error: Can't resolve 'flowise-embed/dist/web' in 'C:\Pangea-Projects\InsightsSolution\node_modules\flowise-embed-react\dist'
Did you mean 'web.js'?
BREAKING CHANGE: The request 'flowise-embed/dist/web' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

这个库的文档几乎不存在，有人有修复的想法吗？

Answer 1

你完成了吗：

npm install flowise-embed

并确保你得到了这个：

import { BubbleChat } from 'flowise-embed-react';

Answer 2

创建反应应用程序有一个错误（或者我认为是错误）。无论哪种方式，解决方案都来自 Flowise github 问题页面：https://github.com/FlowiseAI/Flowise/issues/825

HenryHengZJ 的解决方案：

这是 CRA 的一个已知错误 (facebook/create-react-app#11865)。

这解决了这个问题： Ceate React App 中的 Webpack 5 无法解析未完全指定的路由

基本上，你必须使用 craco 纱线添加 -D @craco/craco

rkfg 的链接修复如下：

我解决了这个问题，没有弹出或修改节点模块中的文件。 首先，添加 craco 来覆盖 webpack 配置：yarn add -D @craco/craco。接下来，在项目的根目录中（其中 package.json 是 位于）创建一个名为 craco.config.js 的文件，其中包含以下内容 内容：

模块.导出= { 网络包：{ 配置： { 模块： { 规则：[ { 测试：/.m?js$/, 解决： { 完全指定：假， }, }, ], }, }, }, };此配置禁用导致此错误的重大更改。然后更改package.json中的start/build/test命令 将反应脚本替换为 craco:

“脚本”：{ “开始”：“克拉科开始”， “构建”：“克拉科构建”， “test”：“craco test”，现在执行通常的纱线启动，它应该可以工作。

Answer 3

我已经由 Jhipster 生成了前端，我面临着同样的问题，我刚刚将以下代码添加到

webpack.common.js

文件中。我不需要任何

craco

工具。

module: {
        rules: [
          {
            test: /\.tsx?$/,
            use: getTsLoaderRule(options.env),
            include: [utils.root('./src/main/webapp/app')],
            exclude: [utils.root('node_modules')]            
          },
          {
              test: /\.m?js$/,
              resolve: {
                fullySpecified: false,
              }
          }              
        ],
      },