встраивание чат-бота Flowise AI в мое приложение реагирования

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

есть ошибка с приложением Create React (или, я полагаю, ошибка). в любом случае решение можно найти на странице проблем Flowise на GitHub: https://github.com/FlowiseAI/Flowise/issues/825.

решение от HenryHengZJ:

Это известная ошибка CRA (facebook/create-react-app#11865).

Это устраняет проблему: Webpack 5 в приложении Ceate React не может разрешить не полностью указанные маршруты.

По сути, вам нужно использовать пряжу craco add -D @craco/craco.

связанное исправление от rkfg выглядит следующим образом:

Я решил это, не извлекая и не изменяя файлы в node_modules. Сначала добавьте craco, чтобы переопределить конфигурацию веб-пакета: Yarn add -D @craco/craco. Далее в корне вашего проекта (где находится package.json) создайте файл craco.config.js со следующим содержимым:

модуль.экспорт = { webpack: { configure: { модуль: { правила: [ {test: /.m?js$/,solve: { FullSpecified: false, },},],},},}, }; Эта конфигурация отключает критическое изменение, вызывающее эту ошибку. Затем измените команды start/build/test в package.json, заменив скрипты реагирования на craco:

"scripts": { "start": "craco start", "build": "craco build", "test": "craco test", Теперь выполните обычный запуск пряжи, и все должно работать.