JavaScript error: Trying to access a variable that is not defined results in a ReferenceError

Question

JavaScript error: Trying to access a variable that is not defined results in a ReferenceError

Can I access the variable named val1090 defined in validator.js from runesMetadata.js in nativescript vuejs?

This relates to metadata for raddataform in my case.

I encountered an error:

[Vue warn]: Error in data(): "ReferenceError: val1090 is not defined"
JS: found in
JS: ---> <Runes>
JS:        <NavigationEntry>

runesMetadata.js

import validator from "./validator";

export default {
  mixins: validator,
  data () {
      return {
        makeRuneMetadata: {
          'isReadOnly': false,
          'commitMode': 'OnLostFocus',
          'validationMode': 'Immediate',
          'propertyAnnotations':
          [ 
            {
              'name': 'r_makeRuneSpell',
              'displayName': 'Make rune spell',
              'index': 0,
              'editor': 'Text',
            },
            {
              'name': 'r_mpAbove',
              'displayName': 'If MP above [%]',
              'index': 1,
              'editor': 'Number',
               val1090, // <--------------------------
            },


      }
  }
}

validator.js

const val1090 = {
    'validators': [
        {
            'name': 'RangeValidator',
            'params': {
                'minimum': 10,
                'maximum': 90,
                'errorMessage': 'Value must be between 10-90.',
            }
        },
    ]
  }

export default val1090

**EDITED BELOW **

Adding more objects to the validator like this:

onst val1090 = {

            'name': 'RangeValidator',
            'params': {
                'minimum': 10,
                'maximum': 90,
                'errorMessage': 'Value must be between 10-90.'
            }  

};

const val115 = {

    'name': 'RangeValidator',
    'params': {
      'minimum': 1,
      'maximum': 15,
      'errorMessage': 'Value must be between 1-15.'
    }  

};


export default{
    val1090,
    val115
}

In my component:

created() {
    console.dir(val1090);
  },

The output will be:

==== object dump start ====
JS: val1090: {
JS:   "name": "RangeValidator",
JS:   "params": {
JS:     "minimum": 10,
JS:     "maximum": 90,
JS:     "errorMessage": "Value must be between 10-90."
JS:   }
JS: }
JS: val115: {
JS:   "name": "RangeValidator",
JS:   "params": {
JS:     "minimum": 1,
JS:     "maximum": 15,
JS:     "errorMessage": "Value must be between 1-15."
JS:   }
JS: }
JS: ==== object dump end ====

How can I extract only the contents of the val1090 object? This is what I am looking for.

{
JS:   "name": "RangeValidator",
JS:   "params": {
JS:     "minimum": 10,
JS:     "maximum": 90,
JS:     "errorMessage": "Value must be between 10-90."
JS:   }
JS: }

javascript vue.js nativescript

Answer 1

Answer №1

When you export val1090 as default, it means that when you use the following import statement:

import validator from "./validator"

You are actually creating a variable named validator which holds the content exported by default in the validator file. This content looks something like this:

    {
     'validators': [
        {
            'name': 'RangeValidator',
            'params': {
                'minimum': 10,
                'maximum': 90,
                'errorMessage': 'Value must be between 10-90.',
           }
        },
    ]
  }

Therefore, in your runesMetadata.js file, make sure to reference validator instead of val1090. Alternatively, you can change your import statement to :

import val1090 from "./validator"

NOTE: If your validator file has more objects and you export them using export default, the imported variable will hold these values as well. For example, if you export:

export default {
    val1090,
    val115
}

And then import it like this:

import validator from "./validator"

You will essentially create a variable variable with the following content:

validator = {
    val1090: val1090,
    val115: val115
}

To access the value of val1090, simply refer to it as:

validator.val1090

Answer 2

When you export val1090 as default, it means that when you use the following import statement:

import validator from "./validator"

You are actually creating a variable named validator which holds the content exported by default in the validator file. This content looks something like this:

    {
     'validators': [
        {
            'name': 'RangeValidator',
            'params': {
                'minimum': 10,
                'maximum': 90,
                'errorMessage': 'Value must be between 10-90.',
           }
        },
    ]
  }

Therefore, in your runesMetadata.js file, make sure to reference validator instead of val1090. Alternatively, you can change your import statement to :

import val1090 from "./validator"

NOTE: If your validator file has more objects and you export them using export default, the imported variable will hold these values as well. For example, if you export:

export default {
    val1090,
    val115
}

And then import it like this:

import validator from "./validator"

You will essentially create a variable variable with the following content:

validator = {
    val1090: val1090,
    val115: val115
}

To access the value of val1090, simply refer to it as:

validator.val1090

Answer 3

Answer №2

Using just the property name in an object initializer, such as val1090, is a new ES6+ "shorthand" for val1090:val1090. For this to work, there must be a variable declared called val1090, which seems to be missing in your code. Check out the details on MDN docs for more information.

For example:

var a = 'foo', b = 42, c = {};
var o = {a, b, c};

This code snippet works because variables a, b, and c are declared.

var a = 'foo', b = 42;
var o = {a, b, c};

On the other hand, this code fails because variable c is not declared.

Answer 4

Using just the property name in an object initializer, such as val1090, is a new ES6+ "shorthand" for val1090:val1090. For this to work, there must be a variable declared called val1090, which seems to be missing in your code. Check out the details on MDN docs for more information.

For example:

var a = 'foo', b = 42, c = {};
var o = {a, b, c};

This code snippet works because variables a, b, and c are declared.

var a = 'foo', b = 42;
var o = {a, b, c};

On the other hand, this code fails because variable c is not declared.

JavaScript error: Trying to access a variable that is not defined results in a ReferenceError

Answer №1

Answer №2

Similar questions

Utilizing modular structure for efficient jQuery AJAX request

Utilizing jQuery to seize events and handle AJAX callbacks

Issues with using a personalized font in a Stenciljs project

Delete auto-generated list using handlebars JS

Multi-line input in ExtJs

Grid of pictures resembling a masonry pattern

What is the process for creating an xpath for hyperlinks with the 'contains text' attribute?

Variable missing in the ExpressJs view

Navigating tables with jQuery using a loop and extracting data from two tables with matching row names

"Interactive jQuery feature allows users to edit table content live with the ability to update and delete data via

I am wondering why the vue-router is only changing the URL and not displaying the corresponding view component

I need help figuring out the proper way to establish an indexing path in cosmos db using the nodejs sdk

Guide on Importing All Functions from a Custom Javascript File

Conceal list items by clicking elsewhere on the page

The functionality of AJAX is hindered in the browser when attempting to fetch data from a URL

What is the reasoning behind having two separate permission dialog boxes for accessing the webcam and microphone in flash?

The selected option is not visually highlighted in the ui-select due to a programming issue

Showing hidden errors in specific browsers via JavaScript

Passing slots to child components within a VueJS application - A helpful guide

Updates to mousetrap key bindings are being reflected in the $scope object, but are not being detected by the