CODEWITHSUNDEEP
reactjsopenai-api
lechnerio
lechnerio

Reputation: 982

TypeError: openai__WEBPACK_IMPORTED_MODULE_1__.OpenAIAPI is not a constructor

I'm trying to recreate an idea using OpenAI Api with react.

I'm using the official OpenAI Documentation here but got stuck and I'm hoping someone is able to help.

The idea is to have an simple text-input and a button on a page. Reciving the user's prompt and sending the information to the OpenAI Api.

OnClick to the button I'm handling everything within the handleSubmit function which looks like this:

const config = new Configuration({
    apiKey: "API_KEY_IS_HERE",
})

const handleSubmit = async (e) => {
    e.preventDefault()
    setState('loading...')
    
    const openai = new OpenAIAPI(config)
    const res = await openai.createImage({
      prompt: prompt,
      n: 1,
      size: "256×256",
    })

    const url = res.data.data[0].url
    console.log(url)
    console.log('clicked: ' + prompt)
}

which clicking the button and calling the function handleSubmit now I'm getting an error

Uncaught TypeError: openai__WEBPACK_IMPORTED_MODULE_1__.OpenAIAPI is not a constructor

besides putting the api key directly into the source code instead of env variables (testing and playing around locally) nothing seems out of the ordernary to me.

Thank you for any input!

edit:

imports:

import { useEffect, useState } from "react"
import { Configuration, OpenAIAPI } from "openai"

versions:

"openai": "^3.1.0"
"react": "^18.2.0"

Upvotes: 0

Views: 3084

Answers (1)

thordoor
thordoor

Reputation: 106

It could be webpack complaining about how openai package is imported. Could you show us the lines of code that import.

Also it seems from a glance at the documentation that it is supposed to be:

OpenAIApi and not OpenAIAPI

Case matters :D

Upvotes: 1

Related Questions