Support for the experimental syntax 'moduleAttributes' isn't currently enabled

Question

Haven't yet found an experimental syntax solution for 'moduleAttributes', although I've seen many for others like 'classProperties'

Error:

./components/crud/CreateBlog.js:10:70
Syntax error: Support for the experimental syntax 'moduleAttributes' isn't currently enabled (10:71):

   8 | import { getTags } from '../../actions/tag';
   9 | import { createBlog } from '../../actions/blog';
> 10 | const ReactQuill = dynamic(() => import('react-quill', { ssr: false }));
     |                                                                       ^
  11 | import '../../node_modules/react-quill/dist/quill.snow.css';
  12 | 
  13 | const CreateBlog = ({ router }) => {

Component generating error:

import Link from 'next/link';
import { useState, useEffect } from 'react';
import Router from 'next/router';
import dynamic from 'next/dynamic';
import { withRouter } from 'next/router';
import { getCookie, isAuth } from '../../actions/auth';
import { getCategories } from '../../actions/category';
import { getTags } from '../../actions/tag';
import { createBlog } from '../../actions/blog';
const ReactQuill = dynamic(() => import('react-quill', { ssr: false }));
import '../../node_modules/react-quill/dist/quill.snow.css';

const CreateBlog = ({ router }) => {
    return (
        <div>
            <h3>Create Blog Form</h3>
        </div>
    )
}

export default withRouter(CreateBlog);

The error itself is being generated by the { ssr: false } options object being passed into the import() call.

Any thoughts or knowledge on how to solve this or why it is happening? Thank you!

Answer 1

The object should be the second parameter of the dynamic function not import :

const ReactQuill = dynamic(() => import('react-quill'),{ ssr: false });

Docs