Point browser field to esm build (#3932)

* point browser field to esm build

* address comments

* Create funny-ties-ring.md

* fix build error in component

* change from namespace export to default export

* update changeset

* fix firebase imports in rxfire

* fix import for rules-unit-testing

* fix testing

* compile firebase pkgs to cjs so they can be stubbed in tests

Author: Feiyang1

.changeset/funny-ties-ring.md

@@ -0,0 +1,25 @@
+---
+"@firebase/app": patch
+"@firebase/auth": patch
+"@firebase/component": patch
+"@firebase/database": patch
+"firebase": major
+"@firebase/firestore": patch
+"@firebase/functions": patch
+"@firebase/performance": patch
+"@firebase/remote-config": patch
+"rxfire": patch
+"@firebase/util": patch
+---
+
+Point browser field to esm build. Now you need to use default import instead of namespace import to import firebase.
+
+Before this change
+```
+import * as firebase from 'firebase/app';
+```
+
+After this change
+```
+import firebase from 'firebase/app';
+```

config/webpack.test.js

@@ -74,13 +74,30 @@ module.exports = {
             ]
           }
         }
+      },
+      {
+        test: /\.js$/,
+        include: function (modulePath) {
+          const match = /node_modules\/@firebase.*/.test(modulePath);
+          if (match) {
+            console.log('modulePath', modulePath, match);
+          }
+          return match;
+        },
+        use: {
+          loader: 'babel-loader',
+          options: {
+            plugins: ['@babel/plugin-transform-modules-commonjs']
+          }
+        }
       }
     ]
   },
   resolve: {
     modules: ['node_modules', path.resolve(__dirname, '../../node_modules')],
-    mainFields: ['browser', 'main', 'module'],
-    extensions: ['.js', '.ts']
+    mainFields: ['browser', 'module', 'main'],
+    extensions: ['.js', '.ts'],
+    symlinks: false
   },
   plugins: [
     new webpack.NormalModuleReplacementPlugin(

integration/firebase/package.json

@@ -8,8 +8,6 @@
   },
   "devDependencies": {
     "firebase": "7.24.0",
-    "@babel/core": "7.11.6",
-    "@babel/preset-env": "7.11.5",
     "@types/chai": "4.2.13",
     "@types/mocha": "7.0.2",
     "chai": "4.2.0",

integration/firebase/test/namespace.test.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import * as firebase from 'firebase';
+import firebase from 'firebase';
 import * as namespaceDefinition from './namespaceDefinition.json';
 import validateNamespace from './validator';
 

package.json

@@ -87,6 +87,9 @@
     "@typescript-eslint/eslint-plugin-tslint": "4.4.1",
     "@typescript-eslint/parser": "4.4.1",
     "babel-loader": "8.1.0",
+    "@babel/core": "7.11.6",
+    "@babel/preset-env": "7.11.5",
+    "@babel/plugin-transform-modules-commonjs": "7.12.1",
     "chai": "4.2.0",
     "chai-as-promised": "7.1.1",
     "chalk": "4.1.0",

packages/app/package.json

@@ -4,7 +4,7 @@
   "description": "The primary entrypoint to the Firebase JS SDK",
   "author": "Firebase <firebase-support@google.com> (https://firebase.google.com/)",
   "main": "dist/index.node.cjs.js",
-  "browser": "dist/index.cjs.js",
+  "browser": "dist/index.esm.js",
   "module": "dist/index.esm.js",
   "react-native": "dist/index.rn.cjs.js",
   "esm2017": "dist/index.esm2017.js",

packages/app/rollup.config.js

@@ -37,10 +37,7 @@ const es5BuildPlugins = [
 const es5Builds = [
   {
     input: 'index.ts',
-    output: [
-      { file: pkg.browser, format: 'cjs', sourcemap: true },
-      { file: pkg.module, format: 'es', sourcemap: true }
-    ],
+    output: [{ file: pkg.module, format: 'es', sourcemap: true }],
     plugins: es5BuildPlugins,
     external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`))
   },

packages/auth/package.json

@@ -2,7 +2,7 @@
   "name": "@firebase/auth",
   "version": "0.15.0",
   "main": "dist/auth.js",
-  "browser": "dist/auth.js",
+  "browser": "dist/auth.esm.js",
   "module": "dist/auth.esm.js",
   "description": "Javascript library for Firebase Auth SDK",
   "author": "Firebase <firebase-support@google.com> (https://firebase.google.com/)",

packages/component/package.json

@@ -4,7 +4,7 @@
   "description": "Firebase Component Platform",
   "author": "Firebase <firebase-support@google.com> (https://firebase.google.com/)",
   "main": "dist/index.cjs.js",
-  "browser": "dist/index.cjs.js",
+  "browser": "dist/index.esm.js",
   "module": "dist/index.esm.js",
   "esm2017": "dist/index.esm2017.js",
   "files": ["dist"],

packages/component/rollup.config.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2018 Google Inc.
+ * Copyright 2018 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -39,7 +39,7 @@ const es5Builds = [
   {
     input: 'index.ts',
     output: [
-      { file: pkg.browser, format: 'cjs', sourcemap: true },
+      { file: pkg.main, format: 'cjs', sourcemap: true },
       { file: pkg.module, format: 'es', sourcemap: true }
     ],
     plugins: es5BuildPlugins,