How do I resolve this error: "Failed to resolve module specifier 'openai'"?

API
,
1

I’ve been trying to use GPT to generate some original text for me to use in a little web-game I’ve been working on. When a certain text box loads, I wanted it to generate a slightly different but similar bit of text each time.

In VS Code itself, I’ve managed to get the system mostly working. My code for generating it is here:

console.log("Opening generate.mjs")
import OpenAI from './node_modules/openai/index.mjs'

const openai = new OpenAI({
    apiKey: '■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■G0bmhSCG'
});

async function generateArrivalText() {
    const completion = await openai.chat.completions.create({
        model: "gpt-3.5-turbo",
        messages: [{ role: "user", content: `Suggest a short arrival text message for a fleet pulling into new land from the sea. 
        Examples: 
        'The fleet pulls into a small cape, the sun low in the evening sky. Tiny waves lap against the side of the boat.', 
        'The fleet passes around a bend, revealing a new land ahead. The evening sunbeams shatter across the cresting waves.', 
        'The fleet glides along a shoreline of white sand, cliffs framing a beach ahead. Gusts of wind billow in the sails.', 
        'The fleet drops anchor at the base of a shore, its sailors weary after their journey. The sand sparkles under the bright sunlight.'
        `}]
    })
    console.log(completion.choices[0].message.content);
}

generateArrivalText()

export {generateArrivalText}

By running “npm run dev” with this file (generate.mjs) set to dev in my package.json file, I’ve been able to see that it’s generating the text properly. Furthermore, I set up a test.mjs file to make sure my importing the generateArrivalText function was working correctly, and it is - doing “npm run” on the test file with the import calls the function properly. I’m importing the function the same way into my main game file, game.mjs.

However, when I use http-server or push the site to GitHub Pages to test it, the page fails to properly load, and I get the following error in the console:

Uncaught TypeError: Failed to resolve module specifier “openai”. Relative references must start with either “/”, “./”, or “…/”.

I tried to change the import to just “import OpenAI from ‘openai’” which still worked for the npm run but continued to give the same error otherwise.

The stack trace is just to the first line of the html file, game.html:1. Obviously there’s no “openai” reference there, so I assume this is just because the generate.mjs file (which imports openai) is used on the page.

After trying to see if ChatGPT itself could help me with this issue for about 4 hours, with me trying all kinds of different ideas, I’ve still been unable to fix this bug. I have reinstalled openai multiple times, tested in every way I know how, and I still get the bug.

I’m primarily confused why the generate.mjs file works properly when run in VS Code alone (importing everything successfully) but then seems to be the source of an error after I start up the server.

Any help would be amazing!

(Smaller side-issue: how can I use the API on my GitHub Pages website? Is it possible, or no because it always wipes the APIKey when I push?)

2

Welcome to the forum…

I would check your path here when it’s on the server…

2 Likes
3

I quickly threw in the edit to my original post, but I also tried doing just “import OpenAI from ‘openai’” which continued to work when I used npm run but gave the same error on the server.

How would I be able to check that path when it’s on the server?

4

“pwd” works for shell on linux/unix…

Where did you install the openai module on the server? Did you install it on the server? Maybe that’s why it can’t find it? That’s where I’d be looking…

Good luck.

5

import OpenAI from 'openai'; should be what you want.

Can you share your package.json?

On your server, are you running npm install and creating a build, then serving the built JS.

1 Like
6

I’ll switch it back to that, then. Both seem to give the same error, though.

Here’s my package.json:

{
  "name": "lcbmann.github.io",
  "version": "1.0.0",
  "description": "Aeneas is a text-based game based on the story of The Aeneid by Virgil. You play as Aeneas, the captain of the remnant Trojan fleet, and you must make difficult decisions about what to do during difficult scenarios. Eventually, you must decide the land on which the final colony will be built. The better the land and the better you've managed your fleet's resources, the better your civilization will turn out.",
  "main": "game.mjs",
  "type": "module",
  "scripts": {
    "test": "node testimport.mjs",
    "dev": "node generate.mjs"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^16.3.1",
    "express": "^4.18.2",
    "openai": "^4.4.0"
  },
  "devDependencies": {
    "nodemon": "^3.0.1"
  }
}

So, I might be completely misunderstanding how servers work. I did “npm install http-server”, and have just been using that, using the http-server command to run it locally.

This brings up the index homepage of my website properly, but then when I start the game, it doesn’t load the HTML properly and spits out the error.

7

You’ll need to do that for the openai package on the server too… then load as @novaphil suggested. Let us know if you still have problems.

1 Like
8

I did also run npm install openai if that’s what you mean. Again, OpenAI is properly installed, and it works when I run the .mjs file through npm run.

Is there some other way to install the openai package onto the http-server itself?

Thanks for the help!

1 Like
9

Welcome to the community @qaztar

Importing a Default Export

If a module exports a default function or object, you can import it like this:

import openai from 'openai';

Importing Named Exports

If a module has named exports, you can import specific functions or objects like this:

import { function1, function2 } from 'openai';

Importing Everything

If you want to import everything from a module and use them as properties of an object, you can do this:

import * as openai from 'openai';
10

Hey, so just to clarify, the import OpenAI from 'openai' works perfectly well at least in the code itself, in that I can use npm run to test my generate.mjs file and the function therein and it works properly. I only see this error when I try to run my code on the server itself and open the site.

11

What’s your server set-up?

Again, it sounds like it’s not finding the openai library … are you sure your path is correct?

12

So… again I feel like I’m missing something important here. All I’m doing to test my website is running the http-server command. So there isn’t really a “server setup” exactly, I think?

And I’ve tinkered around with the openai path a bunch of times, but it seems strange that the program would work in one context but not the other if the path itself was just wrong.

13

Do you have a server or are you trying to run from a local server?

Windows? Linux? Mac?

Well, locally it sounds like it’s finding the library but when you deploy to your server, it’s not finding it.

You’re running this locally?

14

Yep just running it locally, I don’t have any separate server. Just on Windows.

15

Ahhh… progress! :wink:

Okay, it still seems like the same problem.

When you installed the openai library via VSC and npm, it prob installed it locally to that visual studio code instance… and when you try to run it from the “webserver” locally, it can’t find the files.

I would search for them on your hard-drive and then add where they really are… As initially stated, it’s a paths issue…

16

Hmm. The OpenAI module is just in the same directory. How else could I check for this?

17

Same directory as what?

If you know the directory, you should be able to type it in and load it?

18

Did you ever resolve this? I am trying to play with the OpenAi API as well and I keep getting this same err message… I am using the live server on my vscode I imported the openai npm package it’s in my json file and it’s still giving me this error.