React-quill: Element type is invalid

[shaneshearer-andculture]

Trying to use the simplest version of this library but continuing to get the error.

_Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of StatelessComponent_

This example is using typescript, but pretty basic and looks like it should work.

import * as React  from "react";
import ReactQuill from "react-quill";

interface ComponentProps {}

export const RichText: React.StatelessComponent<ComponentProps> = (props) => {    
    return (
        <ReactQuill />
    );
};

[alexkrolick]

Your module doesn't have a default export - you would need to import { RichText } from '../???' if you want your module to work as-is

[shaneshearer-andculture]

It ended up being the way that typescript handles the imports from the react-quill node module. I needed to change import ReactQuill from "react-quill" into import * as ReactQuill from "react-quill". After making that update, it worked perfectly!

[codeaid]

Just a quick note for those struggling with the same issue.

Applying the change @shaneshearer-andculture mentioned in the previous comment didn't help - I started getting a different error. What helped was changing the compilerOptions.module property in tsconfig.json from commonjs to esnext.

By doing that I can now successfully import the library as import ReactQuill from 'react-quill';.

[timothyallan]

I can't change the project wide import setting as it messes up other libraries. The import * as ReactQuill method above also doesn't work. I get JSX element type 'ReactQuill' does not have any construct or call signatures.

To workaround that error, I ended up doing
const Quill = ReactQuill as any; in render() and using <Quill xxxxx /> in my render() method, and it works.

Sorry Typescript. I feel so dirty.