How do you import a JSON file with VueJS / Typescript?

Question

I just created a clean VueJS new project and I can't get loading a JSON file to work.

Reproduction / Issue

For easy reproduction I've created a Github repo with my issue: https://github.com/devedse/VueJSImportJsonFile

In the Home.vue page I'm trying to get Json loading to work. (https://github.com/devedse/VueJSImportJsonFile/blob/master/src/views/Home.vue)

When you open this solution in VSCode the following line shows an error:

import theJson from '@/assets/hi.json';

Can't find module '@/assets/hi.json'

When running NPM Serve the following error pops up:

What I've already tried

I've already searched all of stackoverflow and tried everything in the following posts:

Importing json file in TypeScript

Typescript compiler error when importing json file

https://github.com/chybie/ts-json

Edit 1:

Ok I now managed to get it to work when running npm run serve by adding this to the tsconfig.json:

{
  "compilerOptions": {
    "resolveJsonModule": true
  }
}

However the error in VSCode seems to stay. Is there a way to fix this too?

wwerner · Accepted Answer · 2019-02-01 10:45:21Z

21

Simply add resolveJsonModule": true to your tsconfig.json under compilerOptions:

diff --git a/tsconfig.json b/tsconfig.json
index 499f5e2..a05dab1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,6 +6,7 @@
     "jsx": "preserve",
     "importHelpers": true,
     "moduleResolution": "node",
+    "resolveJsonModule": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,

edited Feb 1, 2019 at 10:45

answered Feb 1, 2019 at 10:13

wwerner

4,3271 gold badge24 silver badges39 bronze badges

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

Comments

Egor Konovalov · Accepted Answer · 2023-05-05 15:06:32Z

0

In your tsconfig.app.json config file add "src/**/*.json" in the list of patterns for the files to be included in compilation so it looks like this:

{
  "include": [
    "env.d.ts",
    "src/**/*",
    "src/**/*.vue",
    "src/**/*.json" <----- this
  ]
}

Source: https://www.typescriptlang.org/tsconfig#include

answered May 5, 2023 at 15:06

Egor Konovalov

771 silver badge9 bronze badges

Collectives™ on Stack Overflow

How do you import a JSON file with VueJS / Typescript?

Reproduction / Issue

What I've already tried

Edit 1:

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Reproduction / Issue

What I've already tried

Edit 1:

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related