Invalid data in JSON file causing issues in Vue.js

In my vuex store, I store all the translations for my application. These translations are imported from a JSON file in the following manner:

import en from '@/locales/en-US.json';

const question: Module<State, any> = {
  namespaced: true,
  state: {
    lang: en,
  }
}

The content of the JSON file looks like this:

{
  "layout": {
    "sidebar": {
      "title": "Test"
    }
  }
}

However, when I try to access the value of title, instead of getting just "Test", I receive:

(ctx) => {const { normalize: _normalize } = ctx;return _normalize(["Test"])}

I suspect this issue might be related to my webpack configuration, but I am not certain. Any assistance on this matter would be greatly appreciated.

jsontypescriptvue.js

Answer №1

The reason for this issue is that your file has been precompiled by @intlify/vite-plugin-vue-i18n

For more information, visit https://www.npmjs.com/package/@intlify/vite-plugin-vue-i18n/v/2.0.1

To resolve this problem, you need to specify a path for vite-plugin-vue-i18n.

export default defineConfig({
  plugins: [
    vue(), 
    vueI18n({
      // Make sure to include the paths for i18n resources!
      include: path.resolve(__dirname, './path/to/src/locales/**')
    })
  ]
})

Answer №2

It seems like you might be utilizing the tm function based on your question.

The warning message in the documentation suggests using rt for the locale message returned by tm. Refer to the rt details for more information.

According to the documentation here, "rt differs from t in that it processes the locale message directly, not the key of the locale message. There is no internal fallback with rt. You need to understand and use the structure of the locale message returned by tm."

Consider using rt to retrieve the translation value instead of the function for better results.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

There is no overload that fits the current call | Typescript, React, and Material UI

Embarking on my TypeScript journey with React and Material UI, I am hitting a roadblock with my initial component. // material import { Box } from '@material-ui/core'; // ---------------------------------------------------------------------- ...

reactjstypescriptmaterial-uireact-typescript

Reducing data size when transferring from PutTCP to ListenTCPRecord in NiFi

In a unique scenario, I am moving a collection of JSON messages from one NiFi Cluster to another using the PutTCP and ListenTCPRecord components. Is there a method to implement message compression for data sent through PutTCP and then decompress it at the ...

jsontcpapache-nificompression

Encountering an issue while attempting to make an API GET request using JSON and Python

Encountering an issue with my API get request using JSON RESTful services and Python3. Any assistance would be greatly appreciated. The API instructions I am following can be found on this website . I have the CVE number already, as it's included in t ...

pythonjsonapirestget

Transferring Data to Model

I am attempting to send a variable to the 'GetFiles' function in a model within web2py using this code snippet where the output is saved as 'a': <script> VARIABLE = 'teststring' a = {{=XML(response.json(GetFiles(VARIABL ...

javascriptjsonweb2py

"Server request with ajax did not yield a response in JSON format

http://jsfiddle.net/0cp2v9od/ Can anyone help me figure out what's wrong with my code? I'm unable to see my data in console.log, even though the network tab in Chrome shows that my data has been successfully retrieved. Here is my code snippet: ...

javascriptjqueryajaxjson

Can you explain the significance of allow_blank and style = {`base_template` : `textarea.html`} in Django when used as attributes of a CharField?

Currently, I am delving into the world of Django REST framework through a step-by-step Tutorial. The Tutorial introduces serializers that function much like Django's forms to facilitate the serialization and deserialization of snippet instances into ...

pythonhtmljsondjango

Passing a parameter in JSON format is made easy with RestEasy when making a POST request

I am working with a REST endpoint that looks like this: @POST @Path("/id/{id}/doSomething") @Produces({ MediaType.APPLICATION_JSON }) @Consumes({ MediaType.APPLICATION_JSON }) public Response doSomething(@PathParam("id") final String id, MyObject foo) { ...

jsonajaxrestresteasyendpoint

The RxJs Observer connected to a websocket only triggers for a single subscriber

Currently, I am encapsulating a websocket within an RxJS observable in the following manner: this.wsObserver = Observable.create(observer=>{ this.websocket.onmessage = (evt) => { console.info("ws.onmessage: " + evt); ...

javascripttypescriptrxjs

What is the process for parameterizing a tuple in coding?

In my scenario, I have a tuple with interrelated types. Specifically, it involves an extractor function that retrieves a value, which is then used as input for another function. What I envision conceptually looks like this code snippet, although it does n ...

typescript

"V-model does not dynamically change when selecting an option in the dropdown

I have encountered a small issue that I am struggling to resolve. Recently, I created a select box which you can view here: https://codepen.io/spqrinc/pen/wvaqrPj <div id="app"> Selected value: {{item.picked}} <hr /> <select v-model="it ...

vue.jsvuejs2vue-router

The json.stringify method is inserting additional backslashes into the response sent by res.send()

My API needs to provide the following data in its response. { users: 'All users are as follows: [{id: 1}, {id: 2}]'} The response should be a JSON object with one key value being a JSON array. However, the JSON array is converted into a string b ...

jsontypescriptapiexpresspostman

Even with the v-once directive applied, the component will still update whenever there is a change in the value of a property within a

Why does a component with the v-once directive re-render when passing an object as a prop and changing its property value? What causes the internal Watcher of the component to trigger a re-render? I have observed that when passing a primitive as a prop, t ...

vue.js

Typescript: How can we determine the data type of React Router Link?

Trying to pass Link from react-router-dom as props and needing to specify it in the interface. While hovering over the Link element, the type displayed is: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>> ...

reactjstypescript

Guide on converting snake_case JSON to dynamic format in PascalCase:

Here is a code snippet that works perfectly: string json = @"{""MyProperty"" : ""bar""}"; var payload = JsonConvert.DeserializeObject<dynamic>(json); string typedProperty = payload.MyProperty; //contains "bar" Now, let's attempt to handle sn ...

c#jsonjson.net.net-coredeserialization

Error message: Unable to set the uploaded file in the specified state within a React application

I am currently working on a react application that involves file uploads. My goal is to update the state variable with the uploaded file in either .docx or .pdf format as soon as it is uploaded. However, when I try to set the state, it shows up as undefine ...

javascriptreactjstypescriptreact-hooksfile-upload

What is the best way to combine and transform two distinct types of Maps in Java?

Currently, I am encountering a dilemma... There exists the following: Map<String, String> map1 = new HashMap<String, Integer>(); Map<String, Integer> map2 = new HashMap<String, Integer>(); Both of these will be required to be tra ...

javajsonjackson

Exploring the data within $http in PHP

Currently, I am sending data to the server in the following manner: $scope.saveCaption = function(user_id) { var target = document.getElementById('toRender'); html2canvas(target, { onrendered: function(canvas) { $http({ ...

phpjsonangularjs

Tips for leveraging Aerospike query language to import JSON data

http://www.aerospike.com/docs/tools/aql/ Exploring aerospike for the first time. I've gone through the introductory guide on aql but struggling with the data import process. I have a JSON dataset that I need to import into aerospike using aql. Is the ...

jsondatabaseimportaerospikeaql

Storing prop object in LocalStorage when clicking on a Vue3 component

I am currently attempting to pass a prop (faction) from a Component called Faction Option when the @click event for the option occurs. FactionOption.vue <script setup> import { selectFaction } from '../../composables/selectFaction'; def ...

jsonvuejs3local-storage

Challenges with Wcf server and navigating through Entity Framework

After struggling to return a JSON response from my WCF RESTful service using EF entities as the data source, I discovered that it was not possible with the integrated libraries. After some searching for third-party libraries, I found Json.net, which was ca ...

c#jsonwcfentity-frameworkserialization