Issues migrating OpenAI JavaScript library from version 3 to version 4

Other Questions OpenAI
1

OpenAI SDK Migration Problem

I’m working on updating my project from Angular 15 with "openai": "^3.2.1" to Angular 17 with "openai": "^4.24.1". The migration seems to run without throwing any errors, but I’m getting null responses from the API calls.

Previous Implementation (v3)

import { Configuration, OpenAIApi } from 'openai';

const config = new Configuration({
  organization: process.env.ORG_ID,
  apiKey: process.env.API_SECRET,
});

const client = new OpenAIApi(config);

async function fetchResponse(userInput: string): Promise<any> {
  try {
    const result = await client.createCompletion({
      model: "text-davinci-003",
      prompt: userInput,
      temperature: 0.8,
      max_tokens: 100,
    }, {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + process.env.API_SECRET,
        'Access-Control-Allow-Origin': '*'
      }
    });
    
    return result.data.choices[0].text;
  } catch (err) {
    console.error('API call failed', err);
  }
}

Updated Implementation (v4)

import OpenAI from 'openai';

async function createMessage() {
  try {
    let response = await this.client.completions.create({
      model: 'gpt-3.5-turbo-instruct',
      prompt: 'Write a welcome message',
      temperature: 0.7,
    });
    console.log(response);
    console.log(response.choices[0].text);
  } catch (error) {
    console.error('createMessage error => ', error);
  }
}

The API key shows recent usage from January 12th, but I’m only getting null values back. I generated a fresh API key but the issue persists. Has anyone successfully migrated from v3 to v4 and encountered similar problems?

2

Those migration issues are exactly why I ditched manual OpenAI integrations. Version bumps always break something - client setup fails, CORS problems, env variables won’t load.

Had the same nightmare last year across multiple projects. Weeks of debugging null responses and auth failures. Then I realized I was making it way too complicated.

Now I use Latenode for all OpenAI stuff. It handles API calls and auth, no version conflicts or browser headaches. Set up your workflows visually, then call them from Angular with simple HTTP requests.

Best part? When OpenAI updates their SDK, Latenode handles compatibility. No migration pain. You focus on Angular, Latenode handles the AI layer.

Been doing this for months - saved me tons of debugging time. Check it out: https://latenode.com

3

Your this.client is undefined - that’s the main issue. You’re not showing where you instantiate the client, but beyond that, you’re missing the max_tokens parameter in your v4 code. This can mess up response generation.

When I migrated last year, skipping max_tokens gave me incomplete or null responses depending on how complex the prompt was. Add max_tokens: 100 back to your completions.create call.

Also double-check that your environment config loads before you instantiate the OpenAI client. Check your browser’s network tab too - see if the API calls are actually going through and what status codes you’re getting back.

4

you’re missing the client setup in your v4 code. add const client = new OpenAI({ apiKey: process.env.API_SECRET }); before calling completions.create. also double-check that your env variables are actually loading in Angular 17.

5

Had the same problem last month during my migration. You’re probably running this in the browser with Angular instead of Node.js. OpenAI v4 won’t work client-side - CORS restrictions and you can’t expose API keys safely. Move your OpenAI calls to a backend service or set up Angular’s proxy config to route through your server. Good call switching from text-davinci-003 to gpt-3.5-turbo-instruct since the old one’s deprecated, but double-check your response handling - the structure might be slightly different from v3.