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

2023-09-04T19:26:57.000Z

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

not-milo.tsx

2023-09-04T21:08:46.000Z

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.

Ashy Storm-PetrelOP

2023-09-05T12:33:32.000Z

https://i.imgur.com/Yc2MLyE.png

i keep getting different errors with different packages

not-milo.tsx

2023-09-05T12:36:00.000Z

Have you installed those packages?

Try running npm install encoding and see if the error disappears as it should.

Ashy Storm-PetrelOP

2023-09-05T12:52:16.000Z

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

https://i.imgur.com/A31Dfy6.png

when i just import like

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

not-milo.tsx

2023-09-05T12:59:30.000Z

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

2023-09-05T12:59:45.000Z

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

i see thank you for this information!

would this be idle or will it cause problems later?

not-milo.tsx

2023-09-05T13:03:13.000Z

That option does not exist... esmExternal as far as I know is not a thing

Ashy Storm-PetrelOP

2023-09-05T13:03:37.000Z

sorry not from here

here

https://i.imgur.com/C4GAYcY.png

not-milo.tsx

2023-09-05T13:07:18.000Z

You're not getting this error because you didn't import the package, so that won't help you

Ashy Storm-PetrelOP

2023-09-05T13:08:33.000Z

it fixed it somehow

am not getting any errors anymore

not-milo.tsx

2023-09-05T13:12:41.000Z

That's werid as hell

Glad you managed to solve it anyways âœŒï¸

Ashy Storm-PetrelOP

2023-09-05T13:15:01.000Z

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

treeðŸŒ³

2023-09-05T13:19:17.000Z

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

Ashy Storm-PetrelOP

2023-09-05T13:22:57.000Z

and how can i check or test for that?

i tested my code in nodejs and worked perfectly fine

treeðŸŒ³

2023-09-05T13:31:16.000Z

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

2023-09-05T13:56:02.000Z

my code is in the api side

treeðŸŒ³

2023-09-05T14:44:29.000Z

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

Ashy Storm-PetrelOP

2023-09-05T19:14:40.000Z

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

but the error happen as soon as i do

import {google} from "googleapis"

before important it everything was fine