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

[Bose-Coats]

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 (<ThemeProvider theme={myTheme}> <MUIRichTextEditor label="Start typing..." defaultValue={data} onChange = {change} /> </ThemeProvider>) }

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")

[bc185168]

Did you solve this? Also facing this issue

[jeromeSH26]

same here

[Bose-Coats]

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

[tristan-git]

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

replace with :

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

it works for me :)

[niuware]

@Bose-Coats Was this working on version 2.0.0?

[fnowacki]

@niuware same error on 2.0.0 version

[quitequinn]

Ditto, seems to be caused by the defaultValue parameter.

[kyle-apex]

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