embedding flowise AI chatbot into my react app

Question

Hello everyone im trying to embedd a chat bot into my app the following way:

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

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


return (    <Chatbot /> )

that is the gist of what i added to my react app (in the navbar component for now just to see it working) and im getting the following error:

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.

the docs of this library are pretty much non existent, does anyone have an idea for a fix?

Answer 1

Have you done: npm install flowise-embed

and make sure you got this:

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

Answer 2

there is a bug with create react app (or error i suppose). either way, the solution comes from the Flowise github issue page: https://github.com/FlowiseAI/Flowise/issues/825

solution from HenryHengZJ:

That's a known error with CRA (facebook/create-react-app#11865).

This fixes the issue: Webpack 5 in Ceate React App can't resolve not fully specified routes

Basically, you have to use craco yarn add -D @craco/craco

the linked fix by rkfg is as follows:

I solved this without ejecting or modifying files in node_modules. First, add craco to override the webpack config: yarn add -D @craco/craco. Next, in the root of your project (where package.json is located) create a file named craco.config.js with the following content:

module.exports = { webpack: { configure: { module: { rules: [ { test: /.m?js$/, resolve: { fullySpecified: false, }, }, ], }, }, }, }; This config disables the breaking change that causes this error. Then change the start/build/test commands in package.json replacing react-scripts to craco:

"scripts": { "start": "craco start", "build": "craco build", "test": "craco test", Now do the usual yarn start and it should work.