humanswitch/consentcookie

Errors when I try to add the consentcookie to my Laravel project

Opened this issue · 3 comments

stillfinder commented

Description

When I try to add the script to my Laravel project I'm getting multiple JS errors: http://joxi.ru/EA4BYJ9UD39Pvm

[Error] [vuex] already installed. Vue.use(Vuex) should be called only once.
[Error] TypeError: undefined is not an object (evaluating 'D.$store.state') — viewService.js:93
[Error] TypeError: undefined is not an object (evaluating 'M.$services') — consentService.js:119
[Error] TypeError: undefined is not an object (evaluating 'D.$store.commit') — viewService.js:158
[Error] TypeError: undefined is not an object (evaluating 'this.$store.state') — consentcookie.min.js:4473
[Error] TypeError: undefined is not an object (evaluating 'D.$store.state')

Expected Behavior

The script is working as expected

Actual Behavior

multiple JS errors (see above)

Possible Fix

Steps to Reproduce

  1. Build your own ConsentCookie or use downloaded version
  2. Include to a Laravel project using <script src="/path/to/consentcookie.min.js"></script>
  3. Initialize ConsentCookie
  4. Open your site and check the js console

Context

I can't use ConsentCookie

Your Environment

Laravel 5.4

timvaniersel commented

Reproduced the issue using the downloaded version:

Issue is only when Vue (Standard in every new Laravel project) is used on the page. Without Vue on a site it works perfectly.

The full list of error messages:

[Error] [Vue warn]: Cannot find element: #app
	warn (app.js:36514)
	query (app.js:41221)
	$mount (app.js:46799)
	_init (app.js:40561)
	Vue (app.js:40650)
	(anonieme functie) (app.js:13898)
	__webpack_require__ (app.js:20)
	(anonieme functie) (app.js:13869)
	__webpack_require__ (app.js:20)
	(anonieme functie) (app.js:63)
	Globale code (app.js:64)
[Error] [vuex] already installed. Vue.use(Vuex) should be called only once.
	y (consentcookie.min.js:9:26761)
	use (consentcookie.min.js:8:16590)
	exports (consentcookie.min.js:2:16844)
	r (consentcookie.min.js:1:975)
	e (consentcookie.min.js:1:822)
	Globale code (127.0.0.1:89)
[Error] TypeError: undefined is not an object (evaluating 'C.$store.state') — consentcookie.min.js:2:23530
	at (consentcookie.min.js:7:30434)
	rt (consentcookie.min.js:7:30345)
	it (consentcookie.min.js:7:30211)
	Ut (consentcookie.min.js:8:6169)
	_init (consentcookie.min.js:8:15335)
	a (consentcookie.min.js:8:16905)
	r (consentcookie.min.js:1:1128)
	e (consentcookie.min.js:1:822)
	Globale code (127.0.0.1:89)
[Error] TypeError: null is not an object (evaluating 'k.$services') — consentcookie.min.js:2:21355
	at (consentcookie.min.js:7:30434)
	rt (consentcookie.min.js:7:30345)
	it (consentcookie.min.js:7:30211)
	Ut (consentcookie.min.js:8:6169)
	_init (consentcookie.min.js:8:15374)
	a (consentcookie.min.js:8:16905)
	r (consentcookie.min.js:1:1128)
	e (consentcookie.min.js:1:822)
	Globale code (127.0.0.1:89)
[Error] TypeError: undefined is not an object (evaluating 'C.$store.commit') — consentcookie.min.js:2:24030
	at (consentcookie.min.js:7:30434)
	rt (consentcookie.min.js:7:30345)
	it (consentcookie.min.js:7:30211)
	Ut (consentcookie.min.js:8:6169)
	Ft (consentcookie.min.js:8:4919)
	r (consentcookie.min.js:1:1195)
	e (consentcookie.min.js:1:822)
	Globale code (127.0.0.1:89)
[Error] TypeError: undefined is not an object (evaluating 'this.$store.state') — consentcookie.min.js:2:13862
	at (consentcookie.min.js:7:30434)
	rt (consentcookie.min.js:7:30345)
	it (consentcookie.min.js:7:30211)
	_render (consentcookie.min.js:8:15069)
	o (consentcookie.min.js:8:4982)
	get (consentcookie.min.js:9:9772)
	Yi (consentcookie.min.js:9:9694)
	Ft (consentcookie.min.js:8:4995)
	r (consentcookie.min.js:1:1195)
	e (consentcookie.min.js:1:822)
	Globale code (127.0.0.1:89)```
StevenChoo commented

@stillfinder @timvaniersel I think it has to do with Laravel using Vue as its front-end framework.
Vuex is already initialized so the bootstrapping of ConsentCookie is failing.

Vue in ConsentCookie is isolated and not polluting the global scope, but seeing the error Vuex isn`t.
After searching, I found for example: vuejs/vuex#731 .
Similar error message.

I don't have a Lavarel project atm so I can't definitly confirm it.
Solutions would be, not using Vuex for state handling or make sure (the init of) Vuex is isolated from the global scope.