javascriptreactjsvite

Testing a react component library project using vite


I have a library project using TS, React, and vite for bundler. Folder structure looks like this

- LibraryProject
 - src
  - main
   - TestComponent.tsx
  - hooks
   - hookFile.ts
  - enums
   - enumFile.enum.ts

My current vite config builds a lib properly and I am able to use that in a separate React demo project.

To import my Library project into the react demo project, I am using the default npm install command followed by the ../pathToLibraryProject. Once the project is linked I am able to reference the main file but unable to import enums or hooks.

Current import statement,

import TestComponent, { enumA } from "library-project";

TestComponent as I mentioned is imported correctly but not ENUM_A.

Error,

ERROR in ./src/App.js 46:22-39
export 'enumA' (imported as 'enumA') was not found in 'library-project' (possible exports: default)

Can anyone point out what can possibly fix this?

Thanks.


EDIT: I tried the following as per the comments but it seems there is something I am missing as I still get error on resolving the imports in the demo project. Code below,

"exports": {
    ".": {
      "import": "./dist/index.es.js",
      "require": "./dist/index.cjs.js"
    },
    "./src/enums/enumFile.enum.ts": "./src/enums/index.ts"
  },

This still results in the following error in the demo project,

Attempted import error: 'enumA' is not exported from 'library-project' (imported as 'enumA').
ERROR in ./src/App.js 46:22-39
export 'enumA' (imported as 'enumA') was not found in 'library-project' (possible exports: default)

webpack compiled with 1 error

Solution

  • I followed @Mulans instructions in the comments yesterday. The only thing extra I had to do was change the entry in vite.config.ts.

    Here are the changes that worked for me,

    Vite Config:

    entry: "./src/index.tsx",
    

    Kept my exports as following,

    "exports": {
        ".": {
          "import": "./dist/index.es.js",
          "require": "./dist/index.cjs.js"
        }
      },
    

    Since I need to support CommonJS and ES versions. Thank you for all the help