SOLVED: StackBlitz Preview Not Loading (Solution: enable 3rd party cookies)

[danmana]

Live reload/ preview doesn't work in Chrome (Version 61.0.3163.100 (Official Build) (64-bit)).

Steps to reproduce:

1. create a new project (ex: https://stackblitz.com/edit/angular-ta3yfy)
2. the preview section doesn't load
   (open in a new window works, but without live reload)

_relay_:10 Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
    at https://angular-vxbayq.stackblitz.io/_relay_:10:7
    at https://angular-vxbayq.stackblitz.io/_relay_:43:7
(anonymous) @ _relay_:10
(anonymous) @ _relay_:43
preview-7160e757d494cd480578.js:1 Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
    at Object.255 (https://static.stackblitz.com/assets/packs/preview-7160e757d494cd480578.js:1:104517)
    at t (https://static.stackblitz.com/assets/packs/preview-7160e757d494cd480578.js:1:101)
    at Object.1003 (https://static.stackblitz.com/assets/packs/preview-7160e757d494cd480578.js:1:4791)
    at t (https://static.stackblitz.com/assets/packs/preview-7160e757d494cd480578.js:1:101)
    at Object.254 (https://static.stackblitz.com/assets/packs/preview-7160e757d494cd480578.js:1:103669)
    at t (https://static.stackblitz.com/assets/packs/preview-7160e757d494cd480578.js:1:101)
    at Object.439 (https://static.stackblitz.com/assets/packs/preview-7160e757d494cd480578.js:1:116545)
    at t (https://static.stackblitz.com/assets/packs/preview-7160e757d494cd480578.js:1:101)
    at Object.447 (https://static.stackblitz.com/assets/packs/preview-7160e757d494cd480578.js:1:117808)
    at t (https://static.stackblitz.com/assets/packs/preview-7160e757d494cd480578.js:1:101)
255 @ preview-7160e757d494cd480578.js:1
t @ preview-7160e757d494cd480578.js:1
1003 @ preview-7160e757d494cd480578.js:1
t @ preview-7160e757d494cd480578.js:1
254 @ preview-7160e757d494cd480578.js:1
t @ preview-7160e757d494cd480578.js:1
439 @ preview-7160e757d494cd480578.js:1
t @ preview-7160e757d494cd480578.js:1
447 @ preview-7160e757d494cd480578.js:1
t @ preview-7160e757d494cd480578.js:1
n.10 @ preview-7160e757d494cd480578.js:1
(anonymous) @ preview-7160e757d494cd480578.js:1
(index):11 Uncaught ReferenceError: _preboot is not defined
    at (index):11
    at (index):11

[ssuperczynski]

@danmana It works for me

[EricSimons]

@danmana can you try disabling chrome extensions and see if that fixes it?

[danmana]

@EricSimons Same in incognito mode without extensions.

I found the issue: aparently having the following setting enabled blocks both cookies and local storage

chrome://settings/content/cookies

Block third-party cookies
Prevent third-party websites from saving and reading cookie data

The js file in question is served from https://angular-ta3yfy.stackblitz.io
The main window is loaded from https://stackblitz.com/edit/angular-ta3yfy
Since these are two different domains, Chrome blocks cookies and local storage access.

Same happens when the originating call comes from: https://static.stackblitz.com/assets/packs/preview-7160e757d494cd480578.js

I'm not sure how this should be addressed, or even if it's possible while keeping each project sandboxed. Perhaps the window url should also be on the project domain? (ex: https://angular-ta3yfy.stackblitz.io/edit)

Right now the only alternative is running with 3rd party cookies enabled, which some users might not want to do.

[jlamby]

Same problem with Firefox (obviously) when 3rd party cookies are disabled

[cvietor]

thx @danmana
a quick workaround without enabling 3rd party cookies globally is to add an exception to stackblitz.io & stackblitz.com

-> chrome://settings/content/cookies
-> Allow -> Add:
[*.]stackblitz.io

[Knighton910]

Thanks @cvietor a verbatim solution 👍

[alexsasharegan]

Is there any way to detect that 3rd party cookies is disabled? It would be amazingly nice if you could sniff this and provide a helpful message like this fix: #162 (comment)

Maybe something like

window.opener.cookie = 'xdomaincookie';
let cookiesEnabled = window.opener.cookie.indexOf('xdomaincookie') != -1;

[trusktr]

For reference, if 3rd party stuff is not allowed, here's how to make it work in Chrome for the specific sites (stackblitz in this case):

Click the cookie in the address bar:

Click "Show cookies and other site data..." which takes you to:

Switch to the "Blocked" tab, then select the cookies to allow.

In the case of stackblitz, you need to allow staticblitz.com and the specific subdomain for the blitz you're working on. In my case, it was these two:

Then refresh, and it will work.

Note, you don't need to allow the other ones, and it will still work. F.e. I did not allow these ones:

[alexsasharegan]

It's been a while since this, but I remember it being easy to correct the issue. I just remember being very confused for a while as to why things weren't working.

[Sixtisam]

Isn't this going to be fixed? Yeah, there exists a workaround for that, but the issue was created over a year ago and there is still no proper solution for this?