Some features of react-quill don't work in production

Question

I have a Next app and Text Editor using react-quill. In localhost everything works well, but when I got my project in vercel some features of react-quill don't work, like fontSize, color of font, align and so on.

`

import { Box } from '@chakra-ui/react';
import dynamic from 'next/dynamic';
import 'react-quill/dist/quill.snow.css';

const QuillNoSSRWrapper = dynamic(import('react-quill'), {
    ssr: false,
    loading: () => <p>Loading ...</p>,
});

const modules = {
    toolbar: [
        [{ header: '1' }, { header: '2' }, 'code-block'],
        [{ size: [] }],
        [{ script: 'super' }, { script: 'sub' }],
        [{ color: [] }, { background: [] }],
        ['bold', 'italic', 'underline', 'strike', 'blockquote'],
        [
            'direction',
            { align: [] },
            { list: 'ordered' },
            { list: 'bullet' },
            { indent: '-1' },
            { indent: '+1' },
        ],
        ['link', 'image', 'video'],
        ['clean'],
    ],
};

const formats = [
    'header',
    'font',
    'size',
    'bold',
    'italic',
    'underline',
    'strike',
    'blockquote',
    'list',
    'bullet',
    'indent',
    'link',
    'image',
    'video',
    'code-block',
    'align',
    'direction',
    'color',
    'background',
    'script',
    'super',
    'sub',
];

const TextEditor = ({ setContentValue, value }: any) => {
    return (
        <QuillNoSSRWrapper
            bounds={'.app'}
            modules={modules}
            formats={formats}
            onChange={setContentValue}
            placeholder="Write your post here. You can edit your text by tools above"
            value={value}
            theme="snow"
        />
    );
};

export default TextEditor;

`

Here my code of TextEditor

Do you have any ideas about this?

I tried to use Text Editor react-quill that works well in development, but it doesn't work in vercel

score 0 · Answer 1 · edited Dec 09 '22 at 07:28

0

Check if your next.config.ts has swcMinify: true. Removing this in my project helped.

More info here: ReactJs quill editor add color to text not working for deployed app

edited Dec 09 '22 at 07:28

Adriaan

17,741
7
42
75

answered Dec 09 '22 at 07:05

Limhorng Sok

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 14 '22 at 15:05

Some features of react-quill don't work in production

1 Answers1