Issue with VueJS compilation: JSON data import causing failure

Question

Issue with VueJS compilation: JSON data import causing failure

I'm attempting to bring in a static .json file within the <script> section of a .Vue file using the code snippet

import Test from '@assets/test.json'

From what I've gathered about webpack, this should work effortlessly. I have even gone as far as explicitly specifying both the .json extension in webpack resolve and including the json loader under loaders.

Despite my efforts, it continues to fail with the following 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

This seems peculiar since it's not a dependency that is meant to be installed?

The content of my test.json file simply contains {}, but I've also attempted it with an actual data file resulting in the same error message.

Thank you in advance for any assistance.

Edit: A big thank you to @tao for assisting me in resolving the issue through chat. The mistake was indeed straightforward:

import Test from '@assets/test.json'

should have been

import Test from '@/assets/test.json'

javascript vue.js npm webpack

Answer 1

Answer №1

To enable TypeScript support, you must include the following:

"resolveJsonModule": true,

inside the compilerOptions section of your tsconfig.json file.

Add the following as well:

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

This code should be added to your shims-vue.d.ts file.

In JavaScript, there is no special setup required. The following code will work:

test.json:

{
  "foo": "bar"
}

Your *.vue single file component (SFC) file:

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

export default {
  data() {
    return {
      json
    }
  },
  mounted() {
    console.log(this.json)
  }
}
</script>

Answer 2

To enable TypeScript support, you must include the following:

"resolveJsonModule": true,

inside the compilerOptions section of your tsconfig.json file.

Add the following as well:

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

This code should be added to your shims-vue.d.ts file.

In JavaScript, there is no special setup required. The following code will work:

test.json:

{
  "foo": "bar"
}

Your *.vue single file component (SFC) file:

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

export default {
  data() {
    return {
      json
    }
  },
  mounted() {
    console.log(this.json)
  }
}
</script>

Issue with VueJS compilation: JSON data import causing failure

Answer №1

Similar questions

Learn how to verify the existence of a URL or webpage using AJAX or jQuery

What could be the reason for the page scrolling upwards when clicking on href="#"?

Exploring the possibilities: Establishing a Connection between Node.js and MySQL

Prevent Nuxt from refreshing the page when the URL is modified

The process for changing the textContent to X when an image is clicked

"Enhance your website with interactive jQuery lightbox buttons for easy navigation

Incorporate a PHP GET parameter through an onclick event to redirect using window.location in JavaScript when a button is

Alter the style type of a Next.js element dynamically

Facing problem with Angular 7 when making a GET request for non-JSON data

Having trouble with reactjs and typescript? Getting the error message that says "Type 'string' is not assignable to type 'never'"?

None of the NPM commands are working due to an error stating: "TypeError: Class extends value undefined is not a constructor

Tips for uploading my npm project to the GitLab NPM Registry?

Looking to add some random circle markers to your SVG map?

Creating a dual-column checkbox design with CSS only

Tips for including an object as a prop using Vue Router

Encountered a problem while attempting to launch the next js development

Capturing information within a jQuery function by accessing data from another function

What is the best way to clear an input value in Vuejs after it has been submitted?

What is the best way to render a view, hide parameters from the URL, and pass data simultaneously?

Having difficulty sending string values with Axios and FormData in Vue.js