React导入报错：Cannot access 'STRUCTURE_COLUMN_ID' before initialization

I'm encountering a ReferenceError: Cannot access 'STRUCTURE_COLUMN_ID' before initialization error when trying to use an exported constant from a class module at the top level of my React component. Here's the context:

My structureColumn.js file exports both a constant and a class that extends another base class:

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;
  }
}

In my component, if I import the constant and use it inside the function component, it works fine—but accessing it at the top level (outside the component function) throws the error:

import React from 'react';
import { List, ListItem, Tooltip } from '@material-ui/core';
import { STRUCTURE_COLUMN_ID } from '../../../../models/structureColumn';
console.log(STRUCTURE_COLUMN_ID); // This line triggers the error

const CustomColumnsList = ({ onSelect }) => {
  // Using STRUCTURE_COLUMN_ID here works without issues
  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've never run into this specific issue in React before. Does anyone have experience troubleshooting this?

This error is almost always caused by a circular dependency between your modules, which messes up the order of initialization. Let me walk you through what's happening and how to fix it:

What's going on? #

When your component tries to import STRUCTURE_COLUMN_ID, it starts loading structureColumn.js. That file imports Column.js—and if Column.js itself imports STRUCTURE_COLUMN_ID or StructureColumn from structureColumn.js, you've created a loop.

In this loop, Column.js tries to access STRUCTURE_COLUMN_ID before structureColumn.js has finished initializing it, hence the "cannot access before initialization" error. The reason it works inside your component function is that by the time the component runs (during render), the modules have finished loading and the constant is available.

How to fix it #

The cleanest solution is to extract your shared constants into a separate, standalone module so neither class depends on the other to access the constant.

1. Create a constants file
   Make a new file like structureColumnConstants.js:

   export const STRUCTURE_COLUMN_ID = 'Structure';
   

2. Update structureColumn.js to use the constants file

   import React from 'react';
   import Column from './column';
   import { STRUCTURE_COLUMN_ID } from './structureColumnConstants'; // Import from the new file
   
   export default class StructureColumn extends Column {
     constructor(name) {
       super(STRUCTURE_COLUMN_ID);
     }
     clone() {
       return new StructureColumn(this.name);
     }
     getKey() {
       return STRUCTURE_COLUMN_ID;
     }
   }
   

3. Update your component to import from the constants file

   import React from 'react';
   import { List, ListItem, Tooltip } from '@material-ui/core';
   import { STRUCTURE_COLUMN_ID } from '../../../../models/structureColumnConstants'; // Switch to the constants file
   console.log(STRUCTURE_COLUMN_ID); // This will now work
   
   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;
   

4. Check Column.js
   If Column.js was importing STRUCTURE_COLUMN_ID from structureColumn.js, update it to import from structureColumnConstants.js as well.

What if there's no circular dependency? #

If you're sure there's no loop between modules, double-check your bundler configuration (Webpack, Vite, etc.). Rarely, module resolution settings can cause unexpected initialization order issues—but circular dependencies are by far the most common cause of this exact error.

内容的提问来源于stack exchange，提问作者atri