TypeError - Class extends value #<Object> is not a constructor or null

Support
, ,
1

I built a proxy server with netlify function.
It worked well at local development environment.
But after deployment, this error occurred.
I’m not sure if the problem is from fetch-blob or netlify function, but I’m asking here because it worked well at local.

Can anyone help with this?

2

Hi @Chun-gu,

It is possible the problem is with the fetch-blob package in a serverless environment.

fetch-blob is a Blob implementation in Node.js, originally from node-fetch.

Try out the alternative package node-fetch to see if it helps resolves the problem.

If the suggestions above does not help, kindly take your time and make sure you go through the API of blob-fetch to make sure you are not missing anything.

Let me know the outcome.

Thanks.

4

@clarnx, they’re already using node-fetch: liontime-api-redirect/index.js at main · Chun-gu/liontime-api-redirect · GitHub

I can see this happen with @jacobus91 in this thread too: Netlify Fetch Function Works Locally, Returns 502 Error Deployed. Even they are using node-fetch and getting the exact same issue.

@Chun-gu and @jacobus91, could you try using axios to see if it helps? But, please use Axios v1.1.3 or lower as v1.2.0 of Axios currently has a different bug: https://github.com/axios/axios/issues/5298

2 Likes
5

Thanks for getting back to me! I added axios version 1.1.3 as a dependency and changed my function to the following:

import axios from 'axios';
const API_KEY = process.env.WEATHER_API_KEY;

export async function handler(event) {
	try {
		const eventBody = JSON.parse(event.body);
		const query = eventBody.query;

		const response = await axios.get(`https://pro.openweathermap.org/geo/1.0/direct?q=${query}&limit=5&appid=${API_KEY}`);
		if(response.status !== 200) {
			return {statusCode: response.status, body: `Localities fetch error: ${response.statusText}`};
		}

		return {
			statusCode: 200,
			body: JSON.stringify(response.data)
		};
	}
	catch (error) {
		console.error(error);
		return {
			statusCode: 500,
			body: JSON.stringify({ message: `Handler function error: ${error.message}` })
		};
	}
}

Testing locally with netlify dev, I got the data back exactly as expected using the same request on the client side:

let localityQuery = 'Los Angeles';
fetch('/.netlify/functions/get_localities', {
    method: 'POST', // Not actually altering anything, but passing a body parameter fails with GET
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        query: localityQuery
    })
})
.then(rawData => rawData.json())
.then(data => {
    console.log(data);
})
.catch((error) => console.error(error));

Unfortunately, once I deployed to Netlify, running the same request got me another 502 error, but I thankfully got a more descriptive error by logging the returned data:

{ errorType: "Runtime.ImportModuleError", errorMessage: "Error: Cannot find module '/var/task/node_modules/axios/dist/node/axios.cjs'", trace: [...] }

(I excluded the contents of the trace for brevity, and since it can be reproduced.)

6

Hey @jacobus91,

This looks like a different error than what you were seeing before. Could you try to add:

[functions]
  node_bundler = "esbuild"

to your netlify.toml to see if it helps?

1 Like
7

Adding that code to netlify.toml fixed the issue! Thank you so much!