Error - Should not import the named export

Question

I have updated my Angular project to version 12.0.5 and Typescript version to 4.3.4 and I am having trouble compiling the project.

Currently I get the following error without having made changes to the branch:

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

This is the import:

import { ApiService, Municipality, Province } from '../../services/api.service';

And this is how I declare the variables that depend on the import Province:

public provinces: Province[] = [];
  private currentPorvince: Province;

What is the problem? Why is this happening and how can I solve it?

Kenweigh

Does this answer your question? Importing JSON file in TypeScript – Aeschines

Answer 1

I was able to resolve this by following the steps outlined here: https://www.codegrepper.com/code-examples/javascript/read+json+file+in+typescript (which in turn references a SO post: Importing JSON file in TypeScript)

Basically, you have to add the following to your tsconfig.json file (I added it to my root tsconfig.json file since everything else inherits from it):

"resolveJsonModule": true,
"esModuleInterop": true,

Then you can use default importing to name the class:

import { default as data } from '../../services/api.service';
data.provinces

Aeschines

Answer 2

Using an intermediate variable seems to work for me with Angular 12.2.5:

import * as data from 'path/to/file.json'

let intermediateJson = data
//make it crash: console.log(data.property)
console.log(intermediateJson.property)

Esse

Answer 3

I had the same problem after upgrading to Angular 12.1.1

The JSON file was structured as a single object so I changed it to an array of objects and fixed the error for me.

Polynesia

How can I do that? You mean the tsconfig.json file? – Kenweigh

Answer 4

Completing the answer from afm215, this is what I had to do in order to make the app run and the spec test file work successfully:

import * as deMessages from 'devextreme/localization/messages/de.json';
...
@Component({
  selector: 'dkl-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, OnDestroy {
...
constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private translationService: TranslationService,
  ) {
    // Use the intermediate variable
    const messages = deMessages;
    loadMessages({ de: messages.de }); // Here I used to have the problem
    ...
  }
}

So thanks afm215!!

Big