How to use import { Excalidraw } module in self-hosting html file ?

[gitubbi]

Hello,

I'm trying to use Excalidraw with babel in an html file with :

<script type="text/babel" data-presets="react" data-type="module">

     import { Excalidraw } from "./excalidraw.production.min.js";

</script>

but I got error:

"The requested module './excalidraw.production.min.js' does not provide an export named 'Excalidraw' "

Can someone show me the good syntax to use Excalidraw module with babel in a html file ?

Thank you.

[ad1992]

@gitubbi if you are using in browser its ExcalidrawLib, if via npm package then you can directly import from npm package
Here are the docs
In your case since you are trying to using it in browser directly so it should be ExcalidrawLib

[gitubbi]

Thank you for your nice help Aakansha.

I don't know anything about React, so it's a little bit confusing for me.

Do you mean I have to do :

import { ExcalidrawLib } from "./excalidraw.production.min.js";

or use ExcalidrawLib in another way ?

(the excalidraw js file is on my server and loaded on client side by the html file, not taken from npm)

I wish to be able to use the JSX syntax to modify the MainMenu, using the example i have seen in docs :

 const Menu = () => {
  return (
    <Excalidraw>
      <MainMenu>
        <MainMenu.DefaultItems.LoadScene />
        <MainMenu.DefaultItems.Export />
        <MainMenu.DefaultItems.SaveAsImage />
        <MainMenu.Separator />
        <MainMenu.Item onSelect={() => alert("Hello to you too!")}>
          Hello!
        </MainMenu.Item>
      </MainMenu>
    </Excalidraw>
  );
}; 

But the class < Excalidraw > is not recognized because i think that the import of Excalidraw module doesn't work.

If i code directly in the browser, is it possible to use JSX syntax like above (interpreted by babel), or do we only have access to the Excalidraw api by use of some functions like React.createElement... ?

Thank you.

[gitubbi]

Finally I have understood how to do it.
I put it here for newbie like me, if it can helps someone :

Just have to know this about React.createElement:

const element = React.createElement( type, props, [children] )

So define an array of items you want in the MainMenu using DefaultItems:

const MainMenu = [
                    React.createElement( ExcalidrawLib.MainMenu.DefaultItems.LoadScene ),
                    React.createElement( ExcalidrawLib.MainMenu.DefaultItems.Export ),
                    React.createElement( ExcalidrawLib.MainMenu.DefaultItems.SaveAsImage ),
                    React.createElement( ExcalidrawLib.MainMenu.DefaultItems.ClearCanvas ),
                    React.createElement( ExcalidrawLib.MainMenu.Separator ),
                    React.createElement( ExcalidrawLib.MainMenu.DefaultItems.ToggleTheme ),
                    React.createElement( ExcalidrawLib.MainMenu.DefaultItems.ChangeCanvasBackground ),
                  ]

Then add MainMenu array as children of Excalidraw.MainMenu (itself chid of Excalidraw):

const App = () => {
    
    return React.createElement( React.Fragment, null,
              React.createElement( "div", { style: { height: "100vh" }, },
                  React.createElement( ExcalidrawLib.Excalidraw, options, 
                      React.createElement( ExcalidrawLib.MainMenu, {}, MainMenu ),    //attach your custom Menu here
                  ),   
              ),  
           );
};

This is equivalent to JSX code:

 return (
    <Excalidraw>
      <MainMenu>
        <MainMenu.DefaultItems.LoadScene />
        ...

[oduboisoscars]

@gitubbi do you have a sample to create a menu with a custom item (mainmenu.item) using the React.createElement syntax and a call to a specific javascript method?