This Stencil app is disabled for this browser about ionic-pwa-toolkit HOT 5 CLOSED

Hello! As the page says you need to run npm run dev --es5 to have dev builds work in IE11. By default we only do ES6 builds during dev to improve build times but this also means that dev builds will only work with modern browsers out of the box. Also i should re-iterate that production builds do both ES5 and ES6 builds, so production builds will work fine in IE11 out of the box. Thanks for using the Ionic PWA Toolkit!

from ionic-pwa-toolkit.

I'm experiencing this issue with a production build (ionic4 + capacitor)

1. ionic build --prod
2. Open it in firefox
3. This Stencil app is disabled for this browser.

from ionic-pwa-toolkit.

I'm also getting this message in firefox 65.0.1 after running npm start using the stencil component template.

from ionic-pwa-toolkit.

dev builds will only work with modern browsers out of the box

Firefox version 65 is not a modern browser? 🙉

from ionic-pwa-toolkit.

TL;DR:)
Common Information:
Browser: FF 65
Ionic: 4.0.0
npm list @stencil/core: @stencil/[email protected]
npm --version: 6.8.0

Short Solution Descriptiont:
A workaround is to add "dev" : "stencil build --dev --es5 --watch --serve", in package.json:

scripts: 
{
 ...
    "dev" : "stencil build --dev --es5 --watch --serve",
...
}

So you can run:

npm run dev

Note:
I think that the key is the missing flag --es5 on commands

Long Description
Same issue "This Stencil app is disabled for this browser".
Step to reproduce:

1. npx create-stencil ionic-pwa
2. Input project name
3. start project by:

cd project-name
npx create-stencil ionic-pwa

4. It opens FF and shows same page as #67 (comment)
   Relevant Details is:

Current Browser's Support:

    ES Module Imports: true
    ES Dynamic Imports: false
    Custom Elements: true
    Shadow DOM: true
    fetch: true
    CSS Variables: true

Current Browser:

    Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:65.0) Gecko/20100101 Firefox/65.0  

5. I followed the #67 (comment) istructions:

npm run dev --es5

but i have :

npm ERR! missing script: dev

How I "patched":
I opened package.json created by the step 1

{
  "name": "project-name",
  "private": true,
  "version": "0.0.1",
  "description": "project-name",
  "license": "MIT",
  "files": [
    "dist/"
  ],
  "scripts": {
    "build": "stencil build",
    "start": "stencil build --dev --watch --serve",
    "test": "stencil test --spec --e2e",
    "test.watch": "stencil test --spec --e2e --watch"
  },
  "dependencies": {
    "@ionic/core": "4.0.0"
  },
  "devDependencies": {
    "@stencil/core": "0.17.0"
  }
}

I recognized that maybe, the target dev is missing and i added the line:

 "dev" : "stencil build --dev --es5 --watch --serve",

So The result package.json is:

{
  "name": "project-name",
  "private": true,
  "version": "0.0.1",
  "description": "project-name",
  "license": "MIT",
  "files": [
    "dist/"
  ],
  "scripts": {
    "build": "stencil build",
    "start": "stencil build --dev --watch --serve",
    "dev" : "stencil build --dev --es5 --watch --serve",
    "test": "stencil test --spec --e2e",
    "test.watch": "stencil test --spec --e2e --watch"
  },
  "dependencies": {
    "@ionic/core": "4.0.0"
  },
  "devDependencies": {
    "@stencil/core": "0.17.0"
  }
}

Now if I run:

npm run dev

it "works" and show the correct page, hope it helps!

from ionic-pwa-toolkit.