Next.js Discord

Discord Forum

"use client" and fs conflicting

Unanswered
Morelet’s Crocodile posted this in #help-forum
Open in Discord
Morelet’s CrocodileOP
i have three files that i am editing: layout.js, page.js, and transcribe.js

85 Replies

Morelet’s CrocodileOP
Common Moorhen
the fs module only runs on Node and therefore cant be imported on a client component
Morelet’s CrocodileOP
i think i read somewhere saying i cant use both
wait so how do i fix that
i think im cooked
@Morelet’s Crocodile Click to see attachment
Common Moorhen
why do you need that file to be client side?
Morelet’s CrocodileOP
uhhh im not sure what that means but basically what im trying to do is have my homepage link to two diff pages: page.js and transcribe.js
@Morelet’s Crocodile uhhh im not sure what that means but basically what im trying to do is have my homepage link to two diff pages: page.js and transcribe.js
Common Moorhen
the comment at the top of the file that says 'client side' means that code will be sent to the browser and executed on it
and the fs module is an API of Node, and is not available on the browser
next js runs code on node to perform API actions or server actions, while allowing you to add 'use client' at the top of some components to be able to use react APIs
Morelet’s CrocodileOP
so basically the transcribe file shouldnt be available on the browser?
but then how do i use it
Common Moorhen
you can use a server action
or an api endpoint
@Morelet’s Crocodile Click to see attachment
Common Moorhen
just add 'use server' at the top of this file
replacing the comment 'use client'
Morelet’s CrocodileOP
oki
wait i got a new error
Common Moorhen
show me the server component
server actions must be async
Morelet’s CrocodileOP
'use server';

// Import google cloud library by looking through path
const speech = require('@google-cloud/speech');
const fs = require('fs');

// Creates a client that allows us to connect to google's API
const client = new speech.SpeechClient();

async function quickstart() {
    // The path of the audio file
    const fileName = '';

    // Reads a local audio file and converts it to base64, which is a binary to 
    //text encoder (audio files are in binary)
    const file = fs.readFileSync(fileName);
    const audioBytes = file.toString('base64');

    // The audio file's encoding 
    const audio = {
        content: audioBytes,
    };
    //use LINEAR 16 encoding 
    const config = {
        encoding: 'LINEAR16',
        languageCode: 'en-US',
    };
    const request = {
        audio: audio,
        config: config,
    };

    // Detects speech in the audio file
    const [response] = await client.recognize(request);
    const transcription = response.results
        .map(result => result.alternatives[0].transcript)
        .join('\n');
    //prints out the transcription 
    console.log(`Transcription: ${transcription}`);
}
//way to run the quickstart() method and catch errors if they arise
quickstart().catch(console.error);
this is transcribe.js
Common Moorhen
put this line inside the function:
// Creates a client that allows us to connect to google's API
const client = new speech.SpeechClient();
this wont work:
//way to run the quickstart() method and catch errors if they arise
quickstart().catch(console.error);
@Common Moorhen this wont work: js //way to run the quickstart() method and catch errors if they arise quickstart().catch(console.error);
Common Moorhen
if you want to catch it, you will need to use try-catch inside the function, or use try-catch on the component from where you call it
youre not exporting the function
Morelet’s CrocodileOP
'use server';

const speech = require('@google-cloud/speech');
const fs = require('fs');

async function quickstart() {
    const client = new speech.SpeechClient();

    const fileName = '';
    const file = fs.readFileSync(fileName);
    const audioBytes = file.toString('base64');
    const audio = {
        content: audioBytes,
    };
    const config = {
        encoding: 'LINEAR16',
        languageCode: 'en-US',
    };
    const request = {
        audio: audio,
        config: config,
    };

    const [response] = await client.recognize(request);
    const transcription = response.results
        .map(result => result.alternatives[0].transcript)
        .join('\n');
    console.log(`Transcription: ${transcription}`);
}
ok i moved it
i get the same error
Common Moorhen
youre not exporting the function
use
export async function quickstart() {
}
instead of 
async function quickstart() {
}
Morelet’s CrocodileOP
😭
Common Moorhen
are you following a tutorial or a guide?
Morelet’s CrocodileOP
no
ok i changed it
Common Moorhen
ah
did the error get away?
Morelet’s CrocodileOP
no
Common Moorhen
show me how youre calling the server action
Morelet’s CrocodileOP
'use server';

const speech = require('@google-cloud/speech');
const fs = require('fs');

export async function quickstart() {
    const client = new speech.SpeechClient();

    const fileName = '';
    const file = fs.readFileSync(fileName);
    const audioBytes = file.toString('base64');
    const audio = {
        content: audioBytes,
    };
    const config = {
        encoding: 'LINEAR16',
        languageCode: 'en-US',
    };
    const request = {
        audio: audio,
        config: config,
    };

    const [response] = await client.recognize(request);
    const transcription = response.results
        .map(result => result.alternatives[0].transcript)
        .join('\n');
    console.log(`Transcription: ${transcription}`);
}

transcribe.js
import "./globals.css";
import React from 'react';
import TranscribeComponent from './transcribe'; // Import Transcribe component from transcribe.js


export const metadata = {
  title: "Edu Opt",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <TranscribeComponent></TranscribeComponent>
    </html>
  );
}
layout^
.js
Common Moorhen
wait
youre using the server action as if it were a react component
a server action is just a function that runs on the server, in node
if you want to call it, create a react component
Morelet’s CrocodileOP
How do i do that
This my first hackathon
Common Moorhen
create a folder inside /src called components, and inside it, create a my-component.js file
in that file create the client side component in this way:
'use client'
import serverAction from './transcribe' // correct this import

export function myComponent(){
  
  async function runServerAction(){
    try{
      await serverAction()
    } catch(error){
      console.log(error)
    }
  }

  return (
    <button onClick={runServerAction}>
      click me to run server action
    </button>
  )
}
your layout.js is a layout, and the one youre using is the root layout, you should not use it as a page. instead, create a /my-page-path folder inside /src/app/ with a page.js file in which you create a client component a to use it as a page.
https://nextjs.org/docs/app/building-your-application/routing
I recommend you to see some tutorial or read the docs on things sucha as routing, creating components, server vs client side rendering, api endpoints and server action before building
all respective to next js
Morelet’s CrocodileOP
Ok i will try this
how do i do that
Common Moorhen
You should use pages
Morelet’s CrocodileOP
plz ie been working since 3am
Common Moorhen
Youre rendering components on a layout.js file
And that is not the purpuse of layouts
What youre doing should be on a page
Common Moorhen
Okay
Render your components in that page then
Morelet’s CrocodileOP
idk what that means 😭
or how to do that
Morelet’s CrocodileOP
@Common Moorhen
why doesnt this work 😭
it still shows me the landing page
when i click on it
Common Moorhen
To create a route, you need to create a folder with the route path, and put your page.js inside
Morelet’s CrocodileOP
im cooked
Common Moorhen
brother
read the docs
or watch some tutorial