1

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.

calebhk98
  • 157
  • 1
  • 4
  • 15
  • `import * as auth from'../../auth_config.json';` or `import auth from'../../auth_config.json` are correct. If it throws an error, I doubt it is the same error. If it doesn't work, please show what your code looks like when you try it, and what error you are getting. – Chris Hamilton Apr 11 '22 at 07:15
  • @ChrisHamilton I added what happens when I use * as auth. Does that help? – calebhk98 Apr 11 '22 at 14:15
  • try `import { default as auth } from '../../auth_config.json';` Could you also include what version of angular you're using? – Chris Hamilton Apr 11 '22 at 20:12
  • I'm using Angular: 13.3.2, as well as Angular CLI: 13.3.2 Node: 16.14.2 Package Manager: npm 8.5.0. Weird, that import does work. If you can put that as an answer, I'll close this question. – calebhk98 Apr 11 '22 at 21:47

2 Answers2

5

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.

Chris Hamilton
  • 9,252
  • 1
  • 9
  • 26
0
import { default as auth } from '../../auth_config.json';

this was what worked for me

Ovindu
  • 11
  • 2