[BUG] - Undefined property 'head'
nisnis123 opened this issue · comments
Description
When using Notiflix with react, when building the project the following error is thrown:
- error TypeError: Cannot read properties of undefined (reading 'head')
at NotiflixReportInit (./app/components/initializer/notiflix.report.tsx:9:60)
at Home (./app/page.tsx:32:96)
To Reproduce
Steps to reproduce the behavior:
Install Notiflix via NPM (as described in the manual) and run npm run build
Environment
- OS: macOS and Windows 11
- Dev-Environment: npm v 9.8.1, react with next.js
Hello,
Can you please share the file as code that you are imported notiflix?
Thanks.
Sorry, I just saw that the formatting is really bad.
So, another try here:
`'use client'
import { TextView, TextInput, TextArea, EMail } from './components/input/text';
import { useRouter } from 'next/router';
import { SectionHeader, SubsectionHeader } from './components/input/sectionheader';
import { DarkGreyContainer, GreyContainer, RedContainer } from './components/container/grey';
import { RadioInput, RadioOptions } from './components/input/radio';
import { CheckBox } from './components/input/checkbox';
import { Button } from './components/input/button';
import { Container, Footer } from './components/container/generalcontainer';
import { UserInputReturnValue } from './components/input/if_inputelement';
import Notiflix from 'notiflix';
import { NotiflixReportInit } from './components/initializer/notiflix.report';
import { fileList } from './components/filelist/filelist';
import { file } from './components/filelist/file';
import { API } from './service-workers/api';
export default function Home() {
NotiflixReportInit();
var rvs = new Array();
const makeAPICall = async () =>{
Notiflix.Notify.info("Formular wird gesendet...");
Notiflix.Block.circle('.myform');
API.Push(rvs,(returnValue:string) => {
if(returnValue == "true"){
Notiflix.Notify.success("API-Call finished");
} else {
Notiflix.Notify.failure("API-Call failed");
}
})
}
const submitForm = () => {
var messageString = "";
rvs.forEach(element => {
if(!element.valid){
messageString += "<li>"+element.elementName+"</li>";
}
});
if(messageString != ""){
console.log(messageString);
//alert("Die folgenden Felder wurden nicht korrekt ausgefüllt:<br>" +messageString);
Notiflix.Report.warning("Fehlende Angaben", "Die folgenden Felder wurden nicht korrekt ausgefüllt:<ul>" + messageString+"</ul>", "OK");
} else {
makeAPICall();
}
}
//console.log(TextInput("","","").test())
(….)
}`
And here the Initializer file:
`import Notiflix from "notiflix";
export function NotiflixReportInit(){
Notiflix.Report.init({
className: 'notiflix-report',
width: '500px',
backgroundColor: '#f8f8f8',
borderRadius: '25px',
rtl: false,
zindex: 4002,
backOverlay: true,
backOverlayColor: 'rgba(0,0,0,0.5)',
backOverlayClickToClose: true,
fontFamily: 'Arial',
svgSize: '110px',
plainText: false,
titleFontSize: 'var(--h3-size-fluid)',
titleMaxLength: 34,
messageFontSize: 'var(--main-size-fluid);',
messageMaxLength: 600,
buttonFontSize: 'var(--main-size-fluid);',
buttonMaxLength: 34,
cssAnimation: true,
cssAnimationDuration: 360,
cssAnimationStyle: 'fade', // 'fade' - 'zoom'
success: {
svgColor: '#32c682',
titleColor: '#1e1e1e',
messageColor: '#242424',
buttonBackground: '#32c682',
buttonColor: '#fff',
backOverlayColor: 'rgba(50,198,130,0.2)',
},
failure: {
svgColor: '#ff5549',
titleColor: '#1e1e1e',
messageColor: '#242424',
buttonBackground: '#ff5549',
buttonColor: '#fff',
backOverlayColor: 'rgba(255,85,73,0.2)',
},
warning: {
svgColor: 'rgb(228,100,80)',
titleColor: '#1e1e1e',
messageColor: '#242424',
buttonBackground: 'rgb(228,100,80)',
buttonColor: '#fff',
backOverlayColor: 'rgba(180,180,180,0.7)',
},
info: {
svgColor: '#26c0d3',
titleColor: '#1e1e1e',
messageColor: '#242424',
buttonBackground: '#26c0d3',
buttonColor: '#fff',
backOverlayColor: 'rgba(38,192,211,0.2)',
},
});
}`
Hello,
Please try to use Function expression for your wrapper Notiflix init functions.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function
In addition, please try to use useEffect hooks for calling the init functions.
And let me know please.
Thanks.