pietrop / slate-transcript-editor

A React component to make correcting automated transcriptions of audio and video easier and faster. Using the SlateJs editor.
https://pietrop.github.io/slate-transcript-editor
Other
75 stars 33 forks source link

Element type is invalid #9

Closed geowa4 closed 3 years ago

geowa4 commented 3 years ago

Describe the bug When I try to load the SlateTranscriptEditor component, I receive the following error.

Uncaught 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, or you might have mixed up default and named imports.

Check the render method of `SlateTranscriptEditor`.
The above error occurred in the <button> component:
    in button (created by Button)
    in Button (created by SlateTranscriptEditor)
    in RefHolder (created by OverlayTrigger)
    in OverlayTrigger (created by SlateTranscriptEditor)
    in div (created by Col)
    in Col (created by SlateTranscriptEditor)
    in div (created by Row)
    in Row (created by SlateTranscriptEditor)
    in div (created by Col)
    in Col (created by SlateTranscriptEditor)
    in div (created by Row)
    in Row (created by SlateTranscriptEditor)
    in div (created by Container)
    in Container (created by SlateTranscriptEditor)
    in SlateTranscriptEditor (created by TranscriptEditor)
    in div (created by TranscriptEditor)
    in TranscriptEditor (created by Connect(TranscriptEditor))
    in Connect(TranscriptEditor) (created by Route)
    in Route (created by App)
    in div (created by App)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by App)
    in div (created by App)
    in App (created by Route)
    in Route
    in Router (created by BrowserRouter)
    in BrowserRouter
    in Provider

To Reproduce All I've done is drop in this snippet.

<SlateTranscriptEditor
  mediaUrl={videoURL}
  transcriptData={transcript}
  handleSaveEditor={() => this.save()}
/>

Expected behavior N/A; see screenshot

Screenshots Screen Shot 2020-08-23 at 21 13 59

Desktop (please complete the following information):

Additional context React 16.13.1

pietrop commented 3 years ago

if you got time, it be useful to try on a new Create React App, and import STE there, and see if that works?

geowa4 commented 3 years ago

This turned out to be a dependency problem with fonts. Oy

Thanks for taking our questions in DMs!

pietrop commented 3 years ago

Awesome, I am glad it all worked out, thanks for the update!