Hi, I’ve been following this tutorial.
Lambda function throws an error with ntl dev while it works fine without any error in the production. In the lambda function, it’s sending a POST request to Slack, using node-fetch.
Function invocation Incorrect error when I’m using ntl dev:
But Slack gets this request and actually post the message.
In Production:
In App.js it calls lambda function when it’s clicked on submit button:
class SlackMessage extends Component {
constructor(props) {
super(props);
this.state = {
loading: false,
text: null,
error: null,
success: false,
};
}
handleText = (e) => {
this.setState({ text: e.target.value });
};
handleSubmit = (e) => {
e.preventDefault();
this.setState({ loading: true });
fetch("/.netlify/functions/slack", {
method: "POST",
body: JSON.stringify({
text: this.state.text,
}),
})
.then((response) => {
if (!response.ok) {
return response.text().then((err) => {
console.log(response);
throw err;
});
}
})
.then(() =>
this.setState({
loading: false,
text: null,
success: true,
error: null,
})
)
.catch((err) => {
console.log("in app.js:" + err);
this.setState({
loading: false,
success: false,
error: err.toString(),
});
});
};
render() {
const { loading, text, error, success } = this.state;
return (
<form onSubmit={this.handleSubmit}>
{error && (
<p>
<strong>Error sending message : {error}</strong>
</p>
)}
{success && (
<p>
<strong>Done! Message sent to Slack</strong>
</p>
)}
<p>
<label>
Your Message: <br />
<textarea
onChange={this.handleText}
value={text}
></textarea>
</label>
</p>
<p>
<button type="submit" disabled={loading}>
{loading
? "Sending Slack Message..."
: "Send a Slack Message"}
</button>
</p>
</form>
);
}
}
And here is lambda function:
import fetch from "node-fetch";
const slackURL = process.env.SLACK_WEBHOOK_URL;
export function handler(event, context, callback) {
if (event.httpMethod !== "POST") {
return callback(null, {
statusCode: 410,
body: "Unsupported Request Method",
});
}
try {
const payload = JSON.parse(event.body);
fetch(slackURL, {
method: "POST",
body: JSON.stringify({ text: payload.text }),
})
.then(() => {
callback(null, { statusCode: 204 });
})
.catch((e) => {
callback(null, {
statusCode: 500,
body: "Internal Server Error(in try): " + e,
});
});
} catch (e) {
callback(null, {
statusCode: 500,
body: 'Internal Server Error "test string": ' + e,
});
}
}
It’s all same with the tutorial code.
Why am I getting function invocation error in dev environment while I’m not when it’s deployed on Netlify?
Secondly, In Lambda function, when I use require to import node-fetch, It throws TypeError: o is not a function(Also with ntl dev):
const fetch = require("node-fetch");
But in this case, It throws the same error in production.
I installed encoding for this known issue. Now I guess it should install node-fetch’s dependent module during the build process(obviously since it’s in package.json) and should work as you’re using in any other js file. Thus, it should work whether you use require or import. But it’s not. There must be something I’m missing here.
