Cannot access before initialization js ошибка

Добрый день. Использую webpack+babel+vue.
У меня 2 файла app.js и methods.js
app.js содержит объект Vue и константу с объектом.

import {VUE_METHODS} from 'methods';

export const NDS = {
    title: 'НДС 20%'
};

VUE_METHODS.methods.objectFreeze(NDS);

export let app = new Vue({
    el      : '#app',
    mixins  : [VUE_METHODS],
    //бла бла бла дальше не важно
});

methods.js содержит примесь

import axios from 'axios';
import {NDS} from 'app';

export const VUE_METHODS = {
    data    : function () {
        return {
            nds: NDS
        }
    },
    computed: {
       //бла бла бла
    },
    methods : {
        objectFreeze         : function (_o, _property = null) {
            //не важно
        }
    }
};

В файле сборки вызываю их так

import 'methods';
import 'app';

Все компилится но в браузере при использовании скомпилиного файла вылетает в консоли ошибка

Uncaught ReferenceError: Cannot access 'ne' before initialization

, где ne — это VUE_METHODS. А ругается на строке с
VUE_METHODS.methods.objectFreeze(NDS);

Как решить ошибку?

Comments

Vite is more strict the `import`s it accepts. These imports are fixed.

Additionally, the Redux store is now exported form a separate file
(other than `index.tsx`. This was done to workaround
vitejs/vite#3033. The circular imports and
Redux store don't play nice, so the circular import was removed.

Defining the Redux store in the same file as the app creates problems
with Vite. There is some issue with circular imports not working
properly with HMR (hot module replacement). Upstream tracks this issue
at vitejs/vite#3033; a workaround is to define and export the Redux
store from a different file. This commit does exactly that to circumvent
the circular import issue.

In this article, we will delve into the intricacies of a common JavaScript error known as “ReferenceError: Cannot Access Before Initialization.”

We will explore the reasons behind this error and provide comprehensive solutions to help you resolve it effectively.

The “ReferenceError: Cannot access before initialization” error happens when a variable declared with let or const is accessed before it has been initialized within the scope.

Here is how this error occurs:

// 📌 ReferenceError: Cannot access 'arr' before initialization
arr = [3, 2, 1];
let arr = [1, 2, 3];

if (5 === 5) {
  // 📌ReferenceError:
  console.log(num);
  const num = 100;
}

function example() {
  // 📌ReferenceError:
  console.log(str);

  let str = 'bobbyhadz.com';
}

// 📌ReferenceError:
const result = sum(5, 10);

const sum = (a, b) => {
  return a + b;
};

Potential causes of Referenceerror

A common reason for this error is connected to the variable scope.

When you use the let or const keywords to declare a variable inside a block or function, it becomes scoped to that block or function.

Thus, if you attempt to access the variable before declaring it within that scope, the error occurs.

Furthermore, in asynchronous JavaScript, like promises or async/await, the execution order can differ.

If you try to access a variable or function that depends on asynchronous operations before it’s initialized or resolved, an error may occur.

Meanwhile, in JavaScript, “hoisting” is when variable and function declarations are moved to the top during compilation.

Wherein Declarations are hoisted, but not initialization.

In addition, trying to access a variable before declaring it, even with hoisting, results in a “ReferenceError: Cannot Access Before Initialization” error.

Solutions – Referenceerror cannot access before initialization

Initialize the variable before accessing it

The first way to resolve the error is to make sure to initialize the variables before utilizing them.

// 📌 use the let keyword before accessing the variable
let arr = [10, 20, 30];
arr = [30, 20, 10];

if (10 === 10) {
  // 📌 use the const keyword before accessing the variable
  const num = 200;
  console.log(num);
}

function example() {
  // 📌 use the let keyword before accessing the variable
  let str = 'itsourcecode.com';
  console.log(str);
}

// 📌 Define a function with the function keyword instead
const result = sum(10, 20);
console.log(result); // 30

function sum(a, b) {
  return a + b;
}

Variables declared with the keywords “let” and “const” are limited to the scope in which they are declared.

If you’re having trouble pinpointing the location of the error in your code, check the error message displayed in your browser’s console or Node.js terminal.

Move the variable declaration to the top

Another way to solve the error is to move the variable declaration to the top of the if block.

Here is how the error occurs:

const arr = ['car', 'ren', 'bea'];

if ('hi'.length === 2) {
  // 📌 ReferenceError: Cannot access 'arr' before initialization
  arr.push('test');

  const arr = [10, 20, 30];
}

On line 1, we initialized the variable arr and attempted to add a value to the array within the if statement.

Unfortunately, there is a conflicting declaration of arr within the if block, resulting in an error.

The line arr.push(‘test’) in the if block is intended to add a value to the numeric array specifically declared within the if block.

To fix this we have to move the variable declaration to the top of the if block.

const arr = ['car', 'ren', 'bea'];

if ('hi'.length === 2) {
  // 📌️ first declare the variable
  const arr = [10, 20, 30];

  // 📌️ access variable after
  arr.push('test');

  console.log(arr);
}

console.log(arr);

We resolved the problem by declaring the variable arr at the beginning of the if block.

It’s important to note that declaring a variable with the same name as one in the outer scope is generally discouraged.

Leverage Hoisting

While hoisting can be a source of errors, it can also be utilized to your advantage.

By declaring your variables and functions at the top of their respective scopes, you can leverage hoisting effectively and avoid encountering the “ReferenceError: Cannot Access Before Initialization” error.

// Good practice: Utilize hoisting by declaring variables at the top
function myFunction() {
  let myVariable; // Declaration
  // ... Code that uses myVariable ...
  myVariable = 'Initialized'; // Initialization
}

Handle Asynchronous Operations Carefully

When dealing with asynchronous JavaScript, it is crucial to handle the order of execution properly.

Ensure that any dependent variables or functions are fully initialized or resolved before attempting to access them.

// Example: Handling asynchronous operations with Promises
function getData() {
  return new Promise((resolve, reject) => {
    // Simulating an asynchronous operation
    setTimeout(() => {
      const data = 'Initialized';
      resolve(data); // Resolve the Promise
    }, 1000);
  });
}

// Usage of the asynchronous function
async function myFunction() {
  const myData = await getData(); // Wait for data initialization
  // ... Code that uses myData ...
}

Anyway besides this error, we also have here fixed errors that might help you when you encounter them.

• Uncaught referenceerror google is not defined
• Importerror: cannot import name ‘parse_rule’ from ‘werkzeug.routing’

Conclusion

In conclusion, the “ReferenceError: Cannot Access Before Initialization” error can be resolved by understanding the underlying causes and applying the appropriate solutions.

By following best practices such as declaring variables at the beginning of their respective scopes, leveraging hoisting effectively, and handling asynchronous operations carefully, you can ensure seamless execution of your JavaScript code.

I think that’s all for this error. I hope you have gained something to fix their issues.

Until next time! 😊