2

I'm trying to import a static .json file in the <script> section of a .Vue file like so import Test from '@assets/test.json'

Based on what I've read about webpack, this should work out of the box. I've also tried explicitly defining both the .json extension in webpack resolve and the json loader under loaders.

However, for me it fails with the error: 

ERROR  Failed to compile with 1 errors                                                                                                                                                                                                     9:14:24 AM

This dependency was not found:

* @assets/test.json in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Settings.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save @assets/test.json

That seems to be strange as it's not a dependency I'd be able to install?

My test.json file just contains {}, but I've also tried it with the real data file and the same outcome.

Thanks in advance for any help.

Edit: Thanks to @tao for helping me figure it out on chat. The error was indeed trivial: import Test from '@assets/test.json' should have been import Test from '@/assets/test.json'

ninetynine
  • 327
  • 2
  • 10
  • Does this answer your question? [Importing json file in TypeScript](https://stackoverflow.com/questions/49996456/importing-json-file-in-typescript) – VPaul Apr 12 '20 at 23:36
  • Is vuejs using typescript by default? I'm haven't explicitly set it up that way. I did try @tao's answer below, but that didn't seem to help. If vuejs is using typescript by default I'll have a lot more reading up to do! – ninetynine Apr 12 '20 at 23:41
  • It doesn't use typescript by default. It depends on your project setup. You get asked a few questions when you create it, one of them being if you want typescript support and class components. Do your components have `lang="ts"`? – tao Apr 12 '20 at 23:49
  • No, that's not the case. If that helps, `npm list vue` gives me `vue@2.6.11` – ninetynine Apr 12 '20 at 23:52

1 Answers1

2

For typescript support you have to add 

"resolveJsonModule": true,

to compilerOptions in tsconfig.json.

And add

declare module '*.json' {
  const value: unknown;
  export default value;
}

to your shims-vue.d.ts

In Javascript, you don't need to do anything special. This should work:

test.json:

{
  "foo": "bar"
}

Your *.vue SFC file:

<script>
import * as json from './test.json';

export default {
  data: () => ({
    json
  }),
  mounted() {
    console.log(this.json)
  }
}
</script>
tao
  • 82,996
  • 16
  • 114
  • 150
  • Hi @tao, thanks a lot for your help—is Vue actually using typescript under the hood? I've tried creating the files you and the comment above mentioned but without success. Sorry if my question is naive—I'm pretty new to vuejs/js in general and this is a little "learning-by-doing" project, but this issue has me pulling my hair out! – ninetynine Apr 12 '20 at 23:50
  • No, Vue 2 doesn't use typescript "under the hood", unlike Vue 3, which is. But Vue 2 does come with typescript support and, depending on what you cloned or how you created the project (and judging from your error), you seem to have it enabled. Do your components script tags have `lang="ts"`? – tao Apr 12 '20 at 23:52
  • Are you getting any errors in console? Is your json valid? – tao Apr 13 '20 at 00:08
  • @nine, btw, you can always import any data from a `.js` file, provided you wrap your json contents into `export default {/*json here*/ }` and `import * as json from './test'`. But it really ***should*** work from `.json` as well. – tao Apr 13 '20 at 00:11
  • Thanks—I was considering that as a workaround (or just loading from an external URL), but wanted to figure out how to do it the proper way so I understand what the error was and why it was happening :) – ninetynine Apr 13 '20 at 00:17
  • My wild guess is there's something else breaking your component. Have you checked your console for any errors? – tao Apr 13 '20 at 00:19
  • Yep, if I don't take the statement out it won't even serve the site (I'm using Webstorm). If I do take it out it works fine until the point where I need the data. ;) – ninetynine Apr 13 '20 at 00:22
  • Try to repro it on codesandbox.io. Copy/paste the exact contents of the relevant files. – tao Apr 13 '20 at 00:27
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/211514/discussion-between-ninetynine-and-tao). – ninetynine Apr 13 '20 at 00:41