The solutions for major 4 Issues (#57, #56, #54 and # 59)

hurabono commented 9 months ago

Hi there! I am a one of code lover who usually enjoys the JSM project and I also faced several issues exactly the same as the people who reported issue categories. I organized some solutions for errors, I spent lots of time for solving these errors, so do not give up!

1. SyntaxError: Unexpected token 'I', "Incorrect "... is not valid JSON

I had not seen this error before, but after the git push, I tried to delete code files and git clone again. when I did npm run dev for the client side and npm starts for the server side, it worked well but when I generated an image, this SyntaxError: Unexpected token 'I', "Incorrect "... is not valid JSON occurred. I asked why. but I realized I did not set the env file again. ( .env file is not uploaded in GitHub )

This is the checklist for SyntaxError: Unexpected token 'I', "Incorrect "... is not valid JSON error.

[ ] Please check your Open AI API key in the .env file. it might be your API key problem. Please copy and paste clearly.

[ ] If you enter the API key correctly, and this error shows you up, you should check your spelling. I made spelling mistakes a lot, so It made me more confused. Please check the English spelling again;

[ ] If you did the above, but still those error shows up again please make a new open ai API key.

2. TypeError: Failed to fetch

I faced this error for the first time. here is a serious non-sense error. some people are working but unfortunately, I was not working either like some others. This is an open AI API problem in my opinion. I spent lots of time to solve this. How did I solve this problem? Please check the list below.

This is the checklist for TypeError: Failed to fetch
[ ] Please go to package.json server-side folder.
[ ] You can see
"dependencies": {
"cloudinary": "^1.41.0",
"cors": "^2.8.5",
"dotenv": "^16.3.1",
"express": "^4.18.2",
"mongoose": "^8.0.0",
"nodemon": "^3.0.1",
"openai": "^4.15.4"
}
[ ] I will do openai version down. Please change"openai": "^4.15.4" -> "openai": "^3.1.0"
[ ] You might face the error for Configuration SyntaxError in this class before. Please check your dalleRoutes.js Did you change the code?
import { Configuration, OpenAIApi } from "openai";`
const configuration = new Configuration({
apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);`
to This new code?
import OpenAI from 'openai';
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
});`
[ ] If you replace the new code, Please change the old code again in dalleRoutes.js.

[ ] when you change the server-side code package.json and dalleRoutes.js You can go to next step.

[ ] Please go to your terminal and go to server side directory and npm install again

[ ] Please do npm start again

[ ] click generate image and If you face different error again lets head to next step.

3. Unexpected token 'B', "Billing yes"... is not valid JSON

I faced this error again after Fetch errors. It was kind of brain pain but pretty simple to solve it. This is the billing problem. Usually, openai offers us 18 dollars credit but Please check your data usage to visit this site. https://platform.openai.com/account/usage

If the credit is expired, used all, or do not have enough credit for API, you have to pay a minimum of 5 dollars or make a new account. and please try again after setting payments.

4. A 500 Internal error shows up when I generate a post and try to add it to the home page.

I had been suffering from this error for 2 days but finally, I found this problem. I thought it was also an API problem but it was my problem too. You can head to home.jsx and move the RenderCard function to inside the Home function.

Here is an example.

Before


const RenderCard = ({ data, title }) => {
if (data?.length > 0) {
  return data.map((post) => <Card key={post._id} {...post} />);
}

return (
  <h2 className="mt-5 font-bold text-[#6449ff] text-xl uppercase">
    {title}
  </h2>
);
};

const Home = () => { //codes

}

export default Home;


- After

const Home = () => { const RenderCard = ({ data, title }) => { if (data?.length > 0) { return data.map((post) => <Card key={post._id} {...post} />); }

return (
  <h2 className="mt-5 font-bold text-[#6449ff] text-xl uppercase">
    {title}
  </h2>
);

}; };

export default Home;

soumyaranjanjena123 commented 9 months ago

SyntaxError: Unexpected token 'I', "Incorrect "... is not valid JSON

I have created a new API key and also checked the typo , after that it show the same error.
billing hard limit has been reached (http status code 400) I have created a new account but it still show this error code on console

hurabono commented 8 months ago

SyntaxError: Unexpected token 'I', "Incorrect "... is not valid JSON

I have created a new API key and also checked the typo , after that it show the same error.

billing hard limit has been reached (http status code 400) I have created a new account but it still show this error code on console

Hello! I am not sure what happened to you, because I have to see your server-side code file. It happens usually in server side

Please check my repository and compare your code, It will be a good study.

https://github.com/hurabono/img-generator

cheers,

adrianhajdin / project_ai_mern_image_generation