How to fix angular yelling Should not import the named export... from JSON?

Question

I've seen this question pop up in multiple places, so sorry if this seems to be a copy. In angular I'm importing a JSON like import {domain, clientId} from '../../auth_config.json';

This was working until today, and after doing a npm install, it has stopped. I already have this in my tsconfig.json:

"compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noImplicitAny": false,
    "noFallthroughCasesInSwitch": true,    
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "paths": {
      "tslib": [
        "path/to/node_modules/tslib/tslib.d.ts"
      ]

I also saw others say to try importing as import * as auth from'../../auth_config.json'; and using auth.domain instead of domain. However Angular still throws the same error. I've also tried import {domain as d, clientId as c} from '../../auth_config.json'; with no such luck.

My Enviroment that throws the error:

import {domain, clientId} from '../../auth_config.json';
export const environment = {
  production: false,
  apiURL: 'http://localhost:5000',
  auth: {
    domain,
    clientId,
    redirectUri: window.location.origin
  }
};

The exact error I'm getting:

ERROR in ./src/environments/environment.ts 19:8-14

Should not import the named export 'domain' (imported as 'domain') from default-exporting module (only default export is available soon)


ERROR in ./src/environments/environment.ts 20:8-16

Should not import the named export 'clientId' (imported as 'clientId') from default-exporting module (only default export is available soon)

Using

import * as auth from '../../auth_config.json';
export const environment = {
  production: false,
  apiURL: 'http://localhost:5000',
  auth: {
    domain: auth.domain,
    clientId: auth.clientId,
    redirectUri: window.location.origin
  }
};

Gives this result:

ERROR in ./src/environments/environment.ts 22:16-27

Should not import the named export 'domain' (imported as 'auth') from default-exporting module (only default export is available soon)


ERROR in ./src/environments/environment.ts 23:18-31

Should not import the named export 'clientId' (imported as 'auth') from default-exporting module (only default export is available soon)

And Auth_config.json:

{
  "domain": "dev-beazcaxy.us.auth0.com",
  "clientId": "6Iewy037OUNolNG9Q7o...",
  "audience": "{API_IDENTIFIER}",
  "apiUri": "http://localhost:3001",
  "appUri": "http://localhost:4200",
  "errorPath": "/error"
}

The only thing that I found that I did not try was How to securely import version from package.json while respecting Error: Should not import the named export 'version'?, however, that seems to be for react. IDK if that is similar to how to do it in Angular or not.

Answer 1

The correct syntax is

import { default as auth } from '../../auth_config.json';

or just

import auth from '../../auth_config.json';

provided you have these two flags in tsconfig.json

    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true

---

Interestingly, this import works

import * as auth from '../../auth_config.json';

Until you try to index into a property

console.log(auth.domain);

this is what throws the error. It seems to be the way that the typescript compiler converts the json to a module, if we do

console.log(auth);

we see

Object { domain: Getter, clientId: Getter, audience: Getter, apiUri: Getter, appUri: Getter, errorPath: Getter, default: Getter, … }
?
__esModule: true
?
Symbol(Symbol.toStringTag): "Module"
?
<get apiUri()>: function key()?
<get appUri()>: function key()?
<get audience()>: function key()?
<get clientId()>: function key()?
<get default()>: function default()?
<get domain()>: function key()?
<get errorPath()>: function key()

notice the default getter. This explains the error message, because there is a default export, the compiler does not want us to call any other functions. This also explains the name of allowSyntheticDefaultImports.

We could access the object like this

console.log((auth as any).default.domain);

and that's essentially what the above syntax is doing.