next.config.js needs to manually reloaded

[flat lantern]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[fresh fractal]

    at tn (C:\Users\Administrator\Desktop\NextJSTryOut\dnd-charactersheet\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:303107)
    at t.decodeReply (C:\Users\Administrator\Desktop\NextJSTryOut\dnd-charactersheet\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:306681)
    at C:\Users\Administrator\Desktop\NextJSTryOut\dnd-charactersheet\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:284
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async t0 (C:\Users\Administrator\Desktop\NextJSTryOut\dnd-charactersheet\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:38:5773)
    at async rh (C:\Users\Administrator\Desktop\NextJSTryOut\dnd-charactersheet\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:23636)
    at async doRender (C:\Users\Administrator\Desktop\NextJSTryOut\dnd-charactersheet\node_modules\next\dist\server\base-server.js:1391:30)
    at async cacheEntry.responseCache.get.routeKind (C:\Users\Administrator\Desktop\NextJSTryOut\dnd-charactersheet\node_modules\next\dist\server\base-server.js:1552:28)
    at async DevServer.renderToResponseWithComponentsImpl (C:\Users\Administrator\Desktop\NextJSTryOut\dnd-charactersheet\node_modules\next\dist\server\base-server.js:1460:28)
    at async DevServer.renderPageComponent (C:\Users\Administrator\Desktop\NextJSTryOut\dnd-charactersheet\node_modules\next\dist\server\base-server.js:1843:24)
    at async DevServer.renderToResponseImpl ```

[leaden gale]

Hi, what do you mean by next.config.js needs to manually reloaded?

[fresh fractal]

Everytime i start up my project i need to manually save my next.config.js file. Autosave on vscode doesnt work either.

[leaden gale]

that's odd, it shouldn't be resetted

[fresh fractal]

thing is, there are no changes made.

[leaden gale]

maybe try changing next.config.js to next.config.mjs

// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
      serverComponentsExternalPackages: ['node-appwrite'],
    },
  }
   
export default nextConfig

[fresh fractal]

doing this will result in: ```file:///C:/Users/Administrator/Desktop/NextJSTryOut/dnd-charactersheet/next.config.mjs:8
module.exports = nextConfig
^

ReferenceError: module is not defined in ES module scope
at file:///C:/Users/Administrator/Desktop/NextJSTryOut/dnd-charactersheet/next.config.mjs:8:3
at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
at async importModuleDynamicallyWrapper (node:internal/vm/module:430:15)
at async loadConfig (C:\Users\Administrator\Desktop\NextJSTryOut\dnd-charactersheet\node_modules\next\dist\server\config.js:698:36)
at async nextDev (C:\Users\Administrator\Desktop\NextJSTryOut\dnd-charactersheet\node_modules\next\dist\cli\next-dev.js:190:14)
at async main (C:\Users\Administrator\Desktop\NextJSTryOut\dnd-charactersheet\node_modules\next\dist\bin\next:157:5)

