Sometimes register event twice in next.js

[nnfans]

Sometimes the event that triggered appears twice in the clevertap activity tab

Screen.Recording.2022-12-02.at.10.05.57.mov

Printed console:

Registered event

Step to reproduce

1. clone https://github.com/nnfans/clevertap-repro
2. yarn
3. create .env.local
4. add NEXT_PUBLIC_CT_ID= and fille with clevertap id
5. yarn dev

Why don't we change the implementation to use fetch api or any http request library instead of appending script tag inside head tag and place the query inside it

clevertap-web-sdk/src/util/requestDispatcher.js

Lines 66 to 78 in 7680813

	// TODO: Try using Function constructor instead of appending script.
	var ctCbScripts = document.getElementsByClassName('ct-jp-cb')
	while (ctCbScripts[0]) {
	ctCbScripts[0].parentNode.removeChild(ctCbScripts[0])
	}
	const s = document.createElement('script')
	s.setAttribute('type', 'text/javascript')
	s.setAttribute('src', url)
	s.setAttribute('class', 'ct-jp-cb')
	s.setAttribute('rel', 'nofollow')
	s.async = true
	document.getElementsByTagName('head')[0].appendChild(s)
	this.logger.debug('req snt -> url: ' + url)

[abhu-A-J]

Hey @nnfans not from the clever tap team, but can it be because of the fact that you are using React 18 and use effect having double runs?

Maybe try to debug mode and check if requests are going twice.

[nnfans]

hi @abhu-A-J, you can reproduce it. I already disable the restrict mode that make useEffect fired twice
https://github.com/nnfans/clevertap-repro/blob/main/next.config.js