Load JSON file in vue.js with Typescript

Question

I've created a vue.js with typescript app using vue-cli 3 and selecting the typescript option.

Now I'm trying to import a .json file:

import * as config from './config.json';

But keep getting the compiler error:

Version: typescript 
2.7.17:25, tslint 5.9.1 
Cannot find module './config.json'.

The config.json file is right next to the .ts that is trying to load it.

Is there any additional config I need to add to load .json with the vue-cli templates?

Nurpeyis Kalbekov · Accepted Answer · 2020-05-01 17:39:08Z

6

Add "resolveJsonModule": true to your tsconfig.json

answered May 1, 2020 at 17:39

Nurpeyis Kalbekov

611 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kingdaro · Accepted Answer · 2018-02-17 01:56:06Z

5

There are a few ways to solve this. One would be to use require() instead of import for non-js files:

const config = require('./config.json')

You can also create a .d.ts file with a wildcard module declaration (under "Wildcard module declarations") which will allow you to import JS files. You can put it anywhere, including it the same as you would any .ts file.

// json-module.d.ts
declare module '*.json' {
  const data: any
  export default data
}

// since we use a default export, we now import it like this
import config from './config.json'

answered Feb 17, 2018 at 1:56

kingdaro

12.1k3 gold badges37 silver badges38 bronze badges

Collectives™ on Stack Overflow

Load JSON file in vue.js with Typescript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related