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