Firebase webpack+babel functions not deploying - firebase

Question

Is it possible to make firebase functions work with webpack and babel?
We need to reuse existing ES6 classes on server side which we can't edit so we need to transpile them to make it work in node.
Spent two days on the related tutorials but I'm hitting the problem where firebase can't seem to see functions declared in index.js after they were wrapped by webpack in a function.
here is a part of the resulting index.js:
(function(module, exports, __webpack_require__) {
var functions = __webpack_require__(/*! firebase-functions */ "firebase-functions");
var admin = __webpack_require__(/*! firebase-admin */ "firebase-admin");
admin.initializeApp();
exports.api = functions.https.onRequest(function (req, res) {
res.send({
msg: "ok"
});
});
})
exports.api = functions.https.onRequest is not deploying in this case.
Is it ever possible to make firebase work with webpack and babel?

Answer 1

I had a similar challenge. I am not completely satisfied with how things are automated on the dev side (I will give more time on that during the next few days), but it is working indeed.
I will try to tell how I did it by changing code and instructions to remove unrelated complexity.
My main goal is not to manually maintain a "functions" folder with its own package.json as a separate project from my main one. Everything that resides in the root source code and some webpack magic should suffice.
1 - My entry point source code in a app.js file inside a /src/main folder. It reads like this:
import * as functions from 'firebase-functions';
import { someProcessedOutputThatDependsOnExternalLibraries } from './my-code';
export const hello = functions.https.onRequest((req, res) => {
functions.logger.info('Hello logs!', { structuredData: true });
const output = someProcessedOutputThatDependsOnExternalLibraries(req)
res.send(output).end();
});
2 - I want to export it to a /dist folder, so I have to set up that folder in the firebase.json file in the project root:
{
"functions": {
"source": "dist"
},
"emulators": {
"functions": {
"port": 5001
},
}
}
3 - The package.json file in the root holds all the information needed for the project, especially the dependencies and useful scripts. Here some of the file content to illustrate.
{
"scripts": {
"env:firebase": "firebase emulators:start",
"build:firebase": "webpack --config webpack.firebase.js",
},
"dependencies": {
"axios": "^0.21.0",
"core-js": "^3.8.1",
"firebase-admin": "^9.4.2",
"firebase-functions": "^3.13.1",
"inquirer": "^7.3.3",
"regenerator-runtime": "^0.13.7",
"rxjs": "^6.6.3",
"uuid": "^8.3.2",
"xstate": "^4.15.3"
},
"devDependencies": {
"generate-json-webpack-plugin": "^2.0.0",
"webpack": "^5.15.0",
"webpack-cli": "^4.3.1",
"webpack-node-externals": "^2.5.2"
}
}
4 - Webpack is used to build a dist folder compatible with firebase specs. The webpack file below is almost entirely copied from this blessed github gist.
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const GenerateJsonPlugin = require('generate-json-webpack-plugin');
const pkg = require('./package.json');
const genFirebaseFunctionsPackage = () => ({
name: 'functions',
private: true,
main: 'index.js',
license: 'MIT',
engines: {
node: '14'
},
dependencies: pkg.dependencies
});
module.exports = {
target: 'node',
mode: 'production',
entry: './src/main/functions.js',
externals: [nodeExternals()],
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist'),
libraryTarget: 'commonjs'
},
node: {
__dirname: false,
__filename: false
},
optimization: {
minimize: false
},
plugins: [new GenerateJsonPlugin('package.json', genFirebaseFunctionsPackage())]
};
5 - So, if I run npm run build:firebase, the dist folder is created with index.js and package.json files. The dist dir is now compatible with firebase CLI and emulator expectations.
But to run it in the local emulator, I still have to go to that folder and type "npm install" (that's the pain point I'm still trying to solve).

Answer 2

It's a good idea to bundle your functions app using webpack for alot of reasons:
access to webpack loaders/plugins
much better developer experience with HMR (that works better than the functions runtime's implementation)
better performance for deployment and runtime (one or a few optimized chunks vs hundreds/thousands of unoptimised/unused files)
Many of the requirements are covered in this answer, but rather than making it all yourself, you might have an easier time using webpack-cloud-functions (of which I'm the author). It abstracts away much of the configuration you need to do that - e.g. libraryTarget, some of the externals, etc, and also provides reliable HMR for development out of the box.