python-eel/Eel
View on GitHubJavascript function not running in python file (Eel React App)
Open
#449 opened on Feb 22, 2021
help wanted
Repository metrics
- Stars
- (5,980 stars)
- PR merge metrics
- (No merged PRs in 30d)
Description
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]