Ich erhalte einen React -Webpack -Fehler, wenn ich versuche, eine Funktion zu importieren ⇐ JavaScript

[Anonymous]

Ich arbeite auf einer Website mit Mern Stack und muss eine Funktion implementieren, die ausgeführt wird, wenn ich auf eine Schaltfläche klicke. Ich habe die Funktion bereits übernommen, aber wenn ich versuche, sie auf einer React -Seite zu importieren und zu verwenden, bekomme ich nur einen Fehler und habe wirklich keine Ahnung, warum. Die Funktion funktioniert, wenn ich sie in der eigenen Datei ausführe.

Code: Select all

import xlsxpopulate from 'xlsx-populate';

function calculateInterest(price, interestRate) {
return (price * interestRate) / 3000;
}

console.log(calculateInterest(809055, 0.5));

function addMonth(dateStr, count) {
let [day, month, year] = dateStr.split('/').map(Number);

let date = new Date(year, month - 1, day);

date.setMonth(date.getMonth() + count);

let newDay = date.getDate().toString().padStart(2, '0');
let newMonth = (date.getMonth() + 1).toString().padStart(2, '0');
let newYear = date.getFullYear();

return `${newDay}/${newMonth}/${newYear}`;
}

let a = 0;

function dateDifference(dateStr1, dateStr2) {
let [day1, month1, year1] = dateStr1.split('/').map(Number);
let [day2, month2, year2] = dateStr2.split('/').map(Number);

let date1 = new Date(year1, month1 - 1, day1);
let date2 = new Date(year2, month2 - 1, day2);

let diffTime = Math.abs(date2 - date1);

return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
}

let originalPrice = 0;

export function populateExcelForMonthly(
paymentDate,
price,
monthlyPayment,
interestRate
) {
const monthCount = Math.floor(price / monthlyPayment);

originalPrice = price;
let paymentLeft = price;
let _paymentLeft = price;
let _paymentDate = paymentDate;
let currentInterest = 0;
let totalInterest = 0;
const currentDate = new Date();
let day = currentDate.getDate();
let month = currentDate.getMonth() + 1;
let year = currentDate.getFullYear();
let formattedCurrentDate = `${day.toString().padStart(2, '0')}/${month
.toString()
.padStart(2, '0')}/${year}`;
let previousDate = formattedCurrentDate;

let i;

xlsxpopulate.fromFileAsync('./src/util/template.xlsx').then((workbook) => {
for (i = 0; i < monthCount;  i++) {
// Aylık Ödeme Tarihi
workbook
.sheet('Sheet1')
.cell(`B${5 + i}`)
.value(_paymentDate);

// Aylık Ödenicek Miktar (Ana para bitene kadar sabit)
workbook
.sheet('Sheet1')
.cell(`C${5 + i}`)
.value(monthlyPayment);

currentInterest =
calculateInterest(_paymentLeft, interestRate) *
dateDifference(previousDate, _paymentDate);

_paymentLeft -= monthlyPayment;
_paymentLeft = _paymentLeft + currentInterest;
// Ödenmesi Gereken Paranın Geri Kalanı
workbook
.sheet('Sheet1')
.cell(`D${5 + i}`)
.value(_paymentLeft);

// Vade Farkı
workbook
.sheet('Sheet1')
.cell(`E${5 + i}`)
.value(currentInterest);

paymentLeft -= monthlyPayment;
paymentLeft += currentInterest;

currentInterest = 0;

// Önceki tarihten ödeme tarihine kadar olan mesafe
workbook
.sheet('Sheet1')
.cell(`F${5 + i}`)
.value(dateDifference(previousDate, _paymentDate));

previousDate = _paymentDate;
_paymentDate = addMonth(_paymentDate, 1);
}

workbook
.sheet('Sheet1')
.cell(`B${5 + i}`)
.value(_paymentDate);

workbook
.sheet('Sheet1')
.cell(`C${5 + i}`)
.value(paymentLeft);

workbook
.sheet('Sheet1')
.cell(`D${5 + i}`)
.value('0,00');

currentInterest =
calculateInterest(_paymentLeft, interestRate) *
dateDifference(previousDate, _paymentDate);
workbook
.sheet('Sheet1')
.cell(`E${5 + i}`)
.value(currentInterest);

totalInterest += currentInterest;
workbook
.sheet('Sheet1')
.cell(`F${5 + i}`)
.value(dateDifference(previousDate, _paymentDate));

workbook
.sheet('Sheet1')
.cell(`B${6 + i}`)
.value('Toplam Ödeme');

workbook
.sheet('Sheet1')
.cell(`B${7 + i}`)
.value('Toplam Vade Farkı');

workbook
.sheet('Sheet1')
.cell(`C${6 + i}`)
.value(originalPrice + paymentLeft);

originalPrice = 0;
totalInterest = 0;

workbook
.sheet('Sheet1')
.cell(`C${7 + i}`)
.value(paymentLeft);

return workbook.toFileAsync('./src/util/outputs/output.xlsx');
});
}
< /code>
Die React -Seite Ich versuche die Funktion in: < /p>
zu importierenimport React, { useState } from 'react';

