[FIXED] Why are node modules working on firebase emulator but not working post deployment?

Issue

I am using intl-tel-input in my project which I installed using npm. Every thing seems to work fine when I test using Firebase emulators but it stops working post deployment.

Upon checking the Sources tab in Chrome dev tools, I can see that the module is not properly included. (Pls check images) However, I am completely unable to figure out why. Please help!

Emulator Screenshot with the Telephone Input field working fine.

Screenshot taken post deployment with the Telephone input field broken.

Source File - intlTelInput.js located at /node_modules/intl-tel-input/build/css/intlTelInput.js

Source File - intlTelInput.css located at /node_modules/intl-tel-input/build/js/intlTelInput.css

Solution

By default Firebase ignores node_modules directories when deploying.

There are a few options you could use to resolve this.

1. Use a build tool like Rollup or Webpack to generate bundles that include node dependencies.
2. Copy required node_modules files to a different directory like assets and load them from there.
3. Update firebase.json to not ignore node_modules on deploy. Note that this will probably greatly increase the size of deployed applications if you have any number of node packages.

Answered By - abraham

Answer Checked By - Gilberto Lyons (PHPFixing Admin)