Vite로 구동 시 package.json 참조 안될때

tsconfig.json 에서

"compilerOptions": {
	"esModuleInterop": true,
}

Tsconfig.node.json 에서

"compilerOptions": {
	 "resolveJsonModule": true
  },
 "include": ["vite.config.ts", "./package.json"] 추가

vite.env.d.ts 에서

/// <reference types="vite/client" />
/// <reference types="vite-plugin-pages/client-react" />
interface ImportMetaEnv {
  readonly PACKAGE_VERSION: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

추가

vite.config.ts 예시

import react from '@vitejs/plugin-react';
import * as fs from 'fs';
import * as path from 'path';
import { defineConfig } from 'vite';

import packageJson from './package.json';
// https://vitejs.dev/config/

const increasePackageVersion = () => {
  try {
    const packageFilePath = path.join(__dirname, 'package.json');
    packageJson.version = packageJson.version.replace(/(\d+)$/, (match, prevVer) => {
      return String(parseInt(prevVer) + 1);
    });
    fs.writeFileSync(packageFilePath, JSON.stringify(packageJson, null, 2));
    console.log('New version is', packageJson.version);
  } catch (error) {
    console.log('Error in increasePackageVersion', error);
  }
  return null;
};

export default defineConfig({
  server: { host: '127.0.0.1' },
  build: {
    lib: {
      entry: 'src/main.tsx',
      formats: ['es'],
    },
  },
  plugins: [react(), increasePackageVersion()],
  define: {
    'import.meta.env.APP_VERSION': JSON.stringify(packageJson.version),
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@models': path.resolve(__dirname, './src/models'),
      '@modules': path.resolve(__dirname, './src/modules'),
      '@styles': path.resolve(__dirname, './src/styles'),
      '@assets': path.resolve(__dirname, './src/assets'),
      '@hooks': path.resolve(__dirname, './src/hooks'),
      '@store': path.resolve(__dirname, './src/store'),
    },
  },
  optimizeDeps: {
    entries: ['@hooks'],
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/global.scss";`,
      },
    },
  },
});