Next.js Discord

Discord Forum

Module not found: Can't resolve 'fs'

Unanswered
Barbado da Terceira posted this in #help-forum
Open in Discord
Barbado da TerceiraOP
So, I'm trying to make an electron app in nextJS that contacts a multer API on a seperate script and i keep getting this issue

Here is the code for page.tsx

5 Replies

Barbado da TerceiraOP
"use client"

import { useState, useEffect } from 'react';
import Image from "next/image";
import axios from 'axios';
const { ipcRenderer } = require('electron');

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

import { Button } from "@/components/ui/button"

const sigma = () => {
  Notification.requestPermission().then(function(result) {
    const notification = new Notification('Testing Notifications', {
      body: 'Electron application running on NextJS + TS', 
      icon: '../../logo.svg',
    });
  })};

export default function Home() {

  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  const handleFileUpload = async () => {
    try {
      const result = await ipcRenderer.invoke('open-file-dialog');

      if (!result.canceled && result.filePaths.length > 0) {
        const filePath = result.filePaths[0];
        const response = await ipcRenderer.invoke('upload-file', filePath);

        if (response.success) {
          console.log(response.message);
          alert('File uploaded successfully');
        } else {
          console.error(response.message);
          alert('Error uploading file');
        }
      } else {
        alert('No file selected');
      }
    } catch (error) {
      console.error('Error uploading file:', error);
      alert('Error uploading file');
    }
  };

  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <Image
      src="../../logo.svg"
      width={100}
      height={500}
      alt='Electron Logo'
      className='py-3'
      />
      {isClient && (
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger>
              <Button className="btn w-40 btn-outline btn-primary" onClick={handleFileUpload}>Upload File</Button>
}
            </TooltipTrigger>
            <TooltipContent>
              <div className="p-2">Uploads a file</div>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      )}
    </div>
  );
Barbado da TerceiraOP
bump
Okay, so its whenever i import IpcRenderer from electron
which is literally what i need