[BUG] - Undefined property 'head'

nisnis123 commented 1 year ago

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

furcan commented 1 year ago

Hello,

Can you please share the file as code that you are imported notiflix?

Thanks.

nisnis123 commented 1 year ago

Hey,Here you go:'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 += "

"+element.elementName+"

"; } }); if(messageString != ""){ console.log(messageString); //alert("Die folgenden Felder wurden nicht korrekt ausgefüllt:
" +messageString); Notiflix.Report.warning("Fehlende Angaben", "Die folgenden Felder wurden nicht korrekt ausgefüllt:

" + messageString+"", "OK"); } else { makeAPICall(); } } //console.log(TextInput("","","").test()) (….)}//Initializer Fileimport 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)', }, });}Am 16.08.2023 um 12:42 schrieb Furkan @.***>: Hello, Can you please share the file as code that you are imported notiflix? Thanks.

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: @.***>

nisnis123 commented 1 year ago

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)',
    },
  });

}`

furcan commented 1 year ago

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.

nisnis123 commented 1 year ago

Hello,

So, it turns out that indeed the usage of „useEffect“ solves the error.

Thank You for your support :-)

Kind regards :-)

Am 19.08.2023 um 13:04 schrieb Furkan @.***>:

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.

— Reply to this email directly, view it on GitHub https://github.com/notiflix/Notiflix/issues/75#issuecomment-1684919341, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKQE4N4O3YPU3JXLG5F377TXWCMSDANCNFSM6AAAAAA3SFFRQY. You are receiving this because you authored the thread.

furcan commented 1 year ago

Hi @nisnis123

Thank you for the feedback.

Have a great day, Furkan

notiflix / Notiflix