인프런 커뮤니티 질문&답변

안녕하세요

강의에 사용된 버전이나 pnpm을 사용하는 등 다른게 진행한 부분이 있습니다만 빌드할때 에러가 나는데 이해가 안되는 부분이 있어 질문드립니다.

pakage.json

  "name": "@twosday/ui",
  "description": "Design System for twosday",
  "private": false,
  "publishConfig": {
    "access": "public"
  },
  "files": [
    "dist"
  ],
  "main": "dist/index.umd.js",
  "module": "dist/index.es.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.es.js",
      "require": "./dist/index.umd.js",
      "types": "./dist/index.d.ts"
    },
    "./styles": {
      "import": "./dist/styles/index.css"
    }
  },
  "version": "0.0.1",
  "type": "module",
  "license": "MIT",

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
import svgr from "vite-plugin-svgr";
import path from "path";
import dts from "vite-plugin-dts";
import { viteStaticCopy } from "vite-plugin-static-copy";

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  plugins: [
    react(),
    vanillaExtractPlugin({
      identifiers: ({ hash }) => `css_${hash}`,
    }),
    svgr(),
    dts(),
    viteStaticCopy({
      targets: [{ src: "src/index.css", dest: "" }],
    }),
  ],
  build: {
    lib: {
      name: "@twosday/ui",
      entry: path.resolve(__dirname, "src/index.tsx"),
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      external: ["react", "react-dom"],
      output: {
        globals: {
          react: "React",
          "react-dom": "ReactDOM",
        },
      },
    },
    sourcemap: true,
    emptyOutDir: true,
  },
});

grs04@BOOK-NN36R5QM7J MINGW64 ~/Desktop/sideproject/my-story-book (main)
$ pnpm build

> @twosday/ui@0.0.1 build C:\Users\grs04\Desktop\sideproject\my-story-book
> tsc -b && vite build

vite v5.3.5 building for production...
src/index.tsx:1:38 - error TS6142: Module './component/LoginForm' was resolved to 'C:/Users/grs04/Desktop/sideproject/my-story-book/src/component/LoginForm.tsx', but '--jsx' is not set.   

1 export { default as LoginForm } from "./component/LoginForm";
                                       ~~~~~~~~~~~~~~~~~~~~~~~
src/index.tsx:2:35 - error TS6142: Module './component/Button' was resolved to 'C:/Users/grs04/Desktop/sideproject/my-story-book/src/component/Button.tsx', but '--jsx' is not set.

2 export { default as Button } from "./component/Button";
                                    ~~~~~~~~~~~~~~~~~~~~

✓ 15 modules transformed.

[vite:dts] Start generate declaration files...
dist/style.css     0.18 kB │ gzip: 0.15 kB
dist/index.es.js  22.47 kB │ gzip: 6.77 kB │ map: 67.56 kB
[vite:dts] Declaration files built in 589ms.

[vite-plugin-static-copy] Copied 1 items.
dist/style.css      0.18 kB │ gzip: 0.15 kB
dist/index.umd.js  14.88 kB │ gzip: 5.90 kB │ map: 65.89 kB
✓ built in 1.12s

vite.config.ts에서 build 에 작성한 부분을 지우고 기본설정으로 하면 잘 되는데 강의처럼 build부분을 작성을 하면 jsx flag를 설정하라고 나오면서 component 폴더에 d.ts 파일들이 생성이 안됩니다.