Uncaught TypeError: Super expression must either be null or a function

[kmart-94]

trafficstars

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

[kmart-94]

I think this may be the issue: https://github.com/klaro-org/klaro-js/blob/6ccb3534daaba8114ecd2223a8dc688da13c4e3d/src/translations/cs.yml#L12 This file has the wrong key, should be purposes