Next.js Discord

Discord Forum

Error: Could not find the module in the React Client Manifest. This is probably a bug in the React

Answered
French Lop posted this in #help-forum
Open in Discord
French LopOP
Hi!
I am developing my portfolio website using nextjs 14. I am having a section where to show my projects that I fetch from a DB.
However I am having issues developing the component that shows the projects.

I have my 'projects.tsx' (resumed):

"use server"
async function ProjectsCards() {
    const projects = await getProjects();
    
    return (
        <ProjectList projects={projects}/>        
    )
}

export default async function Projects() {
    return (
        <Suspense fallback={<div>Loading...</div>}>
            <ProjectsCards /> 
        </Suspense>
    );
};


async function getProjects()  {
    const connection = await db();


    try {
        // Perform database operations using the 'connection' object
        // Example: Fetch data from a table
        const [results] = await connection.query("SELECT * FROM projects where lang_code = 'en'");


that is a serber component. Then I have a client component 'project-list.tsx' where I show them.

When loading my main page, it is shown white, and log repeats this error message:
 ⨯ Error: Could not find the module "D:\Desktop\Proyectos\Web Development\elblogdebruno.com - brunomoya.com\Current Design 2023\my-app\src\components\project-list.tsx#" in the React Client Manifest. This is probably a bug in the React Server Components bundler. 
    at stringify (<anonymous>)


What could it be?
thanks
bruno
Answered by Ray
try removing "use server" which should be used in a file which only exporting server action. All component are server component by default
View full answer

34 Replies

Answer
French LopOP
Thanks for the tip. Now I am getting issues connecting to the database: Error connecting to database: TypeError: Net.connect is not a function
French LopOP
i am using mysql2 lib , my database is mysql
@French Lop i am using mysql2 lib , my database is mysql
Ray
try add it to next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: ['mysql2'],
  },
}
 
module.exports = nextConfig
French LopOP
./src/app/main.tsx
⨯ ./node_modules/mysql2/lib/connection.js:18:0
Module not found: Can't resolve 'net'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/mysql2/index.js
./node_modules/mysql2/promise.js
./src/lib/db.ts
./src/components/portfolio/sections/projects/projects.tsx
./src/components/portfolio/launcher.tsx
./src/app/main.tsx
✓ Compiled /favicon.ico in 637ms (1441 modules)

from what I have seen online, net is ssr
but in theory the component im calling the DB from is a server component
I also added "use server" to my DB component
Connected to MySQL database admin_personal_website
⨯ Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.
at stringify (<anonymous>)
Ray
no you don't need 'use server' there
maybe can you show the full code?
French LopOP
"use server"
import mysql from 'mysql2/promise';

const db = async () => {
try {
const connection = await mysql.createConnection({
host: process.env.MYSQL_HOST,
user: process.env.MYSQL_USER,
password: process.env.MYSQL_PASSWORD,
database: process.env.MYSQL_DATABASE,
});

console.log('Connected to MySQL database ' + process.env.MYSQL_DATABASE);
return connection;
} catch (error) {
console.error('Error connecting to database:', error);
throw error;
}
};

export default db;
Ray
ok can you show the component where you use this?
French LopOP
import db from '@/lib/db';

import 'material-symbols';
import { Suspense } from 'react';
// import { Foo } from './foo';
import { ProjectProps } from './project_props';
import ProjectList from './project_list';


async function ProjectsCards() {
    // console.log(profile);
    const projects = await getProjects();
    
    return (
        <ProjectList projects={projects}/>        
    )
}

export default async function Projects() {
    return (
        <Suspense fallback={<div>Loading...</div>}>
            <ProjectsCards /> 
        </Suspense>
    );
};

async function getProjects(): Promise<ProjectProps[]> {
    const connection = await db();

    try {
        const [results] = await connection.query("SELECT * FROM projects where lang_code = 'en'");

        // use for testing
        const projects: ProjectProps[] = [];

        // fill projects with data from results here
        for (const result of results) {
            projects.push({
                id: result.id,
                title: result.title,
                description: result.description,
                url: result.url,
                button_text: result.button_text,
                image: result.image,
                lang_code: result.lang_code,
                hidden_description: result.hidden_description,
                date: result.date,
            });
        }

        console.log("Fetched projects:", projects);

        return projects;
    } catch (error) {
        console.error("Failed to fetch projects:", error);
        return [];
    } finally {
        if (connection) {
            connection.end();
        }
    }
}
Ray
hmm mysql2 works for me
French LopOP
this component is inside a client component, maybe it makes it a client component as well?
Ray
ah yeah
French LopOP
so if I use "use server" to make it a server component I get the 

⨯ Error: Could not find the module "D:\Desktop\Proyectos\Web Development\elblogdebruno.com - brunomoya.com\Current Design 2023\my-app\src\components\project-list.tsx#" in the React Client Manifest. This is probably a bug in the React Server Components bundler. 
    at stringify (<anonymous>)
Ray
'use server' is not makeing a server component
and if the component is imported in a client component, it is a client component
you should try to make its parent a server component
only use 'use server' for server action
French LopOP
but the parent needs useState to handle things, if im not wrong useState is only for client comonents
Ray
what is the state for?
French LopOP
Ok so I can have client components inside server components. I will try reestructurate everything!
thanks for the help
Ray
np
@Ray you should try to make its parent a server component
French LopOP
that fix it
thanks
Ray
nice
np