Uncaught TypeError: Super expression must either be null or a function #518
Description
Klaro Config
var myKlaroConfig = {
testing: false,
elementID: 'klaro',
storageMethod: 'localStorage',
storageName: 'klaro',
htmlTexts: true,
cookieDomain: 'http://my.localhost:3000',
cookieExpiresAfterDays: 30,
default: false,
mustConsent: false,
acceptAll: true,
hideDeclineAll: false,
hideLearnMore: false,
noticeAsModal: true,
translations: {
zz: {
privacyPolicyUrl: '/privacy',
},
en: {
privacyPolicy: {
text: "To learn more, please read our <a href='/privacy-policy' target='_blank' rel='noopener noreferrer'>privacy policy</a>.",
},
privacyPolicyUrl: '/privacy-policy',
consentModal: {
title: "Services we would like to use",
description:
'Here you can see and customize the information that we collect about you.',
},
acceptAll: "Accept all",
decline: "Reject all",
acceptSelected: "Accept Selected",
ok: "Accept all",
consentNotice: {
learnMore: "Manage",
description: "Hi! Could we please enable some additional services for Analytics? You can always change or withdraw your consent later."
},
purposes: {
analytics: {
title: 'Analytics'
},
security: {
title: 'Security'
},
livechat: {
title: 'Livechat'
},
advertising: {
title: 'Advertising'
},
styling: {
title: 'Styling'
},
},
},
gb: {
privacyPolicy: {
text: "To learn more, please read our <a href='/privacy-policy' target='_blank' rel='noopener noreferrer'>privacy policy</a>.",
},
purposeItem: {
service: "service"
},
service: {
purpose: "purpose"
},
privacyPolicyUrl: '/privacy-policy',
consentModal: {
title: "Services we would like to use",
description:
'Here you can see and customize the information that we collect about you.',
},
acceptAll: "Accept all",
decline: "Reject all",
acceptSelected: "Accept Selected",
ok: "Accept all",
consentNotice: {
learnMore: "Manage",
description: "Hi! Could we please enable some additional services for Analytics? You can always change or withdraw your consent later."
},
purposes: {
analytics: {
title: 'Analytics'
},
security: {
title: 'Security'
},
livechat: {
title: 'Livechat'
},
advertising: {
title: 'Advertising'
},
styling: {
title: 'Styling'
},
},
},
},
services: [
{
name: 'google-analytics',
default: false,
translations: {
zz: {
title: 'Google Analytics'
},
en: {
description: 'We use Google analytics to track user activity and determine the efficiency of our site.'
},
gb: {
description: 'We use Google analytics to track user activity and determine the efficiency of our site.'
},
},
purposes: ['Analytics'],
cookies: [
{
"pattern": "^__utmz$",
"expiresAfter": "6 months",
"path": "",
"_id": "_wj3eo8y5x"
},
{
"pattern": "^__utma$",
"expiresAfter": "never",
"path": "",
"_id": "_hu7zr1ysb"
},
{
"pattern": "^__utmb$",
"expiresAfter": "30 minutes",
"path": "",
"_id": "_b7b2fkq39"
},
{
"pattern": "^__utmv$",
"expiresAfter": "never",
"path": "",
"_id": "_tqmvck14u"
},
{
"pattern": "^__utmt$",
"expiresAfter": "10 minutes",
"path": "",
"_id": "_hmtbi3dw6"
}
[/^_ga.*$/, '/', 'my.localhost:3000'],
[/^_gid.*$/, '/', 'my.localhost:3000'],
[/^_gat.*$/, '/', 'my.localhost:3000'],
[/^_AMP_TOKEN.*$/, '/', 'my.localhost:3000'],
[/^_gac.*$/, '/', 'my.localhost:3000'],
[/^__utmz.*$/, '/', 'my.localhost:3000'],
[/^__utma.*$/, '/', 'my.localhost:3000'],
[/^__utmb.*$/, '/', 'my.localhost:3000'],
[/^__utmv.*$/, '/', 'my.localhost:3000'],
[/^__utmt.*$/, '/', 'my.localhost:3000'],
],
required: false,
optOut: false,
onlyOnce: true,
},
],
styling: {
theme: [
"light",
]
}
};
export default myKlaroConfig;
React Code of Page
import * as Klaro from "klaro/dist/klaro-no-css";
import myKlaroConfig from '../utils/klaroConfig';
const LanguageSwitcher = ({ styles }) => {
const { t, i18n } = useTranslation(['auth']);
const locales = {
en: { title: t('selectOption.US'), icon: <FlagUS/> },
gb: { title: t('selectOption.UK'), icon: <FlagGB/> },
};
const handleLanguageChange = (e) => {
i18n.changeLanguage(e.target.value);
myKlaroConfig.lang = e.target.value;
Klaro.setup(myKlaroConfig);
}
return (
<LanguageSelect>
<Dropdown onChange={(e) => handleLanguageChange(e)} style={styles} defaultValue={i18n.resolvedLanguage} value={i18n.resolverLanguage}>
{Object.keys(locales).map((locale) => (
<option key={locale} value={locale}>{locales[locale].title}</option>
))}
</Dropdown>
</LanguageSelect>
)
}
Steps to reproduce
I have a react frontend with a java backend. The java spring boot server uses frontend-maven-plugin to build and package the js. I have no problem running klaro on localhost:3000 using npm start, but on localhost:8080 which is more like production I get the error in the title. It prevents my entire page from rendering, just a white screen.
Expected behavior
I'd expect it to work the same on both 3000 and 8080