python-eel/Eel

Javascript function not running in python file (Eel React App)

Open

#449 aperta il 22 feb 2021

Vedi su GitHub
 (5 commenti) (0 reazioni) (0 assegnatari)Python (570 fork)batch import
help wanted

Metriche repository

Star
 (5980 star)
Metriche merge PR
 (Nessuna PR mergiata in 30 g)

Descrizione

Describe the problem I am trying to run eel with react using Eel-React-Template. I have a javascript function exposed in index.html but when I try to run the function from a python file I get the following error:

Traceback (most recent call last):
  File "main.py", line 13, in <module>
    eel.getFiles(files)
AttributeError: module 'eel' has no attribute 'getFiles'

Code snippet(s) My directory structure is:-

│ .gitignore │ main.py │ rest of the files ├───public │------index.html │------rest of the files ├───src │-----App.js │-----eel.js │-----index.js │-----rest of the files**

This is my App.js:-

import "./App.css";
import React , {Component , useState} from "react"
import { eel } from "./eel.js";

function App() {
  let [value , setValue] = useState('')
  eel.set_host("ws://localhost:8888");
  eel.getpara("argument")(res => setValue(value = res)) //Python function from javascript
  return (
    <div className="App">
        <div className="Main">
          <h1>Hello</h1>
          <p>{value}</p>
          <p className="para"></p>
        </div>
    </div>
  );
}
export default App;

  • I know that if I don't provide sample code that allows someone to quickly step into my shoes, I may not get the help I want or my issue may be closed.

This is my main.py:-

import eel
import sys

@eel.expose
def getpara(arg):
    return f"You passed {arg}"

files = ['file1' , 'file2' , 'file3']

try:
    eel.getFiles(files) # Javascript function from python
except AttributeError:
    raise AttributeError('Eel function error')

if __name__ == '__main__':
    if sys.argv[1] == '--develop':
        eel.init('client')
        eel.start({
            'port': 3000,
        }, options={
            'port': 8888,
            'host': 'localhost',
        } , suppress_error = True)
    else:
        eel.init('build')
        eel.start('index.html')

This is my index.html:-

<html>
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <script src="http://localhost:8888/eel.js"></script>
    <script>
      eel.expose(getFiles);
      function getFiles(files)
      {
        files.map((file) => {
          document.querySelector(".para").innerHTML += String(file);
        });
      }
    </script>
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

  </body>
</html>

Desktop (please complete the following information):

  • OS: [e.g. windows]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Guida contributor