VueJS compile failing when importing json data

Question

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'

Does this answer your question? Importing json file in TypeScript — VPaul
– VPaul, Commented Apr 12, 2020 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
– ninetynine, Commented Apr 12, 2020 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
– tao, Commented Apr 12, 2020 at 23:49
No, that's not the case. If that helps, npm list vue gives me [email protected] — ninetynine
– ninetynine, Commented Apr 12, 2020 at 23:52

tao · Accepted Answer · 2020-04-13 00:07:41Z

3

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>

edited Apr 13, 2020 at 0:07

answered Apr 12, 2020 at 23:29

tao

91.1k18 gold badges136 silver badges174 bronze badges

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

9 Comments

ninetynine Over a year ago

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!

tao Over a year ago

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 Over a year ago

Are you getting any errors in console? Is your json valid?

tao Over a year ago

@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.

ninetynine Over a year ago

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 :)

|

Collectives™ on Stack Overflow

VueJS compile failing when importing json data

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related