[Answered] Process.env.API_KEY return undefined when it should be ran server-side not client side
Answered
Hunting wasp posted this in #help-forum
Hunting waspOP
I am using app router
The first pic is the main Index.tsx, by clicking the button in the navbar, it will trigger the function. This page is set to 'use client'
The second pic is the function that gets triggers, it's a .ts file in the utils folder
The third and forth pics are the configuration/ initiation for Openai and pinecone
The main issue I am running into is that I think all the code ended up getting wrap into webpack, so the env value ended up returning undefined as it should.
I am still new to programming, so I am not too sure what I needed to do to make sure that section are kept on the server side.
The first pic is the main Index.tsx, by clicking the button in the navbar, it will trigger the function. This page is set to 'use client'
The second pic is the function that gets triggers, it's a .ts file in the utils folder
The third and forth pics are the configuration/ initiation for Openai and pinecone
The main issue I am running into is that I think all the code ended up getting wrap into webpack, so the env value ended up returning undefined as it should.
I am still new to programming, so I am not too sure what I needed to do to make sure that section are kept on the server side.
Answered by Jumbo flying squid
I'm fairly new to Next.js but do you have "use server" at the top of the file containing getPineconeByEmbedding? If not try that
16 Replies
Jumbo flying squid
I'm fairly new to Next.js but do you have "use server" at the top of the file containing getPineconeByEmbedding? If not try that
Answer
Hunting waspOP
I thought 'use server' are only for server actions
Jumbo flying squid
I mean, isn't that what you want, to run an action on the server from the client?
I don't think you can run code on the server from the client without using a server action/route handler. I may be wrong though
Hunting waspOP
For some reason I though server action are only for data fetching. I just tried, it didn't error out!
But it also didn't console log anything lol
@Hunting wasp For some reason I though server action are only for data fetching. I just tried, it didn't error out!
Jumbo flying squid
Nope! You can use them for anything you want to offload from the client to the server as far as I'm aware
@Hunting wasp But it also didn't console log anything lol
Jumbo flying squid
Check the output in the terminal where you're running the dev server, because it's running on the server now it will log on the server's console not the browsers
Hunting waspOP
Yup
I just added console.log to the function call
it's logging on browser now and without my api key inside webpack!
Thank you so much!
Jumbo flying squid
No problem, good luck with your future coding adventures!
Hunting waspOP
man, 9 characters costed me 4 hours hahaha
@Jumbo flying squid No problem, good luck with your future coding adventures!
Hunting waspOP
Will do!
@Hunting wasp man, 9 characters costed me 4 hours hahaha
Jumbo flying squid
LOL, get used to it. There'll be many more scenarios like that.