Import {version} from '../../package.json' broken in Angular v12 due to webpack 5

[pranav-js]

Bug Report

Affected Package

The issue is caused by Angular version 12.0

Is this a regression?

Yes, the previous version in which this bug was not present was: ....

Description

Earlier for sentry I had
import { version } from 'package.json';

in app.module.ts and in tsconfig.json "resolveJsonModule": true, but I ran today ng update commands for angular 12 migration and this broke gives error as below

Minimal Reproduction

https://stackblitz.com/...

Exception or Error

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

Your Environment

Angular Version:

Angular CLI: 12.0.0
Node: 14.16.1
Package Manager: npm 6.14.12
OS: darwin x64

Angular: 12.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.0
@angular-devkit/build-angular   12.0.0
@angular-devkit/core            12.0.0
@angular-devkit/schematics      12.0.0
@angular/cdk                    11.2.9
@angular/material               11.2.9
@schematics/angular             12.0.0
rxjs                            6.6.7
typescript                      4.2.4

Anything else relevant?

[vdumbrav]

Try

import pkg from '../../package.json';

let version = pkg.version

https://webpack.js.org/migrate/5/#using-named-exports-from-json-modules

[pranav-js]

@vdumbrav thanks man it worked 👍🏼

I had to additionally include

"allowSyntheticDefaultImports":true, in tsconfig.json

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}