Tslint: No way to import JSON files without errors

[Tomino2112]

Bug Report

• TSLint version: 3.10.2
• TypeScript version: 1.8.10
• Running TSLint via: JetBrains IDE
  

  TypeScript code being linted

let mainSame: any = require("./main_same.json");

Actual behavior

no-var-requires rule is triggered when importing json file

Expected behavior

Import of JSON files should be possible without errors. At the momnt we have two choices, either do import config = require("./config.json") which triggers "No module found" or above which triggers tslint error.

[adidahiya]

For now the best way around this is an inline disable flag:

/* tslint:disable-next-line:no-var-requires */
let mainSame: any = require("./main_same.json");

I think we'd be open to a new rule option which allows require() when the module identifier ends in ".json", maybe call it allow-json-file

[aluanhaddad]

This will be fixed in the next version of typescript which includes the ability to declare wildcard modules. For example if you have the following declaration

declare module '*.json' { export default '' as any; }

then

import mainSame = require("./main_same.json");

will not produce compiler errors.
microsoft/typescript#6615
microsoft/typescript#2709

[ajafff]

Closing this because you no longer need require to import json files (see comment above).
In addition #3392 tracks adding ignore patterns to no-var-requires and no-require-imports

[maximvl]

Hello, this doesn't work for me:

declare module '*.json' { export default '' as any; }
import HeroCollection = require('./json/heroes.json');

produces

ERROR in /home/maxim/apps/app/src/App.vue
10:16 Cannot find module '*.json'. Consider using '--resolveJsonModule' to import module with '.json' extension
     8 | <script lang="ts">
     9 | 
  > 10 |  declare module '*.json' { export default '' as any; }
       |                ^
    11 |  import HeroCollection = require('./json/heroes.json');
    12 | 
    13 |  /* import * as HeroCollection from './json/heroes.json'; */
ERROR in /home/maxim/apps/app/src/App.vue
10:42 The expression of an export assignment must be an identifier or qualified name in an ambient context.
     8 | <script lang="ts">
     9 | 
  > 10 |  declare module '*.json' { export default '' as any; }
       |                                          ^
    11 |  import HeroCollection = require('./json/heroes.json');
    12 | 
    13 |  /* import * as HeroCollection from './json/heroes.json'; */
ERROR in /home/maxim/apps/app/src/App.vue
11:1 Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.
     9 | 
    10 |  declare module '*.json' { export default '' as any; }
  > 11 |  import HeroCollection = require('./json/heroes.json');
       | ^
    12 | 
    13 |  /* import * as HeroCollection from './json/heroes.json'; */
    14 |  /* import HeroesCollection from './json/heroes.json'; */
ERROR in /home/maxim/apps/app/src/App.vue
11:33 Cannot find module './json/heroes.json'. Consider using '--resolveJsonModule' to import module with '.json' extension
     9 | 
    10 |  declare module '*.json' { export default '' as any; }
  > 11 |  import HeroCollection = require('./json/heroes.json');
       |                                 ^
    12 | 
    13 |  /* import * as HeroCollection from './json/heroes.json'; */
    14 |  /* import HeroesCollection from './json/heroes.json'; */