I have a ReactJS application that has the following workflow:
user submit input -> send input to Python script (with python-shell npm package) for computing result -> store the returned result to firebase.
PS: The Python function couldn't be re-written in Javascript.
User submit input:
<div className="post_container">
<div className="input">
/* User submit the input -> compute result -> store to firebase*/
<form>
<input value={input} onChange={e => setInput(e.target.value)} type="text"></input>
<button onClick={sendPost} type="submit">Submit</button>
</form>
</div>
</div>
A Javascript function that calls the Python file:
const computeResult = () => {
let result;
/* Python script has a function that computes the result */
let python = new PythonShell('script.py');
python.send(input); /* send the input to the script */
python.on('message', function (message) {
console.log(`Message received from Python: ${message}`);
result = message; /* receive the computed result from the script */
});
python.end(function (err,code,signal) {
if (err) throw err;
console.log('The exit code was: ' + code);
console.log('The exit signal was: ' + signal);
console.log('finished');
});
return result;
}
Store the result to firebase:
const sendPost = async(e) => {
e.preventDefault();
/* Compute the result by calling computeResult()*/
let result = await computeResult();
/* Store the result to the firebase */
db.collection('posts').add({
time: firebase.firestore.FieldValue.serverTimestamp(),
result: result
})
setInput('');
}
The full code is as shown below:
import React, { useEffect, useState } from 'react';
import { db } from './firebase';
import firebase from 'firebase';
import {PythonShell} from 'python-shell';
function Post() {
const [input, setInput] = useState('');
/* A function that calls Python script */
const computeResult = () => {
let result;
/* Python script has a function that computes the result */
let python = new PythonShell('script.py');
python.send(input); /* send the input to the script */
python.on('message', function (message) {
console.log(`Message received from Python: ${message}`);
result = message; /* receive the computed result from the script */
});
python.end(function (err,code,signal) {
if (err) throw err;
console.log('The exit code was: ' + code);
console.log('The exit signal was: ' + signal);
console.log('finished');
});
return result;
}
const sendPost = async(e) => {
e.preventDefault();
/* Compute the result by calling computeResult()*/
let result = await computeResult();
/* Store the result to the firebase */
db.collection('posts').add({
time: firebase.firestore.FieldValue.serverTimestamp(),
result: result
})
setInput('');
}
return (
<div className="post_container">
<div className="input">
/* User submit the input -> compute result -> store to firebase*/
<form>
<input value={input} onChange={e => setInput(e.target.value)} type="text"></input>
<button onClick={sendPost} type="submit">Submit</button>
</form>
</div>
</div>
)
}
export default Post
When I run npm start, no error message displayed in the terminal. Instead the error message occurs in localhost:3000. I've no clue how I can solve this error.
TypeError: The "original" argument must be of type Function
promisify
node_modules/util/util.js:601
598 | var kCustomPromisifiedSymbol = typeof Symbol !== 'undefined' ? Symbol('util.promisify.custom') : undefined;
599 |
600 | exports.promisify = function promisify(original) {
> 601 | if (typeof original !== 'function')
602 | throw new TypeError('The "original" argument must be of type Function');
603 |
604 | if (kCustomPromisifiedSymbol && original[kCustomPromisifiedSymbol]) {
