AUR5000

Error Message

AUR5000: Could not resolve fetch function. Please provide a fetch function implementation or a polyfill for the global fetch function.

Description

This error occurs when the Aurelia Fetch Client cannot find a fetch function implementation. The fetch client requires either:

1. A global fetch function (available in modern browsers and Node.js 18+)

2. A polyfill for environments that don't support fetch natively

3. A custom fetch implementation provided during configuration

Common Scenarios

Node.js Environments (pre-18)

// Node.js versions before 18 don't have global fetch
import { HttpClient } from '@aurelia/fetch-client';

// This will throw AUR5000
const client = new HttpClient();

Server-Side Rendering

// During SSR, global fetch might not be available
export class MyService {
  constructor(private http: HttpClient) {}
  
  async getData() {
    // This might throw AUR5000 during SSR
    return this.http.get('/api/data');
  }
}

Solutions

1. Use Node.js 18+ (Recommended)

Node.js 18+ includes global fetch support:

# Update to Node.js 18 or later
node --version  # Should be 18.0.0 or higher

2. Install a Fetch Polyfill

For older environments, install a fetch polyfill:

npm install cross-fetch
# or
npm install node-fetch

// At the top of your main file (before Aurelia imports)
import 'cross-fetch/polyfill';
// or
import fetch from 'node-fetch';
globalThis.fetch = fetch as any;

import { Aurelia } from 'aurelia';
// ... rest of your code

3. Configure Custom Fetch Implementation

Provide a custom fetch function during HttpClient configuration:

import { HttpClient } from '@aurelia/fetch-client';
import fetch from 'node-fetch';

const client = new HttpClient();
client.configure(config => {
  config.withFetch(fetch as any);
});

4. Dependency Injection Configuration

Configure the fetch function at the container level:

import { DI } from '@aurelia/kernel';
import { HttpClient } from '@aurelia/fetch-client';
import fetch from 'node-fetch';

// During app configuration
container.register(
  Registration.instance(HttpClient, new HttpClient().configure(config => {
    config.withFetch(fetch as any);
  }))
);

Example: Complete SSR Setup

// main.ts (SSR)
import 'cross-fetch/polyfill'; // Must be first
import { Aurelia } from 'aurelia';
import { MyApp } from './my-app';

export async function start() {
  const au = new Aurelia()
    .app({ host: document.body, component: MyApp });
    
  await au.start();
}

// my-service.ts
import { HttpClient } from '@aurelia/fetch-client';

export class MyService {
  constructor(private http: HttpClient) {}
  
  async getData() {
    // Now this works in all environments
    return this.http.get('/api/data');
  }
}

Debugging Tips

1. Check Environment: Verify if your runtime environment supports global fetch

2. Import Order: Ensure polyfills are imported before any Aurelia code

3. SSR Context: Pay special attention to server-side rendering scenarios

4. Node.js Version: Consider upgrading to Node.js 18+ for native fetch support