Can't import named export 'DefaultEditor' from non-EcmaScript module during Server-Side Rendering (SSR)

[GanonForce]

Hello,

I'm facing an issue when attempting to import the named export DefaultEditor from the react-simple-wysiwyg module during Server-Side Rendering (SSR). The specific error message I receive is: "Can't import the named export 'DefaultEditor' from non-EcmaScript module (only default export is available)".

Here's my current import statement where the error surfaces:

import { DefaultEditor } from 'react-simple-wysiwyg';

Also, I'm not trying to render the component itself on the server side, rendering it using the "!isFirstRender" condition

I would appreciate any guidance or updates to resolve this issue.

Best Regards, Alexandr

[megahertz]

It depends on the bundler and its configuration. As a quick workaround, you can try requiring a commonjs module from 'react-simple-wysiwyg/lib/index.cjs.js'

[GanonForce]

Unfortunately the error remains if I import from 'react-simple-wysiwyg/lib/index.cjs.js'

[megahertz]

If you could provide more information about your bundler I can investigate the issue when I have enough time. Looks like the only workaround now is using default export.

[jakkub21]

I'm facing similar issue. I have react app created with CRA: https://create-react-app.dev/

[megahertz]

@GanonForce @jakkub21 could you try react-simple-wysiwyg@3.0.0 ?

[GanonForce]

@megahertz, yes I'll check it tomorrow and write back to you.

[GanonForce]

@megahertz, unfortunately, the problem remains and manifests itself in the same way, in the old version, when specifying import in this way "import { DefaultEditor } from 'react-simple-wysiwyg/lib/index.cjs';", everything is fine, but you just need to remember in all places where we import DefaultEditor do this

[megahertz]

@GanonForce which react version do you use?

[GanonForce]

@megahertz i use react 18.2.0

[jakkub21]

@megahertz im using react 16.13.1, sorry for the late response.

i also implemented your library with current version 3.0.0 as @GanonForce mentioned above by importing:

import { DefaultEditor } from 'react-simple-wysiwyg/lib/index.cjs

[megahertz]

I'm going to solve the issue in the next two weeks.

[megahertz]

@GanonForce @jakkub21 could you try react-simple-wysiwyg@3.0.1?

[jakkub21]

@megahertz i just tested it on React 16.13.1 and by simply importing components from your library its seems to work.

Example:

import React, { useState } from 'react';
import Editor from 'react-simple-wysiwyg';

const PositionForm = () => {
   const [form, setForm] = useState({
      title: "",
      description: ""
   })

   return (
       <form>
           <input value={form.title} onChange={(e, {value}) => setForm(prev => ({...prev, title: value}))}/>
           <Editor value={form.description} onChange={(e, { value }) => setForm({
                  ...form,
                  description: value
            })} />
       </form>
   )
}

For me its resolved. Thank you!

[megahertz]

Thank you @jakkub21. I'm going to make a release in 2 weeks

[megahertz]

published