import json in javascript doesn't seem to succeed - json

Question

In a firebase functions project I want to have some settings in a settings.json and then import the settings in my typescript files. For some reason, the import doesn't seem to succeed and I can't see or figure out why.
My folder/file structure looks like this:
src
- database
- index.ts <-- only exports uppercase.ts
- uppercase.ts
- regions.ts
In uppercase.ts I import regions.ts to use the functions object with the configuration to deploy on europe-west1.
import { functionsEUWest1 } from '../regions';
export const uppercase = functionsEUWest1.database.ref('/messages/{pushId}/original').onCreate((snapshot, context) => {
//Code as can be found in the tutorials of firebase.
});
In the regions, I try to read the settings from settings.json to use for the configuration.
import functions from 'firebase-functions';
import settings from "./settings.json";
const region: any = settings.region;
export const functionsEUWest1 = functions.region(region);
And this is the content of settings.json
{
"region": "europe-west1"
}
The folder/file structure of the build output is the same (only in lib instead of src but this is by default configured by firebase).
When I try to deploy my functions, I get the following error:
Error: Error occurred while parsing your function triggers.
TypeError: Cannot read property 'region' of undefined
at Object.<anonymous> (<local basepath>\functions\lib\regions.js:9:57)
at Module._compile (module.js:653:30)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (<local basepath>\functions\lib\database\uppercase.js:3:19)
at Module._compile (module.js:653:30)
When I look into the build output in the file regions.js, I can't detect any rarity of transpiled code:
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const firebase_functions_1 = __importDefault(require("firebase-functions"));
const settings_json_1 = __importDefault(require("./settings.json"));
const region = settings_json_1.default.region;
exports.functionsEUWest1 = firebase_functions_1.default.region(region);
//# sourceMappingURL=regions.js.map
Also the settings.json is copied to the build location and is in the same folder as regions.js. Yet the property default from setting_json_1 is undefined and I can't figure out what goes wrong.
Edit
I added 2 settings to the tsconfig.json. I did this cause it was advised in several articles I found:
"resolveJsonModule": true,
"esModuleInterop": true

Answer 1

After some more research I came up later on, I figured out it wasn't the json import that didn't seem to work, but it looks like the setting
"esModuleInterop": true
doesn't seem to work together with firebase or perhaps more specific: firebase functions, for so far as I can see and conclude.
The research to the conclusion
First I wanted to figure out if import in TypeScript does work at all, so I created 3 .ts files and one .json file and one of the .ts files I put in a folder. Then I generated the tsconfig.json with
tsc --init
and I added the 2 settings (resolveJsonModule and esModuleInterop). I transpiled the .ts files to .js files and ran the code with node. And this works, I saw the setting value from the .json file printed in the console.
The .ts file that imported the .json file has these lines of code:
import settings from "./settings.json";
console.log('from test.ts: ' + settings.setting1);
export const Settings = settings;
This got transpiled to:
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var settings_json_1 = __importDefault(require("./settings.json"));
console.log('from test.ts: ' + settings_json_1.default.setting1);
exports.Settings = settings_json_1.default;
Now, I don't understand this code completely because I don't know what __importDefault or mod are.
But this code along with the other code does do what it suppose to do: read the setting from the .json file and print it in the console. So importing .json files does work. So it got to do something with firebase.
The next step I did, was creating a clean firebase project which uses functions and hosting. In the by the firebase CLI genrated index.ts in the functions/src folder, I changed the code to this:
import functions from 'firebase-functions';
import settings from "./settings.json";
const setting1 = settings.setting1;
export const helloWorld = functions.region('europe-west1').https.onRequest((request, response) => {
response.send("Hello from Firebase! Settings1 value = " + setting1);
});
And I also added the same 2 settings to tsconfig.json (resolveJsonModule and esModuleInterop). When I try to deploy this function to the firebase cloud, I got an error that is the same as I mentioned in my Question post:
TypeError: Cannot read property 'region' of undefined
But this time, I didn't had a property region in my .json file. So the fact I had region in my code in the question post and the fact I didn't look at the line numbers of the stacktrace, mislead me, making me think the .json import didn't work. But it is working.
The cause of the error is the method region that is called on the firebase_functions_1.default. For some reason, default is undefined and that is generating the error. This made me also realise I really miss the name of the object or objects in the error. What I would like to see is something like
TypeError: Cannot read property 'region' of undefined (firebase_functions_1.default)
So, back to the problem, I still got the error, but it wasn't cause by the .json import. To figure out what the actual cause was, I first reverted the "esModuleInterop" setting in the tsconfig.json, which results in errors in the import section in my index.ts. I had to change the imports back to
import * as functions from 'firebase-functions';
import * as settings from "./settings.json";
And now, the deploy to the firebase cloud works again, with importing a .json file. Also, the transpiled code looks different without using the "esModuleInterop" setting:
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const functions = require("firebase-functions");
const settings = require("./settings.json");
const setting1 = settings.setting1;
exports.helloWorld = functions.region('europe-west1').https.onRequest((request, response) => {
response.send("Hello from Firebase! Settings1 value = " + setting1);
});
//# sourceMappingURL=index.js.map
It no longer has the default property on firebase_functions_1 but instead now just has functions.

Answer 2

It depends on some of your build and tsconfig settings. I've seen the above working for some people, where it uses the default export. But for me (Webpack with json-loader) this is what I use to import JSON files:
import * as settings from "./settings.json";
And of course, in my case, I add a definition like so to my global.d.ts file:
declare module "*.json";
Just so TS won't complain about it.