Not working with vitejs in production mode

I tried to use react-cookie-consent in a vitejs app. It works in development mode but in production, react throws me this error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

I’ve joined a test project to reproduce it. test-cookie.tar.gz.

It’s a vitejs project from scratch with the minimal modifications (importing and using the lib) to reproduce the bug.

You can test it by executing:

npm ci
npm run dev # It's working on localhost:3000
npm run build 
npm run serve # It's broken on localhost:5000

I suspect a compatibility issue with imports…

Thanks for your project.

[jclohmann]

Hi! I am also kind of stuck in this problem. There seems to be a problem with the generated default-export. Logging the imported component gave me this output:

import CookieConsent from 'react-cookie-consent';

console.log(CookieConsent);

Which gave me this output just before the described error:

Module {…}
	Cookies: ƒ o()
	OPTIONS: Object
	SAME_SITE_OPTIONS: Object
	default: ƒ i(e)
	getCookieConsentValue: ƒ ()
	Symbol(Symbol.toStringTag): "Module"
	__esModule: true
	get Cookies: ƒ ()
	get OPTIONS: ƒ ()
	get SAME_SITE_OPTIONS: ƒ ()
	get default: ƒ ()
	get getCookieConsentValue: ƒ ()

It seems the CookieConsent-component is not available as default but as a property named default.

As a workaround one can use the default properties value as a component by doing this:

import CookieConsentX from 'react-cookie-consent';

// @ts-ignore
const CookieConsent = CookieConsentX.default;

const SomeReactComponent = () => {
	return (
		<CookieConsent ... />
	);
};

This is not ideal when using typescript, since this replaces the correct type with any. (Which can surely be fixed using as.)

Another way I found was to change react-cookie-consent’s webpack-config like this:

-    // libraryTarget: "commonjs2", // THIS IS THE MOST IMPORTANT LINE! :mindblow: I wasted more than 2 days until realize this was the line most important in all this guide.
+    library: {
+      name: "reactCookieConsent",
+      type: 'umd'
+    },

It works as expected with this config.

@Mastermindzh Do you think we can change the library-type to umd without issues?

[Mastermindzh]

Hey @jrmi ,

I have no experience with Vitejs but I will try to find out what is wrong next week. Don’t have much time left this week, sorry 😃