Installed the dependencies and tried loading the mui-rte in the page, it shows export undefined issue

[Bose]

import { createTheme, ThemeProvider } from '@mui/material/styles'
import MUIRichTextEditor from 'mui-rte'

const myTheme = createTheme({
// Set up your custom MUI theme here
})

const change = (data) =>{
console.log(data)
}

export const MaterialUIRichTextEditor =({data, setTexter}) => {
return (

)
}

This is how we have added the mui-rte
The ui is showing error on loading the page itself
"SyntaxError : unexpected token export
module.exports = require("mui-rte")

[baileycash]

Did you solve this? Also facing this issue

[jeromeSH26]

same here

[Bose]

No luck , so started using react-rte component which is working as expected

[Tristan]

in the node/mui-rte/index.js folder

replace with :

const MUIRichTextEditor = require('./dist/MUIRichTextEditor'); module.exports = MUIRichTextEditor;

it works for me :)

[Erik Lopez]

@Bose-Coats Was this working on version 2.0.0?

[Filip Nowacki]

@niuware same error on 2.0.0 version

[Quinn Keaveney]

Ditto, seems to be caused by the defaultValue parameter.

[Kyle Hoskins]

To use the editor in NextJS, I was able to put the editor in a component named TextEditor. Then I used dynamic to load it in another component:

import dynamic from 'next/dynamic';
const TextEditor = dynamic(() => import('components/TextEditor'), {ssr: false });

It can take a second to show up (in dev at least), so you can put something there while it loads

import dynamic from 'next/dynamic';
const TextEditor = dynamic(() => import('components/TextEditor'), {
  ssr: false,
  // eslint-disable-next-line react/display-name
  loading: () => (
    <>
      <Skeleton variant='text' sx={{ width: '15%' }} />
      <Skeleton variant='rectangular' sx={{ width: '100%', marginBottom: 3 }} height={100} />
    </>
  ),
});

Although I came here searching for how to get this to work for a @testing-library test, so I'd love it anyone has an example of that...

[adsuarezuci]

To use the editor in NextJS, I was able to put the editor in a component named TextEditor. Then I used dynamic to load it in another component:

import dynamic from 'next/dynamic';
const TextEditor = dynamic(() => import('components/TextEditor'), {ssr: false });

It can take a second to show up (in dev at least), so you can put something there while it loads

import dynamic from 'next/dynamic';
const TextEditor = dynamic(() => import('components/TextEditor'), {
  ssr: false,
  // eslint-disable-next-line react/display-name
  loading: () => (
    <>
      <Skeleton variant='text' sx={{ width: '15%' }} />
      <Skeleton variant='rectangular' sx={{ width: '100%', marginBottom: 3 }} height={100} />
    </>
  ),
});

Although I came here searching for how to get this to work for a @testing-library test, so I'd love it anyone has an example of that...

very good, it worked for me.
thanks