I have an existing website built with a React Vite app and I want to integrate it with a template built using Material UI and Next.js. The template repository is here.

The template uses the @/ method for importing files:

     import { config } from '@/config';

My React Vite app uses the traditional import method:

    `import Loader from '../Loader';`

When I run the website using:

    `npm run dev`

I get the following error:

import error

this is the folder structure of my project

         education/ /* this is the already existing website*/
              ├── node_modules/
              ├── public/
              ├── src/
              │   ├── components/
          
              │   ├── App.js
              │   ├── index.js
              │   └── ...
              ├── package.json
              └── teacher/ /* this is the template that im trying to integrate*/ 
                     ├── src/
                         ├── components/ 

I tried to edit the vite.config.js file adding the resolve and alias

        export default defineConfig({
          plugins: [react()],
          server: {
            port: 3000, 
            proxy: {
              '/api': {
                target: 'http://localhost:5000', 
                changeOrigin: true
              },
            },
          },
          resolve: {
            alias: {
              '@': path.resolve(__dirname, './education/src'), // Ensure this path points to your src       directory
              '@teacher': path.resolve(__dirname, './teacher/src'), // Adding a new alias for teacher     folder
            },
          },
        })`

but it did not work

I think there is a way to make the "@" method and the "./" method work together,