react-quill 的某些功能在生产环境中不起作用

Question

我有一个使用 react-quill 的 Next 应用程序和文本编辑器。在 localhost 中一切正常，但是当我在 Vercel 中得到我的项目时，react-quill 的一些功能不起作用，比如字体大小、字体颜色、对齐等等。

`

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;

`

这是我的 TextEditor 代码

你对此有什么想法吗？

我尝试使用在开发中运行良好的文本编辑器 react-quill，但在 vercel 中不起作用

Answer 1

你能检查一下你的 next.config.ts 是否有 swcMinify: true 吗？

在我的项目中，删除 swcMinify: true 确实有帮助。

更多信息在这里：ReactJs quill editor add color to text not working for deployed app