Next.js Discord

Discord Forum

next.config.js needs to manually reloaded

Unanswered
Munchkin posted this in #help-forum
Open in Discord
Original message was deleted.

135 Replies

Avatar
Munchkin
 ⨯ 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 
Avatar
Hi, what do you mean by next.config.js needs to manually reloaded?
Avatar
Munchkin
Everytime i start up my project i need to manually save my next.config.js file. Autosave on vscode doesnt work either.
Avatar
that's odd, it shouldn't be resetted
Avatar
Munchkin
thing is, there are no changes made.
Avatar
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
Avatar
Munchkin
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
Avatar
yes change the export like this
Avatar
Munchkin
also, could this be an issue?
Image
Avatar
export default nextConfig
Avatar
Munchkin
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.
Avatar
log in on your site?
Avatar
Munchkin
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
Avatar
yes because when you make change on next.config.js the server will restart
btw, metadata doesn't work in client component
Avatar
Munchkin
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..
Avatar
what do you mean when you route to the page?
Avatar
Munchkin
I mean when i redirect from login to my main page.
Avatar
that shouldn't need to restart the server
Avatar
Munchkin
hmm.. Then why do i have to restart the server to make my script be able to fetch from db?
Avatar
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
Avatar
Munchkin
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
Avatar
what erro you get?
Avatar
Munchkin
⨯ 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
Avatar
do you still get this error?
Im a little lost
Avatar
Munchkin
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.
Avatar
oh ok, could you show the code on @/utils/appwrite
Avatar
Munchkin
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:
Image
Avatar
I just test appwrite and it works without setting serverComponentsExternalPackages in next.config.js
Avatar
// 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
Avatar
Munchkin
Alright thank you, let me see if i can recreate this
Avatar
Munchkin
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
Avatar
login/page.tsx
Image
try this
I had to comment out metadata
Avatar
Munchkin
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
Avatar
could you show the code on the filter
Avatar
Munchkin
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
Image
Avatar
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
Avatar
Munchkin
i mean maybe, but i need to in this case cause useState is client only
Avatar
what is inside ./Database.ts?
Avatar
Munchkin
Image
that is where i make the call to the server
although its Database.jsx
Avatar
oh yeah I got error when using GetServerSpells in client component
I have to add back serverComponentsExternalPackages: ["node-appwrite"],
Avatar
Munchkin
got it illt ry that again
Avatar
Munchkin
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?
Avatar
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
Avatar
Munchkin
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
Avatar
is it on private?
I got 404
Avatar
Munchkin
I see, Somehow it got turned to private again. It was a public repo.
its public now
Avatar
once I add this and no longer get the error
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: ["node-appwrite"],
  },
};

export default nextConfig;
Avatar
Munchkin
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
Avatar
Munchkin
Could it be a caching issue?
Avatar
Error: The current user is not authorized to perform the requested action.
how do you grant permission to user?
I have already set these
Image
oh nevermind, added any fixed it lol
Avatar
Munchkin
I have not had to set any permissions
Avatar
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
Avatar
Munchkin
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
Avatar
wdym?
Avatar
Munchkin
hmm. ill try to reference between what you have and wht i got
Avatar
could you try to setup appwrite with the structure in my repo?
Avatar
Munchkin
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
Avatar
just use your key is fine
and change the database id and collection id to yours
Avatar
Munchkin
alright
Avatar
if you want to test the function, create a products collection
with this attributes
Image
Avatar
Munchkin
alright let me take that over then
Avatar
Munchkin
Well that seems to have worked
But if am not mistaken this is from Server to Server.
Avatar
check characterpage page
Avatar
Munchkin
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.
Avatar
yeah, like i said, you are creating new client in multiple place
Avatar
Munchkin
Yeah so ill try to fix that first.
Avatar
Munchkin
I ave adjust my code to your. Unfortunately it still doesnt seem to work on my end.
Avatar
what have you changed?
Avatar
Munchkin
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
Avatar
could you show the code on what you changed?
Avatar
Munchkin
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;
}
Avatar
ok let me try in a bit
Avatar
Munchkin
take your time, Its getting late after all
Avatar
it works for me
Avatar
Munchkin
my repo works for you???
Avatar
what error do you get
I copy your code on characterpage page to my repo
Avatar
Munchkin
Error: e._formData.get is not a function
Avatar
try remove node_modules and .next
then install again
you forgot to import revalidatePath on GetServerSpells btw
Avatar
Munchkin
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
Avatar
Munchkin
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
Avatar
yeah no idea, you may want to open an issue on node-appwrite
Avatar
Munchkin
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
Avatar
Error: e._formData.get is not a function this error should be cause by one of the package that node-appwrite use
not sure why it happen with you repo while mine doesn't have error
btw, I have push the code to my repo
Avatar
Munchkin
thank you i will reference it once again to see if there is a difference betweeen the 2
Avatar
you can try with it
Avatar
Munchkin
ill try my luck with appwrite for now.