[Help] Probem using react-chabotify with Next.js - global css

[mhdawson]

Help Description I have a react-chatbotify based application I wanted to run under Next.js but when I tried to move it over. If fails to run with a complaint about not being able to have Global css due to the css files for react-chatbotify under node_modules.

I have this next.config.js configuration file

/** @type {import('next').NextConfig} */
module.exports = {
  output: "standalone",
};

I did the the note in the FAQ related to https://github.com/tjtanjin/react-chatbotify/issues/32, but I believe that is a different issue.

Is this an known issue and if so is there any work around?

Additional context

[tjtanjin]

Hey @mhdawson, you are likely facing a similar issue that another user brought up on discord. I am making an assumption but it might be worth exploring the following options:

• Use app directory instead of pages
• If you must use pages, then find react-chatbotify/dist/index.js within node_modules and delete the css import. Copy the css file into your own project to import it. Then delete .next folder and restart the project.

The first solution is recommended but the second solution is a viable workaround if you are unable to use app directory. Though that means there’s a need to manually perform this whenever you do a version upgrade. If you are keen, you can also take a look at the whole discord conversation here.

That said, feel free to share more details if the above information don't resolve your issue.

[mhdawson]

@tjtanjin many thanks for the quick response and suggestion. Will try out using the app directory.

[tjtanjin]

@tjtanjin many thanks for the quick response and suggestion. Will try out using the app directory.

No problem! Feel free to re-open this issue or reach out on discord anytime 😃

[mhdawson]

Thanks again, moving to the app directory fixed it for me.