why does errors show in the console when using packages like axios or googleapi or else?
Unanswered
Ashy Storm-Petrel posted this in #help-forum

Ashy Storm-PetrelOP
now the app works on my local server and all but it shows error on the console of the terminal for some reason is that normal or is there a way i can fix it?
44 Replies

What errors are you getting?
You need to provide a little more information, but typically you should try to keep the console free of any kind of errors/warnings.
i keep getting different errors with different packages

Have you installed those packages?
Try running
npm install encoding
and see if the error disappears as it should.
Ashy Storm-PetrelOP
huh i thought stuff like this would be already installed since i got the package
i installed the packages they want and now am getting new error to import the package
when i just import like
it still shows this error
import "supports-color"
it still shows this error

this is the web page they reference
even then i try it it would show the same error

@Ashy Storm-Petrel huh i thought stuff like this would be already installed since i got the package

Not all dependencies are installed automatically... If you use Supabase for example, you'll have to install encoding manually for it to work properly

Ashy Storm-PetrelOP
i just asked the AI in #gpt-help and it provided something that works in the next config i added this
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: { esmExternals: "loose" },
}
module.exports = nextConfig
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: { esmExternals: "loose" },
}
module.exports = nextConfig

@not-milo.tsx Not all dependencies are installed automatically... If you use Supabase for example, you'll have to install encoding manually for it to work properly

Ashy Storm-PetrelOP
i see thank you for this information!

@Ashy Storm-Petrel i just asked the AI in <#1089389297548931182> and it provided something that works in the next config i added this
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: { esmExternals: "loose" },
}
module.exports = nextConfig

Ashy Storm-PetrelOP
would this be idle or will it cause problems later?

@Ashy Storm-Petrel i just asked the AI in <#1089389297548931182> and it provided something that works in the next config i added this
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: { esmExternals: "loose" },
}
module.exports = nextConfig

That option does not exist...
esmExternal
as far as I know is not a thing
You're not getting this error because you didn't import the package, so that won't help you

Ashy Storm-PetrelOP
it fixed it somehow
am not getting any errors anymore

That's werid as hell
Glad you managed to solve it anyways ✌ï¸

Ashy Storm-PetrelOP
Thank you! without your note about installing the package i wouldn't get to that page lol

Wait
I had those same errors myself a few days ago
The packages were already installed. You dont have to touch anything
Its just ur code that it has maybe hydration problems

@tree🌳 Its just ur code that it has maybe hydration problems

Ashy Storm-PetrelOP
and how can i check or test for that?
i tested my code in nodejs and worked perfectly fine

If im honest im not sure. When it happened to me it was because i was calling the models in the component instead of just keeping all the models code in the api side. I was being stupid yea. Also the code was duplicated from my api call so i just deleted some lines and commented a few more and started again
But no packages were needed. I even deleted the node_modules, refreshed everything but nothing helped

Ashy Storm-PetrelOP
my code is in the api side

What does the settings.js look like. And the analytics/route file. Can u send them

@tree🌳 What does the settings.js look like. And the analytics/route file. Can u send them

Ashy Storm-PetrelOP
it's basically all the settings to setup up google apis
import { NextResponse as res } from "next/server"
import Analytics from "@extra/settings"
export async function GET() {
await Analytics()
return res.json(await Analytics("facebook",'google'), { status: 200 })
}
this is api/analytics
import "dotenv/config"
let config = JSON.parse(process.env.CONFIG)
import {google} from "googleapis"
import { BetaAnalyticsDataClient } from "@google-analytics/data"
const auth = new google.auth.GoogleAuth({
credentials: config,
scopes: ["https://www.googleapis.com/auth/analytics.readonly"],
})
const analyticsDataClient = new BetaAnalyticsDataClient({ auth })
export default async function runReport(...query) {
let neededData = []
let socialMedia = []
try {
const [response] = await analyticsDataClient.runReport({
property: "properties/405050966", // Replace with your Measurement ID
dateRanges: [
{
startDate: "30daysAgo",
endDate: "today",
},
],
dimensions: [
{
name: "eventName", // Use "eventName" as the dimension to get event names
},
],
metrics: [
{
name: "eventCount", // Use "eventCount" as the metric to get event counts
},
],
orderBys: [
{
metric: {
metricName: "eventCount",
},
sortOrder: "DESCENDING", // Sort events by event count in descending order
},
],
limit: 10, // Limit the number of events returned (adjust as needed)
})
response.rows.forEach((row) => {
let wanted = row.dimensionValues[0].value
if (wanted === "first_visit") {
neededData.push({
first_visit: row.dimensionValues[0].value,
clicks: row.metricValues[0].value,
})
}
if (wanted === "page_view") {
neededData.push({
page_view: row.dimensionValues[0].value,
clicks: row.metricValues[0].value,
})
}
query.forEach((q) => {
if (wanted === q) {
socialMedia.push({
link: row.dimensionValues[0].value,
clicks: row.metricValues[0].value,
})
}
})
})
neededData.push(socialMedia)
return neededData
} catch (error) {
console.error("Error running report:", error)
}
}
this is settings.js

@tree🌳 What does the settings.js look like. And the analytics/route file. Can u send them

Ashy Storm-PetrelOP
but the error happen as soon as i do
import {google} from "googleapis"
before important it everything was fine