[vite.js] Global CSS cannot be imported from within node_modules (error - ./node_modules/react-quill/dist/quill.snow.css)

[kingRayhan]

[alamorre]

Are you using a framework like NextJS by chance?

[DKBoston15]

@alamorre I am having the same issue, and yes I am using NextJS

[NourH2000]

i have the same problem , i am using reactJs

[NourH2000]

@alamorre I am having the same issue, and yes I am using NextJS

Hi . did you solve it

[alamorre]

Not yet I have a lot on my plate and this requires building a whole next js specific dependancy.

Additionally people with pro plans have roadmap influence so anybody that needs next JS on pro can make it happen this month 👍🏼

[DKBoston15]

This appears to be an issue directly with the way Quill.js publishes their css imports to npm. And given they have over a 1,000 issues with little to no response on almost all of those issues, I don't forsee them making any changes anytime soon. Unfortunately this blocks me from being able to use this as Next.js is crucial for what I am building. I understand other priorities but a big plus one from me on this as I can't use the library until this is fixed.

That being said, this looks to be a fairly common issue people have when working with Next, so I'll dive in and see if I can find a fix.

[alamorre]

There is an easy fix. I exclude that css import and you pull it in yourself. I can make a nextjs compatible verion of chat engine tofay

[alamorre]

Hey everybody 👋 Simple hack, but I put together nextjs-chat-engine

It's a workaround where you pull in the component then import require('react-quill/dist/quill.snow.css'); separately.

Please let me know if this helps y'all out, enjoy 🎉

[alamorre]

Has anybody tried this out yet? I want to see if it helped out

[DKBoston15]

Has anybody tried this out yet? I want to see if it helped out

I'll give this a shot today! Thanks for putting it together

[ValGeorgiev]

Has anybody tried this out yet? I want to see if it helped out

Hey @alamorre, I give it a try and it's fixing the mentioned issue with the styling. Unfortunately it shows another issue:

ReferenceError: document is not defined

I am using only nextjs-chat-engine and I added the ChatEngine component in a page component in Next.

import { ChatEngine, getOrCreateChat } from 'nextjs-chat-engine';

const Chat = () => {

  return (
    <ChatEngine
      projectID='xxxxxx'
      userName='Val'
      userSecret='pass'
    />
  )
}

Any recommendations?

[ValGeorgiev]

I investigated more and found out that the issue is coming from the react-quill library. I manage to fix it by using dynamic import for it in nextjs-chat-engine package. More info here: https://github.com/zenoamaro/react-quill/issues/718#issuecomment-856755998

and refactoring my component with the loading "hack":

const Chat = () => {
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    setLoading(false)
  }, [])

  if (loading) {
    return (
      <div>
        Loading...
      </div>
    )
  }

  return (
    <ChatEngine
      projectID='xxxxxxx'
      userName='Val'
      userSecret='pass'
    />
  )
}

I am happy to create a PR in nextjs-chat-engine and probably the docs needs updating if this is the way to go ^.

[alamorre]

Awesome 👏🏽 yeah if you make a PR in nextjs chat engine I'll definitely approve it.

Also can you please add to the readme any steps you need to take for it to work normally? You're awesome 🤩

[DKBoston15]

Cheers for this, waiting for the PR to be approved and merged with a readme update. Y'all are awesome

[DKBoston15]

@alamorre Using @ValGeorgiev solution, I got everything working on my end!

[alamorre]

Hey everybody, just a heads up I'm learning NextJS now and plan on supporting it formally this month 👍 👍

[alamorre]

Hey how did you do the dynamic import on react-chat-engine I used the code below and it's not working. Also, all sub-components are undefined 😔

const ReactChatEngine = dynamic(() => import('react-chat-engine'), { ssr: false })
console.log('ReactChatEngine', ReactChatEngine) // odd object
console.log('ReactChatEngine', ReactChatEngine.ChatEngineWrapper) // undefined
console.log('ReactChatEngine', ReactChatEngine.ChatHeader) // undefined
console.log('ReactChatEngine', ReactChatEngine.ChatFeed) // undefined

[alamorre]

Interesting, this works:

const ChatEngineWrapper = dynamic(() => import('react-chat-engine').then((module) => module.ChatEngineWrapper));
const ChatSocket = dynamic(() => import('react-chat-engine').then((module) => module.ChatSocket));
const ChatHeader = dynamic(() => import('react-chat-engine').then((module) => module.ChatHeader));
const ChatFeed = dynamic(() => import('react-chat-engine').then((module) => module.ChatFeed));

I'll add this to the docs and update it all tmo. PS I fixed it on react-chat-engine so nextjs-chat-engine will become deprecated

[DKBoston15]

Okay, so sounds like we are all good here pending the PR for the fix being pushed? I've got it all working on my end.

[alamorre]

Here is a post addressing everything and how it works now 👍

https://chatengine.io/docs/tutorials/nextjs_chat_app