Node.js v21.2.0```

i am using javascript and not typescript if that helps

[leaden gale]

yes change the export like this

[fresh fractal]

also, could this be an issue?

[leaden gale]

export default nextConfig

[fresh fractal]

Yeah i adjusted it

it seems to run for now but ill leave the ticket open so i can test a bit more

Yeah i seem to be running into the same issue.

It seems that i have to resave the file after i have logged in and the page has been rerouted from the login page.

[leaden gale]

log in on your site?

[fresh fractal]

https://pastebin.com/sDa6ST3J

Yeah I have a login webpage that redirects to the main page. Then on the main page i try to fetch from DB where i get the error. Then when i resave my next.config.js it does fetch from DB

[leaden gale]

yes because when you make change on next.config.js the server will restart

[leaden gale]

btw, metadata doesn't work in client component

[fresh fractal]

Yeah so basicly i have to restart the server when i route to the page?? or am i just being dumb atm?

[fresh fractal]

odd cause it does..

[leaden gale]

what do you mean when you route to the page?

[fresh fractal]

I mean when i redirect from login to my main page.

[leaden gale]

that shouldn't need to restart the server

[fresh fractal]

hmm.. Then why do i have to restart the server to make my script be able to fetch from db?

[leaden gale]

no, I meant when the next dev server detected you have made change on next.config.js. Then it will restart itself

so your page might refetch and you might see it fetch from DB

[fresh fractal]

OK, but i have it written so if i adjust one of my filters for the db to refetch again. However i still get the error.

and it is untill the dev server is restarted with that page open untill i can actually fetch

[leaden gale]

what erro you get?

[fresh fractal]

    at tn (C:\Users\Administrator\Desktop\NextJSTryOut\dnd-charactersheet\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:303107)
    at t.decodeReply (C:\Users\Administrator\Desktop\NextJSTryOut\dnd-charactersheet\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:306681)
    at C:\Users\Administrator\Desktop\NextJSTryOut\dnd-charactersheet\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:284
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async t0 (C:\Users\Administrator\Desktop\NextJSTryOut\dnd-charactersheet\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:38:5773)
    at async rh (C:\Users\Administrator\Desktop\NextJSTryOut\dnd-charactersheet\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:23636)
    at async doRender (C:\Users\Administrator\Desktop\NextJSTryOut\dnd-charactersheet\node_modules\next\dist\server\base-server.js:1391:30)
    at async cacheEntry.responseCache.get.routeKind (C:\Users\Administrator\Desktop\NextJSTryOut\dnd-charactersheet\node_modules\next\dist\server\base-server.js:1552:28)
    at async DevServer.renderToResponseWithComponentsImpl (C:\Users\Administrator\Desktop\NextJSTryOut\dnd-charactersheet\node_modules\next\dist\server\base-server.js:1460:28)
    at async DevServer.renderPageComponent (C:\Users\Administrator\Desktop\NextJSTryOut\dnd-charactersheet\node_modules\next\dist\server\base-server.js:1843:24)
    at async DevServer.renderToResponseImpl (C:\Users\Administrator\Desktop\NextJSTryOut\dnd-charactersheet\node_modules\next\dist\server\base-server.js:1881:32)
    at async DevServer.pipeImpl (C:\Users\Administrator\Desktop\NextJSTryOut\dnd-charactersheet\node_modules\next\dist\server\base-server.js:909:25)
    at async NextNodeServer.handleCatchallRenderRequest ```

You helped me with this issue before my changing my next.config.js to add node-appwrite

[leaden gale]

do you still get this error?

Im a little lost

[fresh fractal]

Ok so let me explain from the beginning.

Last week i got this error and you told me to add this: ```js
experimental: {
serverComponentsExternalPackages: ['node-appwrite'],
},

to my next.config.js file. 

that fixed the issue of the e._formData not a function.

However, when i redirect from login to my main page. I get this error back UNTIL i save the next.config.js file manually. (restart the dev server) while being on the page i try to fetch.

Now i have code written so that if i adjust a filter it should fetch from the server. so i doubt this has to do with the actual code not written correctly because when i restart the dev server and save the config file. the fetch does return my DB.

[leaden gale]

oh ok, could you show the code on @/utils/appwrite

[fresh fractal]

ofcourse. its: ```jsx

import {Client, Account} from "appwrite"

const client = new Client();

client
.setEndpoint(process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT)
.setProject(process.env.NEXT_PUBLIC_PROJECT_ID)
export let account = new Account(client);
export {ID} from 'appwrite'

Sorry for the late reply i didnt get a ping when you answered

this gets used by:

[leaden gale]

I just test appwrite and it works without setting serverComponentsExternalPackages in next.config.js

// lib/data/ts
import "server-only";

import { Query } from "node-appwrite";
import { DB } from "./appwrite.server";

export async function GetServerProducts() {
  const queryOptions = [Query.limit(850)];

  return DB.listDocuments("discord", "products", queryOptions);
}

// lib/action.ts
"use server";

import { revalidatePath } from "next/cache";
import { DB } from "./appwrite.server";
import { ID } from "node-appwrite";

export async function CreateProduct(formData: FormData) {
  const data = {
    name: formData.get("name") as string,
    price: parseInt(formData.get("price") as string),
  };
  const product = await DB.createDocument(
    "discord",
    "products",
    ID.unique(),
    data,
    []
  );

  revalidatePath("/");
  return product;
}

// lib/appwrite.server.ts
import "server-only";

import sdk, { Databases } from "node-appwrite";

export const client = new sdk.Client();

client
  .setEndpoint("https://cloud.appwrite.io/v1")
  .setProject(`${process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID}`)
  .setKey(process.env.APPWRITE_API_KEY as string) // Your secret API key
  .setSelfSigned(); // Replace with your project ID

