Can't see .d.ts files after building editor
I've a React project that uses Nx and TypeScript, where I want to use Label Studio editor inside it.
One of the options that I decided to try is to build libs/editor, then host it on npm registry and include it as a package in my application.
But the issue each time I try to build the editor, it succeed,s but the built files don't contain d.ts files related to types.
So after publishing and trying to use the package in my app, it always fails as it doesn't see any types exist for the editor.
This is the sort of errors that I get when I try to use the built editor,
Any idea how to emit the types files while building the editor, or if there's a better approach to include the editor inside my mono repo, would be much appreciated.
Hello,
By default, the NX/Webpack build for the Editor library (web/libs/editor) bundles only JavaScript and CSS—it does not generate TypeScript declaration files (.d.ts). To include .d.ts in your published package, you have two main options:
- Emit declarations via a separate tsc step
- Reference the Editor lib directly in your Nx monorepo so TS picks up its source types automatically
Thank you, Abu
Comment by Abubakar Saad Workflow Run
@heidi-humansignal Would you guide me through how to do any of these?
- How to add a step for emitting declaration files
- I tried to use the output of the build directly in my application, but I got a new error where it says no export default from (humansignal/editor) package name for me.
For the error I provided in the screenshot, I managed to pass it by removing "main": "src/index.js" from editor/package.json, as it expects src/index.js for "main" while the emitted files in the build don't have index.js, it has main.js. so on removing it starts to introduce a newer error.
Uncaught SyntaxError: The requested module 'test/ls/node_modules/.vite/apps/web/deps/@humansignal_editor.js?v=e3554374' does not provide an export named 'default' (at lsStudio.tsx:6:1)
Hello,
You can try this—emitting declaration files and restoring a usable default export—follow these steps in your libs/editor workspace:
-
Emit
.d.tsfiles a. Create or updatelibs/editor/tsconfig.lib.json:{ "extends": "../../tsconfig.base.json", "compilerOptions": { "declaration": true, "emitDeclarationOnly": true, "outDir": "dist/libs/editor/types", "skipLibCheck": true }, "include": ["src//*.ts", "src//*.tsx"]}
b. In libs/editor/package.json, add scripts and point to the generated types:
{ "scripts": { "build:bundle": "nx run editor:build:production", "build:types": "tsc -p tsconfig.lib.json", "build": "npm run build:bundle && npm run build:types" }, "main": "dist/libs/editor/index.js", "types": "dist/libs/editor/types/index.d.ts", "files": ["dist/libs/editor/**/*"]}
c. Run from your repo root:
npm run build --workspace=libs/editor
Thank you, Abu
Comment by Abubakar Saad Workflow Run