Encountering an issue with deploying a nest.js project to Google Firebase Functions

When it comes to programming languages, NestJs utilizes ES6, ES7, and ES8, while Firebase Functions seems to be stuck at Node v.6.11.

I made an attempt to create a webpack configuration file with Babel in order to transpile both my files and the node_modules to match Node v6.11. However, I encountered difficulties during deployment due to a syntax error caused by an async function within the @nestjs/common/interceptors/file-fields.interceptor.js file.

⚠  functions[api]: Deployment error.
Function load error: Code in file dist/index.js can't be loaded.
Is there a syntax error in your code?
Detailed stack trace: /user_code/node_modules/@nestjs/common/interceptors/file-fields.interceptor.js:10
        async intercept(context, call$) {
              ^^^^^^^^^

SyntaxError: Unexpected identifier
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:549:28)
    at Object.Module._extensions..js (module.js:586:10)
    at Module.load (module.js:494:32)
    at tryModuleLoad (module.js:453:12)
    at Function.Module._load (module.js:445:3)
    at Module.require (module.js:504:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/user_code/node_modules/@nestjs/common/interceptors/index.js:6:10)

Below is the content of my webpack.config.js file:

'use strict';
const nodeExternals = require('webpack-node-externals');
module.exports = {
    entry: './src/server.ts',
    output: {
        filename: 'index.js',
        libraryTarget: 'this'
    },
    target: 'node',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: [
                    { 
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                [
                                    '@babel/preset-env',
                                    {
                                        "targets": {
                                        "node": "6.11.1"
                                        }
                                    },
                                    '@babel/stage-0'
                                ]
                            ],
                            plugins: [require('@babel/plugin-transform-async-to-generator')]
                        }
                    }, 
                    {
                        loader: 'ts-loader',
                        options: {
                            transpileOnly: true
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                use: [
                    { 
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                [
                                    '@babel/preset-env',
                                    {
                                        "targets": {
                                        "node": "6.11.1"
                                        }
                                    },
                                    '@babel/stage-0'
                                ]
                            ],
                            plugins: [require('@babel/plugin-transform-async-to-generator')]
                        }
                    }
                ]
            }
        ]
    },
    resolve: {
        extensions: [ '.ts', '.tsx', '.js' ]
    },
    externals: [nodeExternals()]
};

This is my tsconfig.json file for reference:

{
  "compilerOptions": {
    "lib": ["es6", "es2015.promise"],
    "module": "commonjs",
    "noImplicitAny": false,
    "outDir": "",
    "sourceMap": true,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "target": "es6",
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "include": [
    "src/**/*.ts",
    "spec/**/*.ts"
  ],
  "exclude": [
    "**/*.spec.ts"
  ]
}

What might be causing this issue?

Answer №1

Just a mere 3 days ago (following Google Cloud’s Next conference), Google made an exciting announcement revealing the introduction of the new Node 8 runtime along with Firebase Cloud Functions 2.0.0 and Firebase tools version 4.0.0.

For those looking to hop on board the Node 8 train, here are the steps you need to take:

  1. Update your firebase-functions version to 2.0.0
  2. Upgrade firebase-tools to 4.0.0
  3. Include "engines": { “node”: “8” } in your /functions/package.json

For more information, visit: https://firebase.google.com/docs/functions/manage-functions#set_nodejs_version

Answer №2

It seems that Node 6 does not have support for async functions from ES2017, so any code using the async keyword won't run.

If you're facing this issue, one solution could be to use TypeScript for transpilation. Set the target in your tsconfig.json to es6 to ensure that async functions are transpiled properly. Keep in mind that you may need to load specific polyfills based on your requirements. Also, NestJS requires Node 8.9+ as mentioned in their documentation here:

The latest version of Nest supports >= 8.9.0 of Node.js due to performance improvements achieved by targeting es2017 during TypeScript compilation in accordance with Node's LTS schedule.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When an element is transferred to a different <div>, it does not automatically inherit its new CSS styles

There's an element with existing behavior that needs to be moved to meet new requirements without losing its original styles. The challenge is applying new styles to the element after it's been moved. For example: <div id="existingStructure" ...

Add an event listener ".on()" to a button that is dynamically generated

One of the buttons on my page is added dynamically using mustache. It has a specific class assigned to it, but when I try to click on it, the JQuery method does not get executed. This is what my HTML looks like initially: <div id="layout"></div&g ...

Exploring Apollo Client's invalidateQueries feature

React Query provides a functionality called invalidateQueries which allows us to designate cached data as outdated and triggers a refetch of related queries. Is there a similar feature available in Apollo Client? I currently have a list of entities that I ...

This error message is indicating that the 'csrf_token' property cannot be found within the 'Object' type

This is a straightforward query. I am attempting to set up a login system using Angular 5 for the front end and Drupal 8 for the backend. The connection is established successfully, I can send JSON data to the Drupal site, and it returns a CSRF token to m ...

Is there a way to have one element automatically expand when another is selected?

I'm currently utilizing the date and time picker from . However, I need some assistance with the current setup. Currently, the date and time pickers are in separate input fields. In order to select a date, I have to click on the Date input field, and ...

Navigational highlighting of current page section on a one-page website

I'm struggling with adding a navigation bar feature that will highlight the current section being viewed on my website. All I want is for the currently viewed section to appear bold in the navigation bar. Check out the codepen link: HTML <na ...

Using the increment operator within a for loop in JavaScript

this code snippet causes an endless loop for (let i = 0; ++i;) { console.log(i) } the one that follows doesn't even run, why is that? for (let i = 0; i++;) { console.log(i) } I want a thorough understanding of this concept ...

What is the most effective method for transforming a space-separated list of classes into a jQuery selector?

Is there a quick and efficient method for converting a space-separated list of classes like: classOne classTwo classThree into a selector such as: $('.classOne .classTwo .classThree') I am considering utilizing either a loop to construct a se ...

The button is unresponsive to the cssStyleDeclaration within the DOM

I've been grappling with a seemingly simple bug for over an hour and could really use a fresh perspective to help me identify the issue. In the code snippet below, I am attempting to change the style of two buttons. One button (deleteBtnToDecorate) r ...

How to insert text into a text input using onKeyPress in react.js

I am looking to simulate a typing effect where the phrase 'Surveillance Capitalism' is inputted letter by letter into a text input field as a user types. However, I encounter an issue when trying to add each individual letter into the input; I re ...

Changing images dynamically in tinymce using JavaScript

When using the tinymce editor, I attempt to modify my images. I currently have an image within it and I am trying to dynamically change the path of this image with: tinymce.activeEditor.selection.getNode().src = '/my/path/' Surprisingly, this m ...

Ways to make React detect a click event triggered by Jquery

I'm currently utilizing dabeng/OrgChart within a React application. The functionality I am looking to achieve is when a user clicks on a node, instead of Jquery populating an input box, I want React to save the selected node in state. I have attempte ...

The Firestore array.Union function was invoked with incorrect data, causing an error

My current challenge involves manipulating an array of objects, with the example being listOfExpenses = [{...}, {...}, {...}]. At present, this array is empty and I am looking to insert an object into it. The approach I have taken is as follows: const ch ...

Activate loading state when input changes with VueJS and Vuetify by using @change attribute and setting loading="true"

I am attempting to develop a function that is activated by the @change event on multiple input fields. My goal is to set loading="true" for the targeted input until the axios request (PATCH) is completed. PLEASE NOTE: There are several v-select componen ...

Tips for transferring variables in Ajax.BeginForm

Hi there! I am new to C # and I have a question about passing a string variable from C# to a function called PostFailure in JavaScript. The issue I'm facing is that the function seems to be returning some object and I am not sure where it is coming fr ...

Video streaming platform without the need for javascript and plugins

Is it feasible to watch Youtube videos without relying on javascript and plugins, exclusively using HTML5 or a similar alternative? ...

Issues persist with Google.Cloud.Firestore failing to store data in Firestore emulator

I am currently attempting to transfer data from my local environment (working on iis on my personal computer) to my Google Firestore emulator. The code is running without any errors appearing, but it appears that the data is not successfully being written ...

Error in Vue console: Uncaught TypeError - The variable "_ctx" is not defined on the specified value

I'm encountering an issue that is puzzling me: Everything seems to be working perfectly as I try to display data from an API. However, I keep getting an error stating that personnel.departmentID is undefined, and unfortunately my vue-debug tool isn&a ...

Utilize Bootstrap to showcase a collection of images when a button is clicked

How can I arrange a set of images in their correct locations based on the button that was pressed? I've seen examples of a single button switching between multiple images, but I'm struggling to implement multiple buttons that each display differe ...

Learning the basics of JavaScript: Displaying the last number in an array and restarting a function

Hey there, I'm diving into the world of JavaScript and have set myself a challenge to create a simple bingo number machine. Check out my CodePen project here. I've successfully generated an array of 20 numbers, shuffled them, and added a marker t ...