//import PaymentForm from '../components/PaymentForm';
import { PaymentSetup } from '../components/PaymentSetup';
import { PaymentStructure } from '../components/PaymentStructure';
import { populateExcelForMonthly } from '../hooks/populate';
import { useMultistepForm } from '../hooks/useMultistepForm';

const Create = () => {
const INITIAL_DATA = {
title: '',
startDate: '',
currency: '',
price: 0,
interestRate: 0,
paymentType: '',
monthlyPayment: 0,
};

const [data, setData] = useState(INITIAL_DATA);

function updateFields(fields) {
setData((prev) =>  {
return { ...prev, ...fields };
});
}

const {
steps,
currentStepIndex,
step,
isFirstStep,
previous,
next,
isLastStep,
} = useMultistepForm([
,
,
]);

async function onSubmit(e) {
e.preventDefault();

if (isLastStep) {
const payment = {
title: data.title,
monthlyPayment: data.monthlyPayment,
startDate: data.startDate,
currency: data.currency,
price: data.price,
interestRate: data.interestRate,
paymentType: data.payment,
};
const response = await fetch('/api/payments', {
method: 'POST',
body: JSON.stringify(payment),
headers: {
'Content-Type': 'application/json',
},
});
const json = await response.json();

if (response.ok) {
INITIAL_DATA.title = '';
INITIAL_DATA.startDate = '';
INITIAL_DATA.currency = '';
INITIAL_DATA.price = 0;
INITIAL_DATA.interestRate = 0;
INITIAL_DATA.paymentType = '';
INITIAL_DATA.monthlyPayment = 0;
console.log('Yeni sözleşme eklendi:', json);
}
} else {
next();
}
}

// Multi-step Form
return (



{currentStepIndex + 1} / {steps.length}

{step}

{!isFirstStep && (

Geri

)}
{isLastStep ? (

Bitir

) : (
İleri
)}



);
};

export default Create;

< /code>
Fehler: < /p>
Failed to compile.

Module not found: Error: Can't resolve 'buffer' in '/home/canakil/Code/cemil-mern/frontend/node_modules/safe-buffer'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
- install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "buffer": false }
WARNING in ./node_modules/sax/lib/sax.js 139:13-37
Module not found: Error: Can't resolve 'stream' in '/home/canakil/Code/cemil-mern/frontend/node_modules/sax/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case.  Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }

WARNING in [eslint]
src/pages/Create.js
Line 6:10:  'populateExcelForMonthly' is defined but never used  no-unused-vars

ERROR in ./node_modules/safe-buffer/index.js 3:13-30
Module not found: Error: Can't resolve 'buffer' in '/home/canakil/Code/cemil-mern/frontend/node_modules/safe-buffer'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
- install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "buffer": false }

ERROR in ./node_modules/xlsx-populate/lib/Encryptor.js 12:15-32
Module not found: Error: Can't resolve 'crypto' in '/home/canakil/Code/cemil-mern/frontend/node_modules/xlsx-populate/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "crypto": false }

ERROR in ./node_modules/xlsx-populate/lib/Workbook.js 4:11-24
Module not found: Error: Can't resolve 'fs' in '/home/canakil/Code/cemil-mern/frontend/node_modules/xlsx-populate/lib'

webpack compiled with 3 errors and 2 warnings

Ich würde mich über jede Richtung freuen, warum ich diesen Fehler bekomme und was er bedeutet.