6

Im my project, I would like to use

  • React app in Typescript hosted on Firebase hosting
  • Firestore
  • Firebase functions in Typescript

I face an error when deploying. It's easy to reproduce (Now skip firestore and firebase hosting initialization)

yarn create react-app sample-app
cd sample-app
firebase init
(select functions by marking a box interactively)
(select typescript by marking a box interactively)
(uncomment in functions/src/index.ts)

functions/src/index.ts is

import * as functions from 'firebase-functions';

// Start writing Firebase Functions
// https://firebase.google.com/docs/functions/typescript
export const helloWorld = functions.https.onRequest((request, response) => {
  functions.logger.info("Hello logs!", {structuredData: true});
  response.send("Hello from Firebase!");
});

Then deployment fails

firebase deploy

=== Deploying to 'myproject'...

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

> functions@ lint /Users/username/sample-app/functions
> tslint --project tsconfig.json

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

> functions@ build /Users/username/sample-app/functions
> tsc

../node_modules/@types/testing-library__react/index.d.ts:13:49 - error TS7016: Could not find a declaration file for module '@testing-library/dom'. '/Users/username/sample-app/node_modules/@testing-library/dom/dist/index.js' implicitly has an 'any' type.
  Try `npm install @types/testing-library__dom` if it exists or add a new declaration (.d.ts) file containing `declare module '@testing-library/dom';`

13 import { queries, Queries, BoundFunction } from '@testing-library/dom';
                                                   ~~~~~~~~~~~~~~~~~~~~~~

../node_modules/@types/testing-library__react/index.d.ts:16:15 - error TS7016: Could not find a declaration file for module '@testing-library/dom'. '/Users/username/sample-app/node_modules/@testing-library/dom/dist/index.js' implicitly has an 'any' type.
  Try `npm install @types/testing-library__dom` if it exists or add a new declaration (.d.ts) file containing `declare module '@testing-library/dom';`

16 export * from '@testing-library/dom';
                 ~~~~~~~~~~~~~~~~~~~~~~


Found 2 errors.

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! functions@ build: `tsc`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the functions@ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/username/.npm/_logs/2020-08-04T06_14_06_195Z-debug.log

Error: functions predeploy error: Command terminated with non-zero exit code2

Even after I did npm install @types/testing-library__dom in root and functions/, deployment fails.

and root directory has

ls
README.md     firebase.json functions     node_modules  package.json  public        src           tsconfig.json yarn.lock

Any idea welcome.

1
  • Can you push a reproduction of the problem to a git repository so we can debug?
    – abumalick
    Commented Aug 4, 2020 at 18:47

1 Answer 1

12

Can you try if this solution works for you?

https://stackoverflow.com/a/49309428/1673761

add this line to tsconfig within the functions folder:

{                                                                                       
  "compilerOptions": { 
    ...
    "typeRoots": [
      "node_modules/@types",
    ],
    ...
}

This is part of "compilerOptions" block worked for me

3
  • Thank you so much, you save my time. Just out of curiosity, how did you find it?
    – Watanabe.N
    Commented Aug 5, 2020 at 15:38
  • 1
    You are welcome! When the types are there and they are not detected, it is usually a problem in tsconfig.json. It is a bit difficult to set up correctly in my opinion. Actually I cannot remember if I searched on google or if I saw the link in the related questions on the right of this page.
    – abumalick
    Commented Aug 6, 2020 at 7:32
  • Thank you! I just started to write typescript a week ago now I understand better thanks to you!
    – Watanabe.N
    Commented Aug 7, 2020 at 0:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.