No types output or weird refs

[pimjansen]

Hey,
Let me state first, great work on this plugin. Im making a new UI kit and doing a build from my storybook application. The problem is that i keep having an empty types file or that it holds strange internal refs:

import { default as Avatar } from '../../../../../src/components/Avatar';
import { IGebruiker } from '../../../../../src/components/Navbar/Navbar';
import { IMenuItem } from '../../../../../src/components/Navbar/Navbar';
import { IMenuItem as ISidebarMenuItem } from '../../../../../src/components/Sidebar/Sidebar';
import { default as Navbar } from '../../../../../src/components/Navbar/Navbar';
import { default as Sidebar } from '../../../../../src/components/Sidebar/Sidebar';

export { Avatar }

export { IGebruiker }

export { IMenuItem }

export { ISidebarMenuItem }

export { Navbar }

export { Sidebar }

export { }

This is my main build command: tsc -b && vite build

And my vite config file:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";
import dts from "vite-plugin-dts";
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vite.dev/config/
export default defineConfig({
  build: {
    rollupOptions: {
      external: ['react', 'react-dom', 'react-router', 'tailwindcss'], // Mark peer dependencies as external,
    },
    lib: {
      entry: resolve(__dirname, "src/main.ts"),
      name: 'prisma',
      fileName: 'prisma',
      formats: ["es"],
    },
  },
  resolve: {
    alias: {
      "~": "/src",
    },
  },
  plugins: [
    react(),
    tsconfigPaths(),
    dts({
      tsconfigPath: resolve(__dirname, "tsconfig.app.json"),
      rollupTypes: true,
      exclude: ['src/stories/**/*'],
    }),
  ],
});

My tsconfig.app.json looks like:

{
  "compilerOptions": {
    "baseUrl": ".",
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "paths": {
      "~/*": ["./src/*"]
    },

    /* Bundler mode */
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist", "build"]
}

The weird thing is when running it like this im getting an empty file for my types. My folder structure should be fine i assume:

src
├── components
│   ├── Avatar.tsx
│   ├── Empty.tsx
│   ├── Icon
│   │   ├── ChevronDown.tsx
│   │   ├── ChevronRight.tsx
│   │   ├── Cog.tsx
│   │   ├── Ellipse.tsx
│   │   ├── ExternalLink.tsx
│   │   ├── Help.tsx
│   │   ├── Logout.tsx
│   │   ├── Search.tsx
│   │   ├── types.ts
│   │   └── User.tsx
│   ├── Navbar
│   │   ├── AppsMenuItem.tsx
│   │   ├── AppsMenu.tsx
│   │   ├── Navbar.tsx
│   │   ├── UserMenuItem.tsx
│   │   └── UserMenu.tsx
│   ├── PrismaProvider.tsx
│   └── Sidebar
│       ├── MenuItem.tsx
│       └── Sidebar.tsx
├── main.ts
├── stories
│   ├── Avatar.stories.tsx
│   ├── Button.stories.tsx
│   ├── ExampleIcon.tsx
│   ├── Layout.stories.tsx
│   ├── Link.stories.tsx
│   ├── Navbar.stories.tsx
│   ├── Sidebar.stories.tsx
│   └── translation.ts
├── tailwind.css
├── utils
│   └── twMerge.ts
└── vite-env.d.ts

Hope that someone can assist here

[cdauth]

Could this maybe be the same issue as #404? Maybe downgrading to @microsoft/api-extractor 7.48.1 as explained here would solve the problem?

[LiMao00]

me too

The build output is not usable like this.