React嵌入Flowise AI聊天机器人遇模块解析错误求修复方案

问题 #

尝试在React项目中嵌入Flowise AI聊天机器人，代码如下：

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.

该库相关文档缺失，寻求可行修复思路。

修复思路 #

• 手动修正依赖包内的导入路径：进入node_modules/flowise-embed-react/dist目录，找到导入flowise-embed/dist/web的入口文件（一般是index.js），把路径改成flowise-embed/dist/web.js，补上.js后缀。注意这种修改会在重新安装依赖后失效，适合临时测试。
• 调整项目模块解析配置：如果用Webpack，在webpack.config.js里添加扩展名解析规则，让Webpack自动补全后缀：

  module.exports = {
    resolve: {
      extensions: ['.js', '.jsx', '.json']
    }
  };
  

  要是用Create React App，得借助react-app-rewired或craco覆盖默认配置，添加上述规则。
• 更换依赖版本：试试安装flowise-embed-react的旧版本，新版本可能引入了ESM模块兼容问题，旧版本或许不存在这个问题。执行命令：

  npm install flowise-embed-react@<具体旧版本号>
  

• 直接用UMD脚本嵌入：绕开React组件包，直接在项目的public/index.html里引入Flowise的UMD脚本，通过全局变量调用：

  <script type="module" src="http://localhost:3000/flowise-embed.js"></script>
  <script>
    window.FlowiseEmbed.initBubble({
      chatflowid: "099e38db-3758-4427-a89f-8fd9f450b59c",
      apiHost: "http://localhost:3000"
    });
  </script>
  

  这种方式不用安装React组件包，直接避开模块解析问题。

内容的提问来源于stack exchange，提问作者Noam TheLoreFnatic Hadad