Can't access javascript function from python through eel

I've been trying to learn the basics of Eel through their documentation. I struggled learning how to trigger a javascript function through python so I tried to download their Hello World example straight from their github. You can open it here.

But I still get the same error, namely: Exception has occurred: AttributeError module 'eel' has no attribute 'say_hello_js'

The code is as following: (you can also look it up on github in the link abov)

hello.py

    import eel
    
    # Set web files folder
    eel.init('web')
    
    @eel.expose                         # Expose this function to Javascript
    def say_hello_py(x):
        print('Hello from %s' % x)
    
    say_hello_py('Python World!')
    eel.say_hello_js('Python World!')   # Call a Javascript function
    
    eel.start('hello.html', size=(300, 200))  # Start

web/index.html

    <!DOCTYPE html>
    <html>
      <head>
        <title>Hello, World!</title>
    
        <!-- Include eel.js - note this file doesn't exist in the 'web' directory -->
        <script type="text/javascript" src="/eel.js"></script>
        <script type="text/javascript">
          eel.expose(say_hello_js); // Expose this function to Python
          function say_hello_js(x) {
            console.log("Hello from " + x);
          }
    
          say_hello_js("Javascript World!");
          eel.say_hello_py("Javascript World!"); // Call a Python function
        </script>
      </head>
    
      <body>
        Hello, World!
      </body>
    </html>

Could it be that I have a wrong version of python or Eel? I am running Python 3.8.10. I ran pip install eel --upgrade but the issue still occurs.

Solution

I cannot pin point the exact issue based on the details you provided. But you can try the following these steps if you're using VSC:

Run this command py -m venv .venv and it will create your virtual environment.
Select the virtual environment's Python interpreter with CTRL + SHIFT + K.
Close out your terminal with the trash icon.
Start the terminal using the virtual environment's Python interpreter with CTRL + J.
Run the command pip install eel.
Create the file hello.py.
Create the directory web.
In web create the file hello.html.

In hello.py use this code:

import eel
eel.init('web')
eel.say_hello_js('Hi from Python')
eel.start('hello.html')

In hello.html use this code:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, World!</title>

    <!-- Include eel.js - note this file doesn't exist in the 'web' directory -->
    <script type="text/javascript" src="/eel.js"></script>
    <script type="text/javascript">
      eel.expose(say_hello_js); // Expose this function to Python
      function say_hello_js(x) {
        alert("Hello from " + x);
      }
    </script>
  </head>

  <body>
    Hello, World!
  </body>
</html>

If you followed these steps, you should see the alert box pop up. To trigger a JS function from Python you need to precede the function with the eel expose function like this eel.expose(your_js_function_name);. From Python you would call this function using the eel module and calling that function name like this eel.your_js_function_name(parameter_if_any). Make sure that in your HTML file you have the eel script element in the head. Then another script element after that one with all your functions.