Firebase-functions: index.ts isn't mapping to index.js

[paujur]

Version info

firebase-functions: 1.0.1

firebase-tools: 3.19.1

firebase-admin: 5.12.0

Changes in index.ts are not mapping to index.js during deployment. They were mapping at first, but at some point stopped. The function that gets deployed from index.js therefore has no changes, so there are no errors in terminal and everything seemingly deploys correctly, but the function never gets updated.

Here is the successful deployment of sendMessage: https://cl.ly/0T1B2M3R103z

Here is the top of the function inside index.ts, after deployment: https://cl.ly/1E0k3O1E3m2M

And here is the top of the function inside index.js, after deployment: https://cl.ly/0b3i3Q1X3j2R

Any thoughts?

[laurenzlong]

What does your firebase.json look like?

[paujur]

{ "functions": { "predeploy": [ "npm --prefix \"$RESOURCE_DIR\" run lint", "npm --prefix \"$RESOURCE_DIR\" run build" ] } }

[laurenzlong]

Can you manually run "npm run build" inside your functions folder? If that leads to errors that means you have issues in your functions/package.json in the build script.

[paujur]

Looks like it runs just fine manually.

[chatter]   npm run build                                                                                                                     

> [email protected] build ../chatter/chatter
> ng build


Date: 2018-07-03T20:31:54.158Z
Hash: 22459d2de3a4db0863e2
Time: 15373ms
chunk {main} main.js, main.js.map (main) 76.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.4 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 292 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 5.67 MB [initial] [rendered]

[laurenzlong]

What platform are you running and give you give me the output of you running "firebase deploy --only functions"?

[paujur]

I'm running on the newest version of Angular.

firebase deploy --only functions                                                                                                 

=== Deploying to 'chatter-60e80'...

i  deploying functions
Running command: npm --prefix "$RESOURCE_DIR" run lint

> functions@ lint /Users/pauljurczyk/Dev_Collective/chatter/chatter/functions
> tslint --project tsconfig.json

WARNING: /Users/pauljurczyk/Dev_Collective/chatter/chatter/functions/src/index.ts[2, 1]: All imports on this line are unused.
WARNING: /Users/pauljurczyk/Dev_Collective/chatter/chatter/functions/src/index.ts[23, 7]: 'firebaseConfig' is declared but its value is never read.

Running command: npm --prefix "$RESOURCE_DIR" run build

> functions@ build /Users/pauljurczyk/Dev_Collective/chatter/chatter/functions
> tsc

✔  functions: Finished running predeploy script.
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (57.16 KB) for uploading
✔  functions: functions folder uploaded successfully
i  functions: updating function sendMessage...
✔  functions[sendMessage]: Successful update operation. 

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/chatter-60e80/overview

[paujur]

@laurenzlong Alrighty... I think I figured out the bug you guys have. Was literally about to give it up, and ended up trying one last thing. Maybe I wasn't supposed to be importing custom types into functions, but I did.

import { Message } from '../../src/app/shared/model/message';

This was the issue. It prevented index.ts to be mapped to index.js, even though everything seemed to deploy accordingly.

Once the import was removed, everything started to map and deploy properly.

[laurenzlong]

Glad you figured it out! Yes that would explain it, but that's actually expected TypeScript behavior. The current import statement is causing TypeScript to be confused about the root folder for compiling (for the default set up to work, all TS files should be in src/ and only those files should be compiled and JS files should be saved to lib/. You can configure package.json to behave differently if you'd like, but I won't dive into that right now).

It'll probably work if you change the import to:

import { Message } from '../app/shared/model/message';

(I'm assuming that the file you're putting this line in is in a subfolder in the src/ folder, otherwise adjust the relative path accordingly. You just don't want to reference src/.)

Closing this ticket now. Thanks for the update!

[paujur]

Thank you! Yeah... figured I was being an idiot haha. Appreciate the help :)

[sserdyuk]

@laurenzlong I came across this ticket while research a solution to the same problem with my project. Would you be able to show a best practices example on how to have a shared folder at the project root level and have it hold types and business logic for both Firebase functions and the client angular project. Here's the directory structure I am going after, where /shared-src would hold shared code, and functions/lib/shared-src would receive js files after npm run build

├── dist
│   └── revenue-matters
├── e2e
│   └── src
├── functions
│   ├── lib
│ │   ├── concerns
│   │   └── shared-src
│   └── src
│   └── concerns
├── shared-src
│   └── types
└── src
├── app
│   ├── guards
│   ├── models
│   ├── services
│   └── test
├── assets
└── environments

[siebmanb]

Thanks a lot @paujur for pointing me in the right direction. I had the same issue a year ago and again today, took me hours to understand because there is no error logged anywhere... How can we make sure that does not happen in the future?

[ebenezerdon]

This just helped me. It will be awesome if the compiler throws up an error or somehow gives us a warning.