How to import a local package into a Vite project?

Question

As react-scripts is not maintained since 2 years and still use TypeScript v4, I would like to change my stack.

After a few researches, I decided to try Vite.js.

I import my local library like this in my package.json:

"dependencies": {
    "my-local-lib": "file:../my-local-lib",
    ...

My problem is when I import something from it

import { CONTACT_EMAIL } from 'my-local-lib/dist/constants';

I get the following error in my browser console:

hmr.ts:247 SyntaxError: The requested module '/@fs/Users/JohnDoe/Documents/my-local-lib/dist/constants.js' does not provide an export named 'CONTACT_EMAIL' (at App.jsx:6:10)

So Vite is expecting to read the source file /my-local-lib/src/constant.js

export const CONTACT_EMAIL = '[email protected]';

When it's actually reading my compiled file /my-local-lib/dist/constant.js:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CONTACT_EMAIL = '[email protected]';
//# sourceMappingURL=constants.js.map

Steps to reproduce:

• pnpm create vite my-react-app --template react
• cd my-react-app
• pnpm add ../my-local-lib
• pnpm install

I'm building my local library with tsc and the following TypeScript options:

{
    "compilerOptions": {
        /* Language and Environment */
        "target": "es2019" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
        "jsx": "react-jsx" /* Specify what JSX code is generated. */,

        /* Modules */
        "module": "commonjs" /* Specify what module code is generated. */,
        "rootDir": "./src" /* Specify the root folder within your source files. */,
        "sourceMap": true, /* Create source map files for emitted JavaScript files. */
        
        /* Emit */
        "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
        "outDir": "./dist" /* Specify an output folder for all emitted files. */,
    
        /* Interop Constraints */
        "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
        "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,

        /* Type Checking */
        "strict": true /* Enable all strict type-checking options. */,

        /* Completeness */
        "skipLibCheck": true /* Skip type checking all .d.ts files. */
    }
}