Cannot access {variable-name} before initialization (React import)

2.4k Views Asked by At

I'm getting a Reference Error

Cannot access 'STRUCTURE_COLUMN_ID' before initialization

I have a structureColumn file which contains the following:

import React from 'react';
import Column from './column';

export const STRUCTURE_COLUMN_ID = 'Structure';

export default class StructureColumn extends Column {
  constructor(name) {
    super(STRUCTURE_COLUMN_ID);
  }

  clone() {
    return new StructureColumn(this.name);
  }

  getKey() {
    return STRUCTURE_COLUMN_ID;
  }
}

When trying to access StructureColumn class or STRUCTURE_COLUMN_ID variable from a component I get the mentioned error.

The component looks the following:

import React from 'react';
import { List, ListItem, Tooltip } from '@material-ui/core';
import { STRUCTURE_COLUMN_ID } from '../../../../models/structureColumn';

console.log(STRUCTURE_COLUMN_ID);

const CustomColumnsList = ({ onSelect }) => {
  return (
    <List>
      {Object.values({}).map(col => (
        <Tooltip title={col.description}>
          <ListItem onClick={() => onSelect(col.column)} button>
            {col.name}
          </ListItem>
        </Tooltip>
      ))}
    </List>
  );
};

export default CustomColumnsList;

I can use the variable inside the functional component body but the thing is I wanted to create a constant variable out of it's scope. Never seen this issue before in React. Someone has an experience dealing with it?

0

There are 0 best solutions below