`import './file.json'`: This module is declared with using 'export ='

In short, JSON files’s implied type definition is always defined via export =, even if I’m using module: es2015, causing it to error unless I use an unnecessary flag (allowSyntheticDefaultImports)

TypeScript Version: 3.9.0-dev.20200326

Search Terms:

import require json module commonjs es2015

Code

import list from "./list.json";

for (const item of list) {
	console.log(item)
}

{
	"compilerOptions": {
		"outDir": "distribution",
		"target": "es2017",
		"module": "es2015",
		"moduleResolution": "node",
		"resolveJsonModule": true,
		"strict": true
	},
	"files": [
		"index.ts"
	]
}

Expected behavior:

list is of type string[]

Actual behavior:

index.ts:1:8 - error TS1259: Module '"./list"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

1 import list from "./list.json";
         ~~~~

  list.json:1:1
    1 [
      ~
    This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.


Found 1 error.

Workaround:

1. allowSyntheticDefaultImports: true works as expected, but that flag is unsafe and I don’t want (need) to use it.

```ts
declare module './list.json' {
	const list: string[];
	export default list;
}
```

Playground Link: repro.zip

Related Issues: https://github.com/microsoft/TypeScript/issues/15146

[teppeis]

In ECMAScript, importing JSON will be implemented with JSON modules (stage 2) based on Import Assertions (stage 3).

import json from "./foo.json" assert { type: "json" };
import("foo.json", { assert: { type: "json" } });

In TypeScript: Implement Import Assertions (stage 3) · Issue #40694 · microsoft/TypeScript

[fregante]

I had to do some research:

• The spec doesn’t seem to support loading JSON files yet, can’t find any mentions of it
• Firefox 74 errors out with:

  Loading module from “./package.json” was blocked because of a disallowed MIME type (“application/json”)

• Node 13 supports it experimentally

  When the --experimental-json-modules flag is included both the commonjs and module mode will use the new experimental JSON loader. The imported JSON only exposes a default, there is no support for named exports.

  import packageConfig from './package.json';
  

  Sadly the WHATWG link in Node’s docs is a gone from the spec
• Rollup supports it with a plugin

  import pkg from './package.json';
  console.log(`running version ${pkg.version}`);
  

• Webpack maps it to a require, so import list from './list.json works as expected
• Browserify doesn’t support ES Modules, but I assume that the esm module does what Webpack does.

Ultimately, I think that TypeScript’s behavior is correct since import './file.json' is technically invalid, even though experimentally supported in some places.

The right flag to enable support (at the moment) seems to be allowSyntheticDefaultImports — it makes TS work and it generates invalid code, as expected.