quill-mention not working when used with react-quill library in nextjs app router project

[manacy-keyvalue]

I'm trying to integrate it in a nextjs app router project.

versions of relevant packages used: nextjs: 14.1.4 react: 18.2

react-quill: 2.0.0 quill-mention: 6.0.0

Code from project. Kindly correct me if i am doing something wrong.

'use client';

import 'quill-mention/autoregister';
import 'react-quill/dist/quill.snow.css';
import 'quill-mention';

import { Grid } from '@mui/material';
import { useCallback, useState } from 'react';
import ReactQuill from 'react-quill';

const Page = () => {
  const [value, setValue] = useState('');

  console.log('React quill value', value);

  const matchedPeople = [
    {
      id: 1,
      value: 'John Doe',
    },
    {
      id: 2,
      value: 'Dear Doe',
    },
  ];

  const handleMentionSearch = useCallback(async (searchTerm, renderList) => {
    renderList(matchedPeople);
  }, []);

  const modules = {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline', 'blockquote'],
      [
        { list: 'ordered' },
        { list: 'bullet' },
        { indent: '-1' },
        { indent: '+1' },
      ],
      ['link', 'image'],
    ],
    mention: {
      allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
      mentionDenotationChars: ['@', '#'],
      source: handleMentionSearch,
    },
  };

  return (
    <Grid container direction='column'>
      <Grid item>React quill</Grid>
      <Grid item>
        <ReactQuill
          theme='snow'
          value={value}
          onChange={setValue}
          modules={modules}
        />
      </Grid>
    </Grid>
  );
};

export default Page;

Error:

If you guys are able to make it working. please share a working example in code sandbox.

[cuongle-hdwebsoft]

In v6, quill-mention uses quill dependency that being v2. On the other hand, react-quill just uses quill with version v1. There are a lot of changes between the two versions. In my case, you can use another quill-mention that is compatible with react-quill. You can find out my example here

[mcamack]

Trying to use this with https://www.npmjs.com/package/react-quill-new (which has the v2 dependency). I don't get any errors, but the Quill object shows up as an empty div in the app no matter how I import and register the module.