export const DB = new Databases(client);

// lib/appwrite.ts
import { Client, Account } from "appwrite";

export const client = new Client();

client
  .setEndpoint("https://cloud.appwrite.io/v1")
  .setProject(`${process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID}`);

export const account = new Account(client);
export { ID } from "appwrite";

// app/page.tsx
import { CreateProduct } from "@/lib/action";
import { GetServerProducts } from "@/lib/data";

export default async function Home() {
  const products = await GetServerProducts();
  return (
    <main className="flex min-h-screen flex-col p-24">
      {JSON.stringify(products, null, 2)}

      <form action={CreateProduct} className="mt-12">
        <input type="text" name="name" placeholder="name" />
        <input type="number" name="price" placeholder="price" />
        <button>Submit</button>
      </form>
    </main>
  );
}

also I use the code in your login page and it doesn't cause any error

[fresh fractal]

Alright thank you, let me see if i can recreate this

[fresh fractal]

I have tried to apply your code to mine but I still get the server error. That being said I did remove next.config.js part where it add node-appwrite to experimental

[leaden gale]

login/page.tsx

try this

I had to comment out metadata

[fresh fractal]

btw, my code is written in JS. but ill try to take it over as narrowly as possible

[fresh fractal]

From what i can see is our code is mostly identical. Login page works without issue. However when i try to adjust a filter on my i get the error

[leaden gale]

could you show the code on the filter

[fresh fractal]

This is the script that gets the callback from the filter and uses that callback to add to a list, when that list is being updated. It makes a fetch to the server

[leaden gale]

I think the problem is you are importing GetServerSpells in a client component

[leaden gale]

as you can see, Im using server-only here to prevent this

[fresh fractal]

i mean maybe, but i need to in this case cause useState is client only

[leaden gale]

what is inside ./Database.ts?

[fresh fractal]

that is where i make the call to the server

although its Database.jsx

[leaden gale]

oh yeah I got error when using GetServerSpells in client component

I have to add back serverComponentsExternalPackages: ["node-appwrite"],

[fresh fractal]

got it illt ry that again

[fresh fractal]

That doesnt seem to work either. We go back the original issue of this post.

from what i think is that its trying to make a connection before the page might be properly loaded. Could that be the case?

[leaden gale]

could you share a repo?

or have you remove the metadata on the client component?

the app doesn't run when there is metadata exported in the client component on my side

[fresh fractal]

I have removed it and put it into a server side component.

il share a repo

https://github.com/xmaniaxz/dnd-charactersheet

this should have the latest update

[leaden gale]

is it on private?

I got 404

[fresh fractal]

I see, Somehow it got turned to private again. It was a public repo.

[fresh fractal]

its public now

[leaden gale]

once I add this and no longer get the error

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: ["node-appwrite"],
  },
};

export default nextConfig;

[fresh fractal]

that might be because you reload the server when you are on the page.

try adding it. Then kill the server and then try to load the server back up and go throught the login page to the sheet page.

thats how the problem persists for me

Could it be a caching issue?

[leaden gale]

Error: The current user is not authorized to perform the requested action.
how do you grant permission to user?

I have already set these

oh nevermind, added any fixed it lol

[fresh fractal]

I have not had to set any permissions

[leaden gale]

try comment out this line
import { SendToDB, ClearDB, GetListCount } from "@/utils/JsonToDataBase";
on pages/characterpage.jsx

I think it is because you are creating multiple Client from node-appwrite on multiple place

[fresh fractal]

didnt fix the issue. im afraid. they seem to be isolated from each other

I think it might be impossible to ask something from the server as a client

[leaden gale]

wdym?

[fresh fractal]

hmm. ill try to reference between what you have and wht i got

[leaden gale]

could you try to setup appwrite with the structure in my repo?

[fresh fractal]

Do i have to reset my endpoint and keys?

