next.jsreact-quill

problem with react-quill library with next.js project

I'm running into a weird problem. I'm using NextJS for its server-side rendering capabilities and I am using ReactQuill as my rich-text editor. To get around ReactQuill's tie to the DOM, I'm dynamically importing it. However, that presents another problem which is that when I try to access the component where I'm importing ReactQuill via a anchor link is not working but I can access it via manually hit the route. Here is my directories overview,

components/
  crud/
    BlogCreate.js
pages/
  admin/
    crud/
      blog.js
    index.js
  blogs/
    index.js

In my pages/admin/index.js 

  ...
    <li className="list-group-item">
      <Link href="/admin/crud/blog">
        <a>Create Blog</a>
      </Link>
    </li>
  ...

In my pages/admin/crud/blog.js 

import BlogCreate from "../../../components/crud/BlogCreate";
...
<div className="col-md-12">
  <BlogCreate />
</div>

In my components/crud/BlogCreate.js

import dynamic from "next/dynamic";
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
import "../../node_modules/react-quill/dist/quill.snow.css";
...
        <div className="form-group">
          <ReactQuill
            value={body}
            placeholder="Write something amazing..."
            onChange={handleBody}
          />
        </div>

in order to use import "../../node_modules/react-quill/dist/quill.snow.css" in components/crud/BlogCreate.js I use @zeit/next-css and here is my next.config.js

const withCSS = require("@zeit/next-css");
module.exports = withCSS({
  publicRuntimeConfig: {
...
  }
});

Problem
when I click the Create Blog it should be redirect me http://localhost:3000/admin/crud/blog but it just freeze.

image1

image2

But if I manually hit http://localhost:3000/admin/crud/blog then it go to the desire page and work perfect.

image3

image4

And as soon as I manually load that page then Create Blog works. Now I really don't understand where is the problem? Because it show no error that's why I haven't no term to describe my problem that's why I give all the nasty code and directories which I suspect the reason of this error.

Solution

  • It's hard to give you any solution without seeing the entire project(As you mentioned that it shows no error). You may remove the @zeit/next-css plugin because Next.js 9.3 is Built-in Sass Support for Global Stylesheets. You can use it for css also.

    Create a pages/_app.js file if not already present. Then, import the quill.snow.css file: 

    import "../../node_modules/react-quill/dist/quill.snow.css";

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

    If it gives any error then you can create a directory/file to copy-paste the quill.snow.css code in that file.

    pages/
  _app.js
styles/
  quill_style.css

    Then import the file in _app.js like,

    import "../styles/styles_quill.css";

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

    Eventually you can import your custom gobal css here also.

    If although the problem remains then provide your git repository. happy coding ✌️