"Failed to resolve module specifier "openai". when using VS code live server?

API
1

Hello everyone, I know I’m doing something painfully obvious wrong but I’ve scoured the net for two days and can’t find a solution. From what I can understand it’s a path issue but I still don’t know how to resolve it.

Here is my JS:

import OpenAI from 'openai'

const openai = new OpenAI({
    apiKey: '123456'
})

console.log(openai.apiKey)

Here is my HTML

<!DOCTYPE html>

<html lang="en">
  <head>
    <script src="index.js" type="module"></script>

    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

And here is a screen shot of what I put in the terminal

Screen Shot 2024-01-14 at 8.31.54 am
Screen Shot 2024-01-14 at 8.31.54 am1920×1080 119 KB

Thanks in advance for any help you can provide!

2

Hi!

Typically when you install a package with npm you should have a node_modules folder and a package.json file, I don’t see either in your project.

I don’t know if the library actually works in the front end - in either case, it’s not a good idea to use it as such. You’ll probably want a node server.

Have you considered asking GPT how to set up a minimal javascript project?

3 Likes
3

Thanks for that! I’ve asked GPT how to set up a minimal javascript project and followed all the steps. It’s working and I can see “hello” logged in the console when I open my index.html file in the browser. However, I’m still getting the same error when I change the code in app.bundle.js to try and import OpenAI for ‘openai’

What is intresting is that i’m getting two different errors, one when i open it with live server " “Failed to resolve module specifier “openai”
Another when I just open the index.html in chrome. “Access to script at ‘file:///Users/admin/my-js-project/app.js’ from origin ‘null’ has been blocked by CORS policy”

Here is a screenshot where you can see both errors. Any ideas? :thinking:

Screen Shot 2024-01-14 at 11.16.56 am
Screen Shot 2024-01-14 at 11.16.56 am1920×992 143 KB

4

yeah the easiest option is probably to launch your html from live preview (it’s an extension by msft)

but maybe try to get your node server to spit a hello world into your terminal, then print your openai result into your console, and then you can start looking into connecting stuff to your front end

If you’re completely new to this it’s not gonna be easy, but with enough tenacity i’m sure you can get there :slight_smile:

1 Like
5

I’m very green, but have a large amount of tenacity!

I have no problem getting it to log Hello World. The problem arises when I try to import OpenAI from ‘openai’. Here is a screenshot of printing Hello World

Screen Shot 2024-01-14 at 11.40.52 am
Screen Shot 2024-01-14 at 11.40.52 am1920×968 138 KB

6

try to get a hello world into the terminal on the right :slight_smile:

Spoiler

package.json → scripts → “run”: “node your_file.js”

openai needs to live on your server, not in your browser

1 Like
7

OMG I did it! Thanks for holding my hand through that! Hopefully this thread helps some other greenies get going :sweat_smile:

Screen Shot 2024-01-14 at 11.58.52 am
Screen Shot 2024-01-14 at 11.58.52 am1920×997 122 KB

2 Likes
8

Hi, I’m having the same issue for a days.

I tried to change the package.json including the “run” but nothing changes

I also tried to locate the import “openai” with a file path instead of only openai,

@Diet or @media6 do you think any of you guys could help me?

dalle3
dalle31920×1255 164 KB

9

Welcome to the community!

It looks like you’re trying to use openai in the frontend, but it’s a node library, am I guessing correctly here?

Ideally you’d call the openai api from your backend, and relay the information to the front end.

PS: that looks like a non-destructive blur on your api-key. I’d recommend regenerating the key before someone extracts it :confused:

1 Like
10

Thank you for your reply, I regenerated the api key.

About th front end, I’m kinda new on it, I’m a Ux designer trying to get a little knowledge about it

This is a class from a coursera course.

I just would like to make it works to follow the course next modules.

Would you have any recommendation for me to try?

It is a simple form to prompt an image with Dall E on front-end.

My .js code that simple gets prompt system/user works fine on console. But this one connecting to html front end don’t.

I appreciate any help
Thank you so much

11

oh man oh jeez :confused:

sorry

I tried to google around a little for a good starting point, but I realize that the field is incredibly confusing because stuff keeps changing.

I’d suggest something like this this:

npm init in a new directory, then:

Node.js — Introduction to Node.js

image
image1108×642 62.2 KB

make sure to click on MJS on the code blocks, it’ll save you a bunch of confusion later

you can call this from your front end.

then, you can insert the OpenAI package/code here, and with the same method, use res.send /res.end to forward what you received from openAI to your front end.

I think that could be a decent starting point :thinking: