Vetur: Importing json files as modules produces error

[marius815]

• [x] I have searched through existing issues
• [x] I have read through docs
• [x] I have read FAQ

Info

• Platform: Linux
• Vetur version: 0.14.3
• VS Code version: 1.29.1

Problem

When trying to import json files in *.vue files even with resolveJsonModule set to true in tsconfig.json produces a Cannot find module <file>.json error. This does not apply to *.ts files anywhere in the project. The code runs just fine when starting the server.

Reproducible Case

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "jsx": "preserve",
    "module": "esnext",
    "moduleResolution": "node",
    "noUnusedLocals": true,
    "outDir": "./dist",
    "paths": {
      "~~/*": ["./*"],
      "@@/*": ["./*"],
      "~/*": ["./src/*"],
      "@/*": ["./src/*"]
    },
    "resolveJsonModule": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext",
    "typeRoots": [
      "./node_modules/@types"
    ]
  },
  "exclude": [
    ".nuxt",
    "node_modules"
  ]
}

SFC

<template>
  <div></div>
</template>

<script lang="ts">
import pkg from "~~/package.json";
import Vue from "vue";

export default Vue.extend({
  data() {
    return {
      pkg: pkg
    };
  }
});
</script>

<style></style>

[vjcagay]

Confirmed. Cannot find module <file>.json occurs on .vue files but is okay on .ts files. Also compiling the code is totally fine. So most probably a Vetur bug.

[wahidrahim]

You need to declare json files as a module

declare module '*.json' {
    const value: { [key: string]: any }
    export default value
}

[octref]

@wahidrahim Is right. Same for vue files, too.

https://github.com/Microsoft/TypeScript-Vue-Starter#single-file-components

[nilptr]

I get the same issue in Vetur v0.29.0 (VSCode v1.50.1, macOS), and @wahidrahim's solution doesn't work.

I agree with @vjcagay . import data from 'xxx.json' works well in .ts file, but not in .vue file. And the compilation process does not generate this error.

Besides, since resolveJsonModule option allows for importing, extracting types from and generating .json files, it is better not to ask user to perform additional steps to work around this issue.

[yoyo930021]

I get the same issue in Vetur v0.29.0 (VSCode v1.50.1, macOS), and @wahidrahim's solution doesn't work.

I agree with @vjcagay . import data from 'xxx.json' works well in .ts file, but not in .vue file. And the compilation process does not generate this error.

Besides, since resolveJsonModule option allows for importing, extracting types from and generating .json files, it is better not to ask user to perform additional steps to work around this issue.

Ha, This option is support in vetur.
You need to keep tsconfig.json in open project root.
And then try to restart Vue language server or restart VSCode.

[nilptr]

@yoyo930021 You are right, my tsconfig.json is in the subproject directory of open project. When I moved tsconfig.json to open project root, this error went away.

Thanks for your reply!