next.config.js needs to manually reloaded

Unanswered

Munchkin posted this in #help-forum

Original message was deleted.

135 Replies

Munchkin

2024-01-11T15:02:01.000Z

 â¨¯ Internal error: TypeError: e._formData.get is not a function
    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

Ray

2024-01-11T16:32:25.000Z

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

Munchkin

2024-01-11T16:45:36.000Z

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

Ray

2024-01-11T16:46:21.000Z

that's odd, it shouldn't be resetted

Munchkin

2024-01-11T16:48:55.000Z

thing is, there are no changes made.

Ray

2024-01-12T12:02:33.000Z

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

Munchkin

2024-01-12T12:16:41.000Z

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

Ray

2024-01-12T12:17:03.000Z

yes change the export like this

Munchkin

2024-01-12T12:17:04.000Z

also, could this be an issue?

Ray

2024-01-12T12:17:17.000Z

export default nextConfig

Munchkin

2024-01-12T12:17:41.000Z

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.

Ray

2024-01-12T12:20:20.000Z

Munchkin

2024-01-12T12:21:06.000Z

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

Ray

2024-01-12T12:21:44.000Z

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

btw, metadata doesn't work in client component

Munchkin

2024-01-12T12:22:25.000Z

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

odd cause it does..

Ray

2024-01-12T12:22:59.000Z

what do you mean when you route to the page?

Munchkin

2024-01-12T12:23:19.000Z

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

Ray

2024-01-12T12:23:38.000Z

that shouldn't need to restart the server

Munchkin

2024-01-12T12:24:13.000Z

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

Ray

2024-01-12T12:25:00.000Z

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

Munchkin

2024-01-12T12:26:21.000Z

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

Ray

2024-01-12T12:27:21.000Z

what erro you get?

Munchkin

2024-01-12T12:28:05.000Z

â¨¯ Internal error: TypeError: e._formData.get is not a function
    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

Ray

2024-01-12T12:28:41.000Z

do you still get this error?

Im a little lost

Munchkin

2024-01-12T12:32:07.000Z

Ok so let me explain from the beginning.

Last week i got this error and you told me to add this:

 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.

Ray

2024-01-12T12:38:52.000Z

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

Munchkin

2024-01-12T22:21:01.000Z

ofcourse. its:

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:

Ray

2024-01-13T11:19:43.000Z

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

Ray

2024-01-13T11:33:15.000Z

// 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

Munchkin

2024-01-13T11:42:01.000Z

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

Munchkin

2024-01-13T11:52:40.000Z

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

Ray

2024-01-13T11:53:25.000Z

try this

I had to comment out metadata

Munchkin

2024-01-13T11:56:59.000Z

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

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

Ray

2024-01-13T12:02:53.000Z

could you show the code on the filter

Munchkin

2024-01-13T12:05:22.000Z

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

Ray

2024-01-13T12:06:09.000Z

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

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

Munchkin

2024-01-13T12:06:43.000Z

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

Ray

2024-01-13T12:07:58.000Z

what is inside ./Database.ts?

Munchkin

2024-01-13T12:08:55.000Z

that is where i make the call to the server

although its Database.jsx

Ray

2024-01-13T12:15:37.000Z

oh yeah I got error when using GetServerSpells in client component

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

Munchkin

2024-01-13T13:13:17.000Z

got it illt ry that again

Munchkin

2024-01-13T14:39:53.000Z

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?

Ray

2024-01-13T14:42:19.000Z

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

Munchkin

2024-01-13T14:53:58.000Z

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

Ray

2024-01-13T14:59:30.000Z

is it on private?

I got 404

Munchkin

2024-01-13T15:00:00.000Z

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

its public now

Ray

2024-01-13T15:07:12.000Z

once I add this and no longer get the error

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

export default nextConfig;

Munchkin

2024-01-13T15:07:59.000Z

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

Munchkin

2024-01-13T15:14:57.000Z

Could it be a caching issue?

Ray

2024-01-13T15:53:10.000Z

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

Munchkin

2024-01-13T15:56:25.000Z

I have not had to set any permissions

Ray

2024-01-13T16:36:44.000Z

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

Munchkin

2024-01-13T18:18:21.000Z

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

Ray

2024-01-13T18:20:00.000Z

wdym?

Munchkin

2024-01-13T18:22:54.000Z

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

Ray

2024-01-13T18:23:50.000Z

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

Munchkin

2024-01-13T18:40:49.000Z

Do i have to reset my endpoint and keys?

I cloned your project and i think i need to set these again:

  .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

Ray

2024-01-13T18:41:55.000Z

just use your key is fine

and change the database id and collection id to yours

Munchkin

2024-01-13T18:42:24.000Z

alright

Ray

2024-01-13T18:43:09.000Z

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

with this attributes

Munchkin

2024-01-13T18:43:40.000Z

alright let me take that over then

Munchkin

2024-01-13T19:04:10.000Z

Well that seems to have worked

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

Ray

2024-01-13T19:10:46.000Z

check characterpage page

Munchkin

2024-01-13T19:17:29.000Z

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.

Ray

2024-01-13T19:19:15.000Z

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

Munchkin

2024-01-13T19:19:56.000Z

Yeah so ill try to fix that first.

Munchkin

2024-01-13T20:03:17.000Z

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

Ray

2024-01-13T20:04:44.000Z

what have you changed?

Munchkin

2024-01-13T20:05:38.000Z

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

Ray

2024-01-13T20:06:36.000Z

could you show the code on what you changed?

Munchkin

2024-01-13T20:07:07.000Z

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;
}

Ray

2024-01-13T20:09:37.000Z

ok let me try in a bit

Munchkin

2024-01-13T20:10:03.000Z

take your time, Its getting late after all

Ray

2024-01-13T20:25:26.000Z

it works for me

Munchkin

2024-01-13T20:25:53.000Z

my repo works for you???

Ray

2024-01-13T20:25:58.000Z

what error do you get

I copy your code on characterpage page to my repo

Munchkin

2024-01-13T20:26:43.000Z

Error: e._formData.get is not a function

Ray

2024-01-13T20:27:00.000Z

try remove node_modules and .next

then install again

you forgot to import revalidatePath on GetServerSpells btw

Munchkin

2024-01-13T20:33:45.000Z

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

Munchkin

2024-01-13T20:46:20.000Z

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

Ray

2024-01-13T20:47:34.000Z

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

Munchkin

2024-01-13T20:48:42.000Z

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

Ray

2024-01-13T20:51:46.000Z

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

Munchkin

2024-01-13T20:58:34.000Z

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

Ray

2024-01-13T20:58:37.000Z

you can try with it

Munchkin

2024-01-13T21:06:32.000Z

ill try my luck with appwrite for now.