ReferenceError: HTMLElement is not defined
Closed this issue · 5 comments
BhargavGanesh027 commented
I am using the clevertap-web-sdk for a company project on next-js
This is the error i get when i try to run the app
Server Error
ReferenceError: HTMLElement is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:///Users/ranvijaychouhan/Desktop/Ganesh/mono-repo/presto-rn-build/node_modules/clevertap-web-sdk/clevertap.js (3473:36)
<unknown>
file:///Users/ranvijaychouhan/Desktop/Ganesh/mono-repo/presto-rn-build/node_modules/clevertap-web-sdk/clevertap.js (2:83)
Object.<anonymous>
file:///Users/ranvijaychouhan/Desktop/Ganesh/mono-repo/presto-rn-build/node_modules/clevertap-web-sdk/clevertap.js (5:2)
Module._compile
internal/modules/cjs/loader.js (1072:14)
Object.Module._extensions..js
internal/modules/cjs/loader.js (1101:10)
Module.load
internal/modules/cjs/loader.js (937:32)
Function.Module._load
internal/modules/cjs/loader.js (778:12)
Module.require
internal/modules/cjs/loader.js (961:19)
require
internal/modules/cjs/helpers.js (92:18)
Object.clevertap-web-sdk
file:///Users/ranvijaychouhan/Desktop/Ganesh/mono-repo/presto-rn-build/build/staging_bookmychef/.next/server/pages/_app.js (28307:18)
__webpack_require__
file:///Users/ranvijaychouhan/Desktop/Ganesh/mono-repo/presto-rn-build/build/staging_bookmychef/.next/server/webpack-runtime.js (33:43)
eval
webpack-internal:///./src/screens/Login/Login.bookmychef.web.js (51:76)
Function.__webpack_require__.a
file:///Users/ranvijaychouhan/Desktop/Ganesh/mono-repo/presto-rn-build/build/staging_bookmychef/.next/server/webpack-runtime.js (97:13)
eval
webpack-internal:///./src/screens/Login/Login.bookmychef.web.js (1:21)
Module../src/screens/Login/Login.bookmychef.web.js
file:///Users/ranvijaychouhan/Desktop/Ganesh/mono-repo/presto-rn-build/build/staging_bookmychef/.next/server/pages/_app.js (19538:1)
__webpack_require__
file:///Users/ranvijaychouhan/Desktop/Ganesh/mono-repo/presto-rn-build/build/staging_bookmychef/.next/server/webpack-runtime.js (33:43)
eval
webpack-internal:///./app/navigationConfig.js (15:85)
Function.__webpack_require__.a
file:///Users/ranvijaychouhan/Desktop/Ganesh/mono-repo/presto-rn-build/build/staging_bookmychef/.next/server/webpack-runtime.js (97:13)
eval
webpack-internal:///./app/navigationConfig.js (1:21)
Module../app/navigationConfig.js
file:///Users/ranvijaychouhan/Desktop/Ganesh/mono-repo/presto-rn-build/build/staging_bookmychef/.next/server/pages/_app.js (17570:1)
__webpack_require__
file:///Users/ranvijaychouhan/Desktop/Ganesh/mono-repo/presto-rn-build/build/staging_bookmychef/.next/server/webpack-runtime.js (33:43)
eval
webpack-internal:///./src/common/NavigationManager.next.js (16:86)
Function.__webpack_require__.a
file:///Users/ranvijaychouhan/Desktop/Ganesh/mono-repo/presto-rn-build/build/staging_bookmychef/.next/server/webpack-runtime.js (97:13)
eval
webpack-internal:///./src/common/NavigationManager.next.js (1:21)
Module../src/common/NavigationManager.next.js
file:///Users/ranvijaychouhan/Desktop/Ganesh/mono-repo/presto-rn-build/build/staging_bookmychef/.next/server/pages/_app.js (18262:1)
__webpack_require__
file:///Users/ranvijaychouhan/Desktop/Ganesh/mono-repo/presto-rn-build/build/staging_bookmychef/.next/server/webpack-runtime.js (33:43)
eval
webpack-internal:///./src/pages/_app.js (20:90)
Function.__webpack_require__.a
file:///Users/ranvijaychouhan/Desktop/Ganesh/mono-repo/presto-rn-build/build/staging_bookmychef/.next/server/webpack-runtime.js (97:13)
eval
webpack-internal:///./src/pages/_app.js (1:21)
Module../src/pages/_app.js
file:///Users/ranvijaychouhan/Desktop/Ganesh/mono-repo/presto-rn-build/build/staging_bookmychef/.next/server/pages/_app.js (19175:1)
__webpack_require__
file:///Users/ranvijaychouhan/Desktop/Ganesh/mono-repo/presto-rn-build/build/staging_bookmychef/.next/server/webpack-runtime.js (33:43)
__webpack_exec__
file:///Users/ranvijaychouhan/Desktop/Ganesh/mono-repo/presto-rn-build/build/staging_bookmychef/.next/server/pages/_app.js (30669:39)
<unknown>
file:///Users/ranvijaychouhan/Desktop/Ganesh/mono-repo/presto-rn-build/build/staging_bookmychef/.next/server/pages/_app.js (30670:28)
Object.<anonymous>
file:///Users/ranvijaychouhan/Desktop/Ganesh/mono-repo/presto-rn-build/build/staging_bookmychef/.next/server/pages/_app.js (30673:3)
Module._compile
internal/modules/cjs/loader.js (1072:14)
Object.Module._extensions..js
internal/modules/cjs/loader.js (1101:10)
Module.load
internal/modules/cjs/loader.js (937:32)
Function.Module._load
internal/modules/cjs/loader.js (778:12)
Module.require
internal/modules/cjs/loader.js (961:19)
require
internal/modules/cjs/helpers.js (92:18)
Object.requirePage
file:///Users/ranvijaychouhan/Desktop/Ganesh/mono-repo/presto-rn-build/node_modules/next/dist/server/require.js (58:12)
<unknown>
file:///Users/ranvijaychouhan/Desktop/Ganesh/mono-repo/presto-rn-build/node_modules/next/dist/server/load-components.js (58:54)
runMicrotasks
<anonymous>
processTicksAndRejections
internal/process/task_queues.js (95:5)
async Object.loadComponents
file:///Users/ranvijaychouhan/Desktop/Ganesh/mono-repo/presto-rn-build/node_modules/next/dist/server/load-components.js (56:33)
async DevServer.findPageComponents
file:///Users/ranvijaychouhan/Desktop/Ganesh/mono-repo/presto-rn-build/node_modules/next/dist/server/next-server.js (555:36)
Initialising it like this
clevertap.privacy.push({ optOut: false });
clevertap.privacy.push({ useIP: false });
clevertap.init('XXXXXXXXXX', "eu1");
Version
"clevertap-web-sdk": "^1.6.8",
"next": "^12.2.5",
Please let me know if any other information is needed
marcshilling commented
Same issue
KambleSonam commented
@BhargavGanesh027 @marcshilling This is a nextjs error faced when using the client side rendering.
The clevertap module needed to be initialized in useEffect for it to work.
Kindly go through the sample Nextjs web app , using clevertap-web-sdk https://clevertap-next-demo.vercel.app/
Repo Link - https://github.com/KambleSonam/clevertap-next-demo
BhargavGanesh027 commented
thanks, it resolves our issue
deependrasolanky commented
The solution is working on individual pages but not in app.js . We are getting same error.
error - ReferenceError: HTMLElement is not defined
package.json
"clevertap": "^1.3.0",
"clevertap-web-sdk": "^1.6.9",
app.js
const [clevertapModule, setClevertapModule] = useState(null);
...
...
useEffect(() => {
clevertapInit()
}, []);
...
...
const clevertapInit = async () => {
let clevertap = clevertapModule
if (!clevertap) {
clevertap = await initializeClevertap()
}
};
...
...
async function initializeClevertap() {
const clevertapModule = await import('clevertap-web-sdk');
clevertapModule.default.init("************");
clevertapModule.default.privacy.push({ optOut: false });
clevertapModule.default.privacy.push({ useIP: false });
clevertapModule.default.setLogLevel(3);
return clevertapModule.default;
}
EjDadivas commented
I have same issue too