typescript error TS2305: Module "constants" has no exported member

Question

I have Vite + React + TypeScript app with structure

src
  constants
    a.ts
    b.ts
    index.ts
  components
    Comp.tsx

tsconfig with "baseUrl": "src"

a.ts content:

export const ARRAY = [1, 2, 3];

b.ts content:

export const Object = { foo: 'bar' };

index.ts content:

export * from './a';
export * from './b';

Comp.tsx content:

import { ARRAY } from 'constants';

App works correctly, but in the WebStorm there is an error in Comp.tsx:

TS2305: Module  "constants"  has no exported member  ARRAY 

Why? How can I fix it?

I want to get rid of this error.

Answer 1

The constants itself is a reserved word for the node types lib (Usually reside in this path: node_modules/@types/node/constants.d.ts). Therefore, it can be conflicted if you do not explicitly define the proper path to the constants directory in your project configs.

How to fix it?

You have two ways to fix this issue:

1. The best and easiest way to solve this issue is to avoid using constants as a direct directory in your project. You can either move it under the utils directory (It mostly depends on your project design and architecture), or you can rename it to other custom names such as consts, localConstants, etc.

2. Explicitly define the exact path for your project's constants directory within the compilerOptions settings. In your case, you can define it in tsconfig.* (JS-based projects can be configured in the jsconfig.*).

   According to the documentation you can do this like below:

   {
     "compilerOptions": {
       "paths": {
          "constants": ["./src/constants"]
       }
     }
   }