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

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.

CodePudding user response：

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.