Does not work on iOS 9 (Safari)

[Thammada]

On the counter page https://react-universally.now.sh/counter the increment button does not work.

I have tried this on a simulator, looking at the console does not provide any meaningful error either. When running the starter-kit wit SSR disabled. The page is completely blank, without any meaningful error message too.

[birkir]

I'll investigate this.

Care to share more details in the meantime.

iPhone type? Did you fiddle anything with it before or just plain clone? Did you try it locally without now?

UPDATE This has now been fixed. I got lucky. In the test I did, Safari refused to load polyfill.io script and guess what, the increment counter worked. So I started by fixing that, (CSP is stricter, values need protocol in front, eg. http or https). Once the page loaded polyfill.io, the increment counter stopped working. Then I remembered my mate @hrafne adding the gated flag to polyfill to enforce polyfills (See https://github.com/ueno-llc/starter-kit-universally/pull/22).

Anyway, thanks for the bug report.

[Thammada]

More details and reproduction steps

I'm using the simulator app with iOS 9.3 (iPhone type does not matter, I have tried all types of iPhone & iPad)

1. after I cloned the code and install the packages, I run yarn build && yarn start and view the app using the simulator, there are warnings about CSP; polyfill.io was not loaded.
2. I've added http and https variants of polyfill cdn to fix the CSP errors

   scriptSrc: [
     // Allow scripts from cdn.polyfill.io so that we can import the
     // polyfill.
     'cdn.polyfill.io',
   +      'http://cdn.polyfill.io',
   +      'https://cdn.polyfill.io',
   ],

3. running yarn build && yarn develop and navigate to http://localhost:1337/counter

result: the counter button does not work.

The effect is more obvious when I set

  // Disable server side rendering?
-  disableSSR: false,
+  disableSSR: true,

the result would be just a completely blank page

4. adding the gated flag in internal/webpack/withServiceWorker/index.js as @birkir mentioned does not seem to solve the problem

     externals: (config('polyfillIO.enabled')
   -        ? [`${config('polyfillIO.url')}?features=${config('polyfillIO.features').join(',')}`]
   +        ? [`${config('polyfillIO.url')}?features=${config('polyfillIO.features').join(',')}&flags=gated`]
       : [])

[birkir]

What if you start the server like this: HOST=localhost yarn develop. I'm going for 0.0.0.0 issue here.

[Thammada]

Running HOST=localhost yarn develop still yields the same result

[diondirza]

@Thammada have you tried to comment this line https://github.com/ctrlplusb/react-universally/blob/master/config/values.js#L66?, in my previous PR's commit https://github.com/ctrlplusb/react-universally/commit/94a61ecad0adccdd710d6133e6727f37840ba147 I have made some changes to not activate es6 feature from polyfill.io because the counter page didn't work out. Later I knew this because my emulator simulates iOS environment.

[diondirza]

I have tried what @birkir said by adding this line and it works fine for iOS agent

scriptTag(`${config('polyfillIO.url')}features=${config('polyfillIO.features').join(',')}&flags=gated,always),