[React] antd ant-design 504 (Outdated Optimize Dep) 오류

 

콘솔 오류 메시지 

 

import { Table } from 'antd';
Failed to load resource: the server responded with a status of 504 (Outdated Optimize Dep)이 오류 이해하기AI
react-dom_client.js?v=ff94396b:5582 Uncaught TypeError: Failed to fetch dynamically imported module: http://localhost:5173/src/pages/bsi/Bsi.tsx이 오류 이해하기AI
react-dom_client.js?v=ff94396b:5589 An error occurred in one of your React components.

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://react.dev/link/error-boundaries to learn more about error boundaries.

 

 

cmd 오류 메시지

X [ERROR] Failed to resolve entry for package "rc-image". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-pre-bundle]

    node_modules/antd/es/image/PreviewGroup.js:21:20:
      21 │ import RcImage from 'rc-image';
         ╵                     ~~~~~~~~~~

  This error came from the "onResolve" callback registered here:

    node_modules/esbuild/lib/main.js:1151:20:
      1151 │       let promise = setup({
      
      
X [ERROR] Failed to resolve entry for package "rc-motion". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-pre-bundle]

    node_modules/antd/es/upload/UploadList/ListItem.js:8:22:
      8 │ import CSSMotion from 'rc-motion';
        ╵                       ~~~~~~~~~~~

  This error came from the "onResolve" callback registered here:

    node_modules/esbuild/lib/main.js:1151:20:
      1151 │       let promise = setup({
           ╵                     ^

 

Error: Build failed with 226 errors:
node_modules/@ant-design/icons/es/components/AntdIcon.js:10:21: ERROR: [plugin: vite:dep-pre-bundle] Failed to resolve entry for package "@ant-design/colors". The package may have incorrect main/module/exports specified in its package.json.
node_modules/@ant-design/icons/es/utils.js:3:42: ERROR: [plugin: vite:dep-pre-bundle] Failed to resolve entry for package "@ant-design/colors". The package may have incorrect main/module/exports specified in its package.json.
node_modules/antd/es/_util/wave/WaveEffect.js:5:22: ERROR: [plugin: vite:dep-pre-bundle] Failed to resolve entry for package " (node:internal/process/task_queues:95:5) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

 

ant design 설치하고 적용하려고 하니까 오류가 어마무시하게 많이났다

왜 나만 억까해 

 

 

원인은 vite.config.ts에 js랑 jsx가 extentsions에 없어서 그런거였음 

 

- vite.config.ts 기존 코드

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr'
import path from 'path'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), svgr()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@assets": path.resolve(__dirname, "./src/assets"),
      "@css": path.resolve(__dirname, "./src/assets/css"),
      "@pages": path.resolve(__dirname, "./src/pages"),
      "@utils": path.resolve(__dirname, "./src/utils"),
      "@components": path.resolve(__dirname, "./src/components"),
      "@store": path.resolve(__dirname, "./src/store"),
    },
    extensions: ['.ts', '.tsx', '.svg', '.png', '.jpeg', '.jpg', '.css'],
  },
})

 

- vite.config.ts 수정 코드

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr'
import path from 'path'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), svgr()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@assets": path.resolve(__dirname, "./src/assets"),
      "@css": path.resolve(__dirname, "./src/assets/css"),
      "@pages": path.resolve(__dirname, "./src/pages"),
      "@utils": path.resolve(__dirname, "./src/utils"),
      "@components": path.resolve(__dirname, "./src/components"),
      "@store": path.resolve(__dirname, "./src/store"),
    },
    extensions: ['.ts', '.tsx', '.svg', '.png', '.jpeg', '.jpg', '.css', '.js', '.jsx'], //이 부분에 js랑 jsx 추가
  },
})

 

 

extensions: ['.ts', '.tsx', '.svg', '.png', '.jpeg', '.jpg', '.css', '.js', '.jsx'],