export 'MuiFluentEdit' (imported as 'MuiFluentEdit') was not found in '@react-fluent-edit/mui'

[antokhio]

Hi just try to add package to project with
yarn add @react-fluent-edit/mentions @react-fluent-edit/mui

package versions:

"@react-fluent-edit/mentions": "^1.0.3",
"@react-fluent-edit/mui": "^1.0.3",

component:

import React, { useContext, useMemo, useRef, useState } from 'react';
import { MuiFluentEdit } from '@react-fluent-edit/mui';

type EditTaskChatComponent = React.FC<{}>;

export const EditTaskChat: EditTaskChatComponent = ({}) => {    
    return (
            <MuiFluentEdit>
                {/* <MuiMentionCombobox items={options} /> */}
            </MuiFluentEdit>
    );
};

Getting this when trying to import:

ERROR in ./src/containers/dashboard/actions/EditTask/components/EditTaskChat/index.tsx 129:42-55
export 'MuiFluentEdit' (imported as 'MuiFluentEdit') was not found in '@react-fluent-edit/mui' (module has no exports)

ERROR in ./src/containers/dashboard/actions/EditTask/components/EditTaskChat/index.tsx 130:43-61
export 'MuiMentionCombobox' (imported as 'MuiMentionCombobox') was not found in '@react-fluent-edit/mui' (module has no exports)

ERROR in ./node_modules/@react-fluent-edit/mui/lib/esm/index.js 1:0-32
Module not found: Error: Can't resolve './MuiFluentEdit' in 'C:\Users\Smart\source\repos\_sistema\sistema\node_modules\@react-fluent-edit\mui\lib\esm'
Did you mean 'index.js'?
BREAKING CHANGE: The request './MuiFluentEdit' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@react-fluent-edit/mui/lib/esm/index.js 3:0-37
Module not found: Error: Can't resolve './MuiMentionCombobox' in 'C:\Users\Smart\source\repos\_sistema\sistema\node_modules\@react-fluent-edit\mui\lib\esm'
Did you mean 'index.js'?
BREAKING CHANGE: The request './MuiMentionCombobox' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

[sodenn]

Hi @antokhio, you need to install @react-fluent-edit/core as well. I created a code sandbox with an example: https://codesandbox.io/s/fragrant-morning-c4gfev

[antokhio]

Thank you very much, now it works ;)
Added useState variable to sandbox so it works out of the box https://codesandbox.io/s/zealous-david-918jq6

[antokhio]

@sodenn
So i played with it for a bit, and there are some missing features, not sure if you want full list of that, however there seems to be one more critical issue: if i setValue("") field value not getting reset...
sandbox:
https://codesandbox.io/s/frosty-williamson-2zgf72?file=/src/EditTaskChat.tsx

[antokhio]

and just noted there is bunch of warnings in console:
https://gist.github.com/antokhio/0488924565e5fe772eba77784d5c2900

[sodenn]

Thanks for the report @antokhio. The broken source maps will be removed with the next version.
react-fluent-edit uses Slate under the hood. The value prop is only used during initial rendering. Subsequent changes are ignored. For more information see ianstormtaylor/slate#4540.
I will provide a convenient function to reset the value. Until then, you can try the following:

const { editor } = useFluentEdit();
const resetValue = () => {
  if (editor) {
    Transforms.delete(editor, {
      at: {
        anchor: Editor.start(editor, []),
        focus: Editor.end(editor, []),
      },
    });
  }
}

Or try to add a key prop to the FluentEdit component and change its value whenever you want to reset the editors value.

[sodenn]

In the next version there will be a function to reset the value of the editor:

const { resetEditor } = useFluentEdit();

The feature is currently available in the next-Version:

yarn add @react-fluent-edit/core@next @react-fluent-edit/mentions@next @react-fluent-edit/mui@next

[antokhio]

Hi thanks for update @next works like charm