Error: The following dependencies are imported but could not be resolved:

[vaynevayne]

yarn run dev

Error: The following dependencies are imported but could not be resolved:

  main.css (imported by /Users/xiaofan_yu/cs/react-school-system/src/index.tsx)

Are they installed?
    at file:///Users/xx/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:51104:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///Users/xx/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:50609:26

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'node:path'
import cdn from 'vite-plugin-cdn-import'
import {fileURLToPath} from 'url'
const filename = fileURLToPath(import.meta.url)
const _dirname = path.dirname(filename)

// https://vitejs.dev/config/
export default defineConfig({
  esbuild: {
    loader: 'jsx',
  },
  optimizeDeps:{
    esbuildOptions:{
      loader: {
        '.js': 'jsx', // For old projects, jsx is written in the .js of the project.
After adding this configuration, the problem occurred
      },
    }
   
  },
  plugins: [
    react(),
    cdn({
      modules: [
        {
          name: 'polyfill',
          var: 'Polyfill',
          path: 'http://polyfill.alicdn.com/v3/polyfill.min.js',
        },
        {
          name: 'react',
          var: 'React',
          path: `...,
        },
        {
          name: 'react-dom',
          var: 'ReactDOM',
          path: `...`,
        },
      ],
    }),
  ],
  resolve: {
    alias: [{ find: '@', replacement: path.resolve(_dirname, 'src') }],
  },
  build: {
    outDir: 'build',
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        manualChunks: {
          lodash: ['lodash'],
        },
      },
    },
  },
})