Open Focusz opened 3 years ago
In my case I used dynamic imports
const ReactQuill = dynamic(() => import('react-quill'), { ssr: false })
I'd point to the same solution from pelevin: https://dev.to/a7u/reactquill-with-nextjs-478b
Try
import { SPLayout } from '@layout';
import dynamic from 'next/dynamic';
import { FC, ReactElement } from 'react';
const ReactQuill = dynamic(
() => {
return import('react-quill');
},
{ ssr: false }
);
const Create: FC = (): ReactElement => {
return (
<SPLayout>
<ReactQuill
value={'test'}
onChange={e => {
console.log(e);
}}
/>
</SPLayout>
);
};
export default Create;
Hey guys, do you know how to access Quill (ReactQuill.Quill) whilst using a dynamic import? I want to create a blot.
@EliasTouil Please try moving all your editor-code into a separate module that gets loaded as the view, e.g. Create.tsx
, as you've already done, but with all imports in the common way. Then in your page
use the dynamic
import for this new module, e.g. Create
.
I have written a solution see https://stackoverflow.com/a/77369928/2924492
Ticket due diligence
v2.0.0-beta.2
ReactQuill version
{ "name": "@minimal/material-kit-react", "author": "Minimal", "licence": "UNLICENSED", "version": "2.1.0", "private": true, "scripts": { "dev": "next dev -p 8222", "build": "next build", "start": "next start" }, "dependencies": { "@auth0/auth0-spa-js": "^1.15.0", "@emotion/cache": "^11.4.0", "@emotion/react": "^11.4.0", "@emotion/styled": "^11.3.0", "@iconify/icons-eva": "^1.1.0", "@iconify/icons-ic": "^1.1.4", "@iconify/react": "^1.1.4", "@material-ui/core": "^5.0.0-alpha.34", "@material-ui/icons": "^5.0.0-alpha.34", "@material-ui/lab": "^5.0.0-alpha.34", "@material-ui/styles": "^5.0.0-alpha.33", "@prisma/client": "^2.24.1", "@reduxjs/toolkit": "^1.5.1", "bcryptjs": "^2.4.3", "change-case": "^4.1.2", "date-fns": "^2.21.3", "draft-js": "^0.11.7", "faker": "^5.5.3", "formik": "^2.2.9", "framer-motion": "^4.1.17", "highlight.js": "^11.0.1", "jsonwebtoken": "^8.5.1", "jss": "^10.6.0", "jss-rtl": "^0.3.0", "lodash": "^4.17.21", "next": "^10.2.2", "notistack": "^1.0.9", "nprogress": "^0.2.0", "numeral": "^2.0.6", "react": "17.0.2", "react-dom": "17.0.2", "react-draft-wysiwyg": "^1.14.7", "react-dropzone": "^11.3.2", "react-helmet-async": "^1.0.9", "react-intersection-observer": "^8.32.0", "react-markdown": "^6.0.2", "react-quill": "^2.0.0-beta.2", "react-redux": "^7.2.4", "react-router-dom": "^5.2.0", "react-scroll": "^1.8.2", "redux": "^4.1.0", "redux-persist": "^6.0.0", "rehype-highlight": "^4.1.0", "rehype-raw": "^5.1.0", "simplebar": "^5.3.3", "simplebar-react": "^2.3.3", "stylis": "^4.0.10", "stylis-plugin-rtl": "^2.1.0", "yup": "^0.32.9" }, "devDependencies": { "@types/bcryptjs": "^2.4.2", "@types/faker": "^5.5.5", "@types/jsonwebtoken": "^8.5.1", "@types/lodash": "^4.14.170", "@types/nprogress": "^0.2.0", "@types/numeral": "^2.0.1", "@types/react": "^17.0.6", "@types/react-dom": "^17.0.6", "@types/react-draft-wysiwyg": "^1.13.2", "@types/react-redux": "^7.1.16", "@types/react-router-dom": "^5.1.7", "@types/react-scroll": "^1.8.2", "prisma": "^2.24.1", "typescript": "^4.2.4" } }