search

vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.75k stars 6.33k forks source link

vue-cli 3 not loading javascript in index.html when #2497

Closed bhtw closed 6 years ago

bhtw commented 6 years ago

Version

3.0.1

Reproduction link

[No official software. Corporate owned.](No official software. Corporate owned.)

Node and OS info

npm

Steps to reproduce

Shortly describing the issue:

Inside my index.html, <script src="https://js.stripe.com/v3/"></script> is loaded as last step inside the body tag and is the only thing added to index.html after project creation. Loading the script inside <head> tag works exactly the same and does not differ. So to follow best practice, I load javascript last inside the body tag.

Inside our app we use Stripe as payment provider to buy access to internet. Meaning, their device will most likely use their pop-up browser (CPA/CNA) to use the app, but it can also be used in any browser on any device.

Since we have to be compliant with CPA/CNA browsers, functions like localeStorage and other unsupported stuff is not used in our SPA app. We need to keep it as clean and simple as possible.

Possible steps to reproduce:

  1. Create an app with vue-cli 3 ui that includes Vuex, vue-router and vue-stripe-elements-plus
  2. Include the Stripe script tag last inside the body tag as described above
  3. Create a component that uses vue-stripe-elements-plus (https://github.com/fromatob/vue-stripe-elements)
  4. Build and run the app on a restricted WiFi, forcing the device to open the app in the CPA/CNA browser

What is expected?

The app should behave exactly the same inside the Androids Captive Portal Assistant, and Apples Captive Network Assistant as in all other browsers.

This was the case when the app was built with vue-cli 2.

Building the project in vue-cli 3.x should be no different than building with vue-cli 2.x

What is actually happening?

App works as expected in all browsers except Android CPA and Apples CNA. Then, Stripe is never loaded in index.html file. This is no longer working as expected building with vue-cli 3.

I have been trying to analyze and figure out where things stop, but debugging or inspecting CNA/CPA browsers is not possible, so adding alerts() and other checks lead me to the conclution that Stripe javascript is never loaded when the app runs inside CPA/CNA browsers. It is always loaded when app runs in other browsers like Safari, Chrome and Firefox.

The only thing that has changed is my build environment, changing from vue-cli 2 to vue-cli 3. I really hope you can help, because this is a huge 'product' and 'money income' stopper for our company.

LinusBorg commented 6 years ago

No official software. Corporate owned.](No official software. Corporate owned.) [...] Possible steps to reproduce:

We understand that you can't share the production code, but yould you at least provide a repository which includes the steps you described to reproduce the issue - including any changes done to the vue.config.js concerning configuration options? (Also, I personally have no idea what a "CNA/CPA browser" is so I wouldn't know how to replicate the problem.)

Then we an be sure that we are talking about the same code.

I have been trying to analyze and figure out where things stop, but debugging or inspecting CNA/CPA browsers is not possible, so adding alerts() and other checks lead me to the conclution that Stripe javascript is never loaded when the app runs inside CPA/CNA browsers.

Can you expand on that so we don't have to start at zero? maybe add those alert() calls etc into the reproduction code you will set up for us?

haoqunjiang commented 6 years ago

I'm no expert, but wouldn't a external resource request be force redirected in a CNA/CPA environment?

bhtw commented 6 years ago

Thank you for your quick response. I am sorry for my late.

When you try to connect to the internet at a hotel, coffee shop or airport where you need to log in or buy access to internet, your device will 'pop up' a mini-version of a browser that does not have the same functionality support as a normal browser. That pop-up browser is called Captive Portal Assistant on an Android device, and Captive Network Assistant on an Apple device. Please check out the CNA explanation here (Android will be the same..) :

https://alexmeub.com/apple-captive-network-assistant-macos/

I will try to create a small project to share with you. But to be able to test the app, you need to build it and run it on a device on a restricted WiFi network where you need to pay for internet access. And make sure the app opens in a CPA/CNA browser. Verify on both Android and Apple devices. Check this out to understand more about Stripe and how it works:

https://stripe.com/docs/stripe-js/elements/quickstart

Possibly you do not need to actually use Stripe, we just need to make sure it loads in all browsers. I will get back to you as soon as I have something ready. Meanwhile, please read and checkout the links I have provided about CNA/CPA and Stripe.

bhtw commented 6 years ago

I have now recreated the problem in this repository:

https://github.com/bhtw/stripe-test

Please check it out.

bhtw commented 6 years ago

I am really sorry.

The network guys found a missing configuration in our network routers, so the issue was neither mine or yours. But really, please be aware of CNA/CPA browsers anyway in the future.