Unable to use fetch API on Azure Static web apps
Environment
node:20 in azure static web apps
Reproduction
https://stackblitz.com/edit/github-p3avvp?file=server%2Froutes%2Findex.ts
Describe the bug
In this product environment of Azure, even if it is set to node:20, it still does not include the fetch api
https://github.com/nuxt/nuxt/issues/28611
Additional context
A valid Azure subscription is required to test Static web apps. This error only occurs in the cloud, not in the local simulator.
Logs
{
"url": "/",
"statusCode": 500,
"statusMessage": "",
"message": "[GET] \"https://www.baidu.com\": <no response> _fetch1 is not a function",
"stack": ""
}
### Tasks
When using the exact example from the docs, it also works
export default defineEventHandler(async (event) => {
const data = await $fetch('https://ungh.cc/orgs/unjs/repos');
return data;
});
When using ofetch directly it works
import { $fetch } from 'ofetch';
export default defineEventHandler(async (event) => {
return await $fetch('https://unjs.io/');
});
I configured preset: 'azure' and executed build. The artifacts were then deployed using swa deploy .\.output\public\ --api-location .\.output\server\ --deployment-token TOKEN --api-language "node" --api-version "20" --env production.
I think you are not using fetch correct, as your reproduction already fails in stackblitz. Please check the docs about native fetch: https://nitro.unjs.io/guide/fetch
EDIT: Changed ordering of examples to make it more clear.
$fetch (same as fetch) should work in every file without any import, this seems like a bug (but harder to reproduce, as rollup sometimes mess up with chunk orders in more complex builds)
@itpropro by your testing, if you avoid import, do you reproduce issue or not?
$fetch(same asfetch) should work in every file without any import, this seems like a bug (but harder to reproduce, as rollup sometimes mess up with chunk orders in more complex builds)@itpropro by your testing, if you avoid import, do you reproduce issue or not?
It could also be a fetch keyword error caused by a packaging issue, but I may have time to track this down later
$fetch(same asfetch) should work in every file without any import, this seems like a bug (but harder to reproduce, as rollup sometimes mess up with chunk orders in more complex builds)@itpropro by your testing, if you avoid import, do you reproduce issue or not?
The second version I tested was without any imports, the ofetch one was only for the sake of testing, I should have ordered them the other way around. Both work in Static Web Apps.
Okay, then it is most certainly a rollup chunk ordering issue.
@censujiang If can still reproduce, do you think you can share a public repository? (Nuxt setup is also acceptable in this case since it might be also needed for reproduction)
If it is not reproducible anymore I would suggest closing the issue in the meanwhile.
Okay, then it is most certainly a rollup chunk ordering issue.
@censujiang If can still reproduce, do you think you can share a public repository? (Nuxt setup is also acceptable in this case since it might be also needed for reproduction)
If it is not reproducible anymore I would suggest closing the issue in the meanwhile.
I'd like to provide a Nuxt/Nitro repository that can be used for reproduction, but I'm currently on the Chinese National Day public holiday, so it's not convenient for now. I'll talk about it after the holiday.
No hurry thanks @censujiang!
Got it to work by passing the node 20 to the cli command:
--api-language "node" --api-version "20"
Additionally setting 20 to the preset config. Thanks everyone!