This Stencil app is disabled for this browser

[peterennis]

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below): 0.9.1

I'm submitting a ... (check one with "x") [x ] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior: Opens with unsupported IE

Expected behavior: Open with a supported browser OR Command line info provided for open using Chrome or other browser

Steps to reproduce: Build with npm start

Related code:

C:\ae\adaept.com\aepwa>npm start

> aepwa@0.0.1 start C:\ae\adaept.com\aepwa
> npm run dev

> aepwa@0.0.1 dev C:\ae\adaept.com\aepwa
> sd concurrent "stencil build --dev --watch" "stencil-dev-server"

[20:28.9]  @stencil/core v0.9.1
[20:28.9]  build, app, dev mode, started ...
[20:29.0]  compile started ...
[20:31.4]  compile finished in 2.39 s
[20:31.4]  module map started ...
[20:31.9]  module map finished in 507 ms
[20:32.7]  generate bundles started ...
[20:32.7]  generate bundles finished in 10 ms
[20:32.7]  generate app files started ...
[20:32.8]  compile global style start ...
[20:32.8]  compile global style finish in 3 ms
[20:32.8]  generate app files finished in 73 ms
[20:33.9]  build finished, watching for changes... in 4.94 s

Other information:

[jgw96]

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!

[dacrypt]

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.

[asimlqt]

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

[janwirth]

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

Firefox version 65 is not a modern browser? :hear_no_evil:

[Lebby]

TL;DR:) Common Information: Browser: FF 65 Ionic: 4.0.0 npm list @stencil/core: @stencil/core@0.17.0 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 https://github.com/ionic-team/ionic-pwa-toolkit/issues/67#issue-324558121 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 https://github.com/ionic-team/ionic-pwa-toolkit/issues/67#issuecomment-393276917 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!