search

chatengine-io / react-chat-engine

React component for a cheap and easy chat API
138 stars 35 forks source link

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

Closed mahieyin-rahmun closed 2 years ago

mahieyin-rahmun commented 3 years ago

Hi, I am trying to use react-chat-engine in a Next.js app. The library itself is awesome, however, I keep getting the following error:

error - ./node_modules/react-quill/dist/quill.snow.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/react-chat-engine/dist/index.modern.js

Here's my Chat component (chat.tsx):

import "react-quill/dist/quill.snow.css";
import dynamic from "next/dynamic";
const ChatEngine = dynamic(
  () => import("react-chat-engine").then((imported) => imported.ChatEngine),
  {
    ssr: false,
    loading: () => <p>Loading...</p>,
  },
);
import React from "react";
import Head from "next/head";
import { Container } from "../components/layout";

function Chat() {
  return (
    <div>
      <Head>
        <title>ChatEngine Test</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Container>
        <ChatEngine
          projectID="..."
          height="100vh"
          userName="..."
          userSecret="..."
        />
      </Container>
    </div>
  );
}

export default Chat;

If I comment out the following line in node_modules/react-chat-engine/dist/index.modern.js, (Corresponding line in the repository) it works once I delete the .next folder and rebuild.

var ReactQuill = require('react-quill');
// require('react-quill/dist/quill.snow.css');  // commented out for Next.js

Obviously, I cannot do this in production so I would like to have a better solution. Thank you for the library and the effort that you put into it.

package.json

"dependencies": {
    ...
    "next": "10.2.3",
    "react": "17.0.2",
    "react-chat-engine": "^1.9.2",
    "react-dom": "17.0.2"
    ...
}
alamorre commented 2 years ago

Yeah this is an issue with the NextJS framework on Chat Engine. I'll be looking for ways to be compatible with other frameworks in the coming month or so

alamorre commented 2 years ago

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 commented 2 years ago

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

alamorre commented 2 years ago

https://github.com/chatengine-io/react-chat-engine/issues/95 for visibility