Stencil: bug(environment): something about the environment makes firebase think this is not a web server

[AmitMY]

Stencil version:

0.76

I'm submitting a:

[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:
See: https://github.com/firebase/firebase-js-sdk/issues/558

On the stencil environment, doing:

import firebase from 'firebase';

firebase.initializeApp({ ... config ... });
firebase.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider());

causes:

code: "auth/operation-not-supported-in-this-environment"
message: "This operation is not supported in the environment this application is running on. "location.protocol" must be http, https or chrome-extension and web storage must be enabled."

The environment is HTTP, on localhost, and Storage is defined.

Expected behavior:
Firebase should work here, stencil server should be a normal HTTP environment.

Steps to reproduce:
See: https://github.com/AmitMY/firebase-stencil-issue
The last commit (firebase issue) is the code I added to the starter.

[jgw96]

Hey! Does the same thing happen if you run npm run build and then just serve the www folder using python simple server or some other http server?

[AmitMY]

git clone https://github.com/AmitMY/firebase-stencil-issue.git
cd firebase-stencil-issue/
npm i
npm run build
cd www
http-server .

[jgw96]

hmmm does this only happen with this app, or any app you have that's using firebase and built with Stencil?

[AmitMY]

Any app using firebase built with stencil.
That repo is just a reproduction, look at the only commit by me there, nothing done but adding firebase

[cdock1029]

I think you're supposed to use the modular packages now.

This works fine for me:

import { firebase } from '@firebase/app';

// import these as needed..
import '@firebase/auth'; 
import '@firebase/database'; 
import '@firebase/firestore';

[AmitMY]

I'll give it a shot and keep this thread posted this weekend. Thanks @cdock1029

[cdock1029]

Never mind this does not work now, since the compiler was updated in 0.7.7.

Getting errors:

[ ERROR ]  TypeError: Cannot read property 'kind' of undefined at Object.isImportClause
           (/Users/cdock/dev/wpm/web2/node_modules/typescript/lib/typescript.js:12964:21) at
           sourceFileObj.statements.find.st
           (/Users/cdock/dev/wpm/web2/node_modules/@stencil/core/dist/compiler/index.js:5349:16) at Array.find
           (native) at getTypeReferenceLocation
           (/Users/cdock/dev/wpm/web2/node_modules/@stencil/core/dist/compiler/index.js:5347:60) at
           getAllTypeReferences.reduce
           (/Users/cdock/dev/wpm/web2/node_modules/@stencil/core/dist/compiler/index.js:5311:29) at Array.reduce
           (<anonymous>) at getAttributeTypeInfo
           (/Users/cdock/dev/wpm/web2/node_modules/@stencil/core/dist/compiler/index.js:5310:10) at
           classNode.members.filter.reduce
           (/Users/cdock/dev/wpm/web2/node_modules/@stencil/core/dist/compiler/index.js:5694:33) at Array.reduce
           (<anonymous>) at getMethodDecoratorMeta
           (/Users/cdock/dev/wpm/web2/node_modules/@stencil/core/dist/compiler/index.js:5681:10)

It's having a problem with these imports:

import '@firebase/auth'; 
import '@firebase/database'; 

0.7.6 does not have this issue.
Something changed in this file I believe is causing this:

src/compiler/transpile/datacollection/utils.ts

[jthoms1]

I verified using the repo provided by @AmitMY that the issue does not occur with @stencil/[email protected]

[AmitMY]

@jthoms1 Verified 0.7.12 on that repo not working.

Same repo, just bumped dependencies:

├── @ionic/[email protected]
├── @stencil/[email protected]
├── @stencil/[email protected]
├── @stencil/[email protected]
├── @stencil/[email protected]
├── @stencil/[email protected]
├── @types/[email protected]
├── [email protected]
└── [email protected]

[jthoms1]

@AmitMY I used the imports that @cdock1029 outlined.

import { firebase } from '@firebase/app';

import '@firebase/auth'; 

[AmitMY]

@jthoms1 @cdock1029 This works! Thank you so much.

[juanframart2011]

hi @AmitMY sorry you could share the file or the part of how you configured it, since I have the same error and I could not solve it.

[AmitMY]

@juanframart2011 Not sure what you are asking. I used the different imports as stated above, and configured firebase using the config supplied in firebase online

[SouradeepMisra]

I also faced this issue. I faced this issue because of plugin version. try to update your 'webview' plugin version. It is work for me.