I cloned your project and i think i need to set these again: ```tsx
.setEndpoint("https://cloud.appwrite.io/v1")
.setProject(${process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID})
.setKey(process.env.APPWRITE_API_KEY as string) // Your secret API key

[leaden gale]

just use your key is fine

and change the database id and collection id to yours

[fresh fractal]

alright

[leaden gale]

if you want to test the function, create a products collection

[leaden gale]

with this attributes

[fresh fractal]

alright let me take that over then

[fresh fractal]

Well that seems to have worked

But if am not mistaken this is from Server to Server.

[leaden gale]

check characterpage page

[fresh fractal]

i'm stumped.

Maybe i need to rearrange my code a bit at make sure its readable. Ill try dividing it into more components to dive deeper in on this.

[leaden gale]

yeah, like i said, you are creating new client in multiple place

[fresh fractal]

Yeah so ill try to fix that first.

[fresh fractal]

I ave adjust my code to your. Unfortunately it still doesnt seem to work on my end.

[leaden gale]

what have you changed?

[fresh fractal]

I put my Client component into a different file as you have, then i made small adjustments so it could call to my DB. then in my bottomcontainer component where i try to call from client. I tried to fetch the DB

[leaden gale]

could you show the code on what you changed?

[fresh fractal]

Yeah i already send it to my repo

//appwrite.server.js

// "use server"
import "server-only"

import sdk, { Databases } from "node-appwrite";

export const client = new sdk.Client();

client
  .setEndpoint(`${process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT}`)
  .setProject(`${process.env.NEXT_PUBLIC_PROJECT_ID}`)
  .setKey(`${process.env.NEXT_PUBLIC_API_KEY}`) // Your secret API key
  .setSelfSigned(); // Replace with your project ID

export const DB = new Databases(client);

//BottomBarContainer.jsx

"use client";
import { useState, useEffect } from "react";
import { GetServerSpells, SortSpells } from "./Database";
import Filter from "./Filter";
import SpellButton from "./Spellbutton";

export default function BottomContainer() {
  const [data, setData] = useState();
  const [spellData, setSpellData] = useState([]);
  const [isLoadingSpellData, setLoadingSpellData] = useState(true);
  const [activeFilters, setActiveFilters] = useState([]);
  const [activePage, setActivePage] = useState("");

  useEffect(() => {
    FetchData().then(setData);
    console.log(data);
  }, [activeFilters]);

  const FetchData = async () => {
    var promise = await GetServerSpells(activeFilters);
    return promise;
  };

//Database.jsx

'use server'
import {DB} from "@/utils/appwrite.server"
import {Query} from "node-appwrite"

export async function GetServerSpells(activeFilters) {
  // console.log('Got filters:', activeFilters);
  const queryOptions = [
    Query.limit(850)
  ];

  // Include active filters in the query
  activeFilters.forEach((filter) => {
      queryOptions.push(Query.equal(filter[0],filter[1]));
  });

  console.log("Got a fetch request");
  const x = await DB.listDocuments(
    process.env.NEXT_PUBLIC_DATABASE_ID,
    process.env.NEXT_PUBLIC_COLLECTION_SPELL_ID,
    queryOptions
  );

  revalidatePath("/characterpage");
  return x;
}

[leaden gale]

ok let me try in a bit

[fresh fractal]

take your time, Its getting late after all

[leaden gale]

it works for me

[fresh fractal]

my repo works for you???

[leaden gale]

what error do you get

I copy your code on characterpage page to my repo

[fresh fractal]

Error: e._formData.get is not a function

[leaden gale]

try remove node_modules and .next

then install again

you forgot to import revalidatePath on GetServerSpells btw

[fresh fractal]

gotcha let me do that

hmm i still get the same error.
I think the only difference we have is that you are using Typescript and i am using javascript

[fresh fractal]

more testing tells me that it automatically throws this error when i even try to call GetServerSpells. Cause i get the error even when i return an empty array

[leaden gale]

yeah no idea, you may want to open an issue on node-appwrite

[fresh fractal]

I did before i came to this server and they told me it was a nextJS issue. Which i agree with. Cause even when i do this

export async function GetServerSpells(activeFilters) {
  console.log("Got a fetch request");
  revalidatePath("/characterpage");
  return [];
}

I get the error in return

it doesnt even reach the log

[leaden gale]

Error: e._formData.get is not a function this error should be cause by one of the package that node-appwrite use

https://www.npmjs.com/package/form-data

https://github.com/appwrite/sdk-for-node/blob/3e4e6ce7b1227be7ba7938b188a37df63cc24e4c/package.json#L18

not sure why it happen with you repo while mine doesn't have error

btw, I have push the code to my repo

[fresh fractal]

thank you i will reference it once again to see if there is a difference betweeen the 2

[leaden gale]

you can try with it