next.config.js needs to manually reloaded
Unanswered
Munchkin posted this in #help-forum
Original message was deleted.
135 Replies
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
Hi, what do you mean by next.config.js needs to manually reloaded?
Munchkin
Everytime i start up my project i need to manually save my next.config.js file. Autosave on vscode doesnt work either.
that's odd, it shouldn't be resetted
Munchkin
thing is, there are no changes made.
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
doing this will result in:
i am using javascript and not typescript if that helps
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
yes change the export like this
Munchkin
also, could this be an issue?
export default nextConfig
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.
It seems that i have to resave the file after i have logged in and the page has been rerouted from the login page.
log in on your site?
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
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
yes because when you make change on
next.config.js
the server will restartbtw,
metadata
doesn't work in client componentMunchkin
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..
what do you mean when you route to the page?
Munchkin
I mean when i redirect from login to my main page.
that shouldn't need to restart the server
Munchkin
hmm.. Then why do i have to restart the server to make my script be able to fetch from db?
no, I meant when the next dev server detected you have made change on
next.config.js
. Then it will restart itselfso your page might refetch and you might see it fetch from DB
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
what erro you get?
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
do you still get this error?
Im a little lost
Munchkin
Ok so let me explain from the beginning.
Last week i got this error and you told me to add this:
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.
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.
oh ok, could you show the code on
@/utils/appwrite
Munchkin
ofcourse. its:
Sorry for the late reply i didnt get a ping when you answered
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:
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
Munchkin
Alright thank you, let me see if i can recreate this
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
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
could you show the code on the filter
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
I think the problem is you are importing
GetServerSpells
in a client componentas you can see, Im using
server-only
here to prevent thisMunchkin
i mean maybe, but i need to in this case cause useState is client only
what is inside
./Database.ts
?Munchkin
that is where i make the call to the server
although its Database.jsx
oh yeah I got error when using GetServerSpells in client component
I have to add back
serverComponentsExternalPackages: ["node-appwrite"],
Munchkin
got it illt ry that again
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?
from what i think is that its trying to make a connection before the page might be properly loaded. Could that be the case?
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 sideMunchkin
I have removed it and put it into a server side component.
il share a repo
is it on private?
I got 404
Munchkin
I see, Somehow it got turned to private again. It was a public repo.
its public now
once I add this and no longer get the error
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
serverComponentsExternalPackages: ["node-appwrite"],
},
};
export default nextConfig;
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.
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
Could it be a caching issue?
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
I have not had to set any permissions
try comment out this line
on pages/characterpage.jsx
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 placeMunchkin
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
wdym?
Munchkin
hmm. ill try to reference between what you have and wht i got
could you try to setup appwrite with the structure in my repo?
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
just use your key is fine
and change the database id and collection id to yours
Munchkin
alright
if you want to test the function, create a
products
collectionwith this attributes
Munchkin
alright let me take that over then
Munchkin
Well that seems to have worked
But if am not mistaken this is from Server to Server.
check characterpage page
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.
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.
yeah, like i said, you are creating new client in multiple place
Munchkin
Yeah so ill try to fix that first.
Munchkin
I ave adjust my code to your. Unfortunately it still doesnt seem to work on my end.
what have you changed?
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
could you show the code on what you changed?
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;
}
ok let me try in a bit
Munchkin
take your time, Its getting late after all
it works for me
Munchkin
my repo works for you???
what error do you get
I copy your code on characterpage page to my repo
Munchkin
Error: e._formData.get is not a function
try remove
node_modules
and .next
then install again
you forgot to import
revalidatePath
on GetServerSpells
btwMunchkin
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
I think the only difference we have is that you are using Typescript and i am using javascript
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
yeah no idea, you may want to open an issue on node-appwrite
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
Error: e._formData.get is not a function
this error should be cause by one of the package that node-appwrite usenot sure why it happen with you repo while mine doesn't have error
btw, I have push the code to my repo
Munchkin
thank you i will reference it once again to see if there is a difference betweeen the 2
you can try with it
Munchkin
ill try my luck with appwrite for now.