Firebase Emulator - "Looks like you've written your code in Typescript"

I'm currently working on an angular/fire project and attempting to set up cloud functions emulation. The functions folder is located in the root project directory. After running npm run build inside the functions folder without any errors, I proceed to execute the command

firebase emulators:start --only functions

However, I encounter the following error:

⚠  /Users/{{user}}/{{project}}/functions/src/index.ts:1
export {basicHTTP, api} from "./http";
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at initializeRuntime (/usr/local/lib/node_modules/firebase-tools/lib/emulator/functionsEmulatorRuntime.js:640:29)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
⚠  We were unable to load your functions code. (see above)
   - It appears your code is written in Typescript, which must be compiled before emulation.
   - You may be able to run "npm run build" in your functions directory to resolve this.

This is a typescript project, so it's puzzling as to why firebase does not recognize that.

Below is my eslintrc.js configuration:

module.exports = {
  root: true,
  env: {
    es6: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx"],
      "parserOptions": {
        "project": ["./tsconfig.json"],
      },
    },
  ],
  "parser": "@typescript-eslint/parser",
  ignorePatterns: [
    "/lib/**/*",
  ],
  plugins: [
    "@typescript-eslint",
    "import",
  ],
  rules: {
    "quotes": ["error", "double"],
    "import/no-unresolved": 0,
    "max-len": 0,
    "comma-dangle": 0,
    "require-jsdoc": 0
  },
};

Additionally, here is the tsconfig.json file within the functions folder:

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "outDir": "lib",
    "sourceMap": true,
    "strict": true,
    "target": "es2017"
  },
  "compileOnSave": true,
  "include": [
    "src/**/*"
  ]
}

If anyone has insights into why firebase doesn't acknowledge this as a typescript project and suggestions for resolving this issue, please share your thoughts!

Answer №1

After making a simple adjustment in the package.json file, I successfully resolved the issue by updating the reference from "src/index.ts" to "lib/index.js".

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

On production, Heroku fails to load JavaScript files, only allowing CSS files to be loaded. However, the files load successfully when

I've been struggling to find a solution to my problem, so I'm reaching out for some help. I am in the process of deploying my node (express) app to Heroku, but I've encountered an issue where only CSS files from my public folder are being t ...

The JSX component is unable to utilize the object

When working with Typescript in a react-three-fiber scene, I encountered an error that GroundLoadTextures cannot be used as a JSX component. My aim is to create a texture loader component that loads textures for use in other components. The issue arises f ...

Why are other elements not appearing on the index.html page when <app-root> is not included?

Just started delving into Angular and following some tutorials. The project was set up using Angular CLI. Created a new component named navbar on top of the default component and wanted to check if the navbar loads in the index.html at startup. The navbar ...

Running 'ionic serve' is successful, but encountering building errors

While attempting to transpile for Ionic build, it encountered a failure with the following message: [09:56:34] build dev failed: Maximum call stack size exceeded. The ionic serve task displays a message when executed, but triggering a new transpile thr ...

Tips for managing and identifying canceled requests in an Angular HTTP interceptor

Having trouble handling cancelled requests in my http interceptor. Despite trying various methods from SO, I can't seem to catch it. Here is an example of how my interceptor looks: public intercept(req: HttpRequest<any>, next: HttpHandler) { ...

The Ion-item-option button requires two clicks to activate

Within my ion-list, I have sliding items that are dynamically created using a for loop. Interestingly, when clicking on an item to navigate to another page, everything works fine. However, upon sliding an item, a button is revealed but it requires two clic ...

TS will not display an error when the payload is of type Partial

Why doesn't TypeScript throw an error when making the payload Partial? It seems to only check the first value but not the second one. type UserState = { user: User | null; loading: boolean; error: Error | null } type UserAction = { type: type ...

Accessing an external API through a tRPC endpoint (tRPC Promise is resolved before processing is complete)

I want to utilize OpenAI's API within my Next.js + tRPC application. It appears that my front-end is proceeding without waiting for the back-end to finish the API request, resulting in an error due to the response still being undefined. Below is my e ...

Creating an NPM package using TypeScript for a JSPM application

I find myself facing a similar question to the one posed here: My NPM Package, typed-lexer, includes a d.ts file and its corresponding entries in the package.json file. When I consume this package in a regular node.js app using npm install and tsc --init, ...

Collaborate on Firestore collection paths between administrators and web users

Seeking a solution to create reusable functions that can access Firestore Document/Collection references in both web and admin (node.js) environments. For instance: getUserDocumentReference(company: string, user: string) { return firebase.collection(&qu ...

Having trouble with the setRoot() function not working properly in IONIC 3 after dismissing a modal menu. Any suggestions for a solution

Here is the code snippet I am using to display a modal from the HomePage. import { SignaturePage } from '../signature/signature' import { NavController, NavParams, ModalController } from 'ionic-angular'; @Component({ selector: &apo ...

What could be causing the ngOnInit() method to execute before canActivate() in this scenario

When working with route guards, I am using the canActivate() method. However, I have noticed that Angular is triggering the ngOnInit() of my root AppComponent before calling canActivate. In my scenario, I need to ensure that certain data is fetched in the ...

Retrieve the values of a function using the Firebase database

Hey, I'm in a bit of a pickle trying to retrieve the values returned by my function. I can see them just fine in the console log, but how do I actually access them when calling the function? function getprofile(useruid) { return firebase.database ...

"Enhance your Vue 3 project with TypeScript and take advantage of smart template suggestions

Is it feasible to enable autocompletion/suggestions in the template section of a Single File Component (SFC) when using VS Code with Vue 3 and Typescript, particularly for component props? For instance, consider a basic component named UserComponent: < ...

Is Angular capable of determining which module to load for the frontend, or does it always need to load the entire application with all modules?

Is it possible for Angular 2 to selectively load specific modules for the frontend, or does it always have to load the entire application with all modules included? ...

What is the process for transforming a JSON object into a TypeScript interface?

After receiving a JSON output from an api: { "id": 13, "name": "horst", "cars": [{ "brand": "VW", "maxSpeed": 120, "isWastingGazoline": true ...

How can I implement sending FCM Push Notifications at a 3-hour interval using Node.js?

I'm facing a challenge in sending push notifications to users who were active on our platform yesterday. I want to send these notifications once every morning, but I'm struggling with creating an automated process that sends messages every 4 hour ...

Should the getDownloadURL() from Firebase Storage be regenerated every time, or can it be reused?

Should I store and reuse the URL received from angularfire2's getDownloadURL() in the database instead of calling getDownloadURL() every time I want to show an image from Firebase Storage? Whenever I use getDownloadURL() in my component, the images a ...

Updating the Angular2 function in the main app component causes the current component to be reset

I developed an application that has the following structure: app.component.ts import { Component } from 'angular2/core'; import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router'; import { NgClass } from &apos ...

Angular 6 is showcasing dates in a quirky manner

In my Angular app, users can enter comments. The comments are displayed automatically with the date they were added. However, there is an odd behavior that I've noticed: When a user enters a comment, the time displayed is incorrect. (Check the ...