Vite - Error while creating an alias for a module

185 views Asked by At

I've created a 'libs' folder to have the experimental/canary version of React and React-DOM in it because I need to use a specific function provided by React-DOM in this version. However, I don't want to change the version throughout the entire project, just import it as an alias. I have downloaded the appropriate versions and changed the paths to correct locations of this folder, but when I try to create an alias, Vite throws an error. I've been searching for a solution or the cause of the error for some time, but I couldn't find it anywhere. I even sought help from ChatGPT and according to the response, everything should work fine, but it's not. Does anyone know what might be wrong because I'm out of ideas on how to fix it? Thanks for your help :)

Error:

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

  libs/react-dom-experimental (imported by H:/music-app/client/libs/react-dom-experimental/cjs/react-dom.development.js)    
  libs/scheduler-experimental (imported by H:/music-app/client/libs/react-dom-experimental/cjs/react-dom.development.js)

Are they installed?
    at file:///H:/music-app/client/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:65506:23
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///H://music-app/client/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:64906:38

File: vite.config.ts

/// <reference types="vitest" />

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';
import svgr from 'vite-plugin-svgr';
import { resolve } from 'path';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react(), tsconfigPaths(), svgr()],
    resolve: {
        alias: {
            "@app/react": resolve(__dirname, './libs/react-experimental/'),
            "@app/react-dom": resolve(__dirname, './libs/react-dom-experimental/'),
            "@app/scheduler": resolve(__dirname, './libs/scheduler-experimental/')
        }
    },
    test: {
        globals: true,
        environment: 'jsdom',
        setupFiles: '.vitest/setup.ts',
    },
    preview: {
        port: 3000,
        proxy: {
            '/api': {
                target: 'http://localhost:3001',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, ''),
            },
        },
    },
    server: {
        port: 3000,
        proxy: {
            '/api': {
                target: 'http://localhost:3001',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, ''),
            },
        },
    },
});

File: tsconfig.json

{
    "compilerOptions": {
        "target": "ES2022",
        "useDefineForClassFields": true,
        "lib": [
            "ES2022",
            "DOM",
            "DOM.Iterable"
        ],
        "module": "ESNext",
        "skipLibCheck": true,
        "strictNullChecks": true,
        "noImplicitAny": true,
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",
        "types": [
            "node",
            "vite-plugin-svgr/client",
            "@testing-library/jest-dom"
        ],
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true,
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "src/*"
            ],
            "@root/*": [
                "./*"
            ],
            "@public/*": [
                "public/*"
            ],
            "@app/react/*": ["./libs/react-experimental/*"],
            "@app/react-dom/*": ["./libs/react-experimental/*"],
            "@app/scheduler/*": ["./libs/scheduler-experimental/*"]
        }
    },
    "include": [
        "src",
        "src/types/react.d.ts",
        "src/types/image.d.ts"
    ],
    "references": [
        {
            "path": "./tsconfig.node.json"
        }
    ]
}

File: package.json

{
  "name": "music-app",
  "version": "1.0",
  "type": "module",
  "private": true,
  "scripts": {
    "dev": "cross-env GENERATE_SOURCEMAP=false && vite",
    "build": "cross-env GENERATE_SOURCEMAP=false && tsc && vite build",
    "preview": "cross-env GENERATE_SOURCEMAP=false && vite preview",
    "test:ui": "vitest --ui",
    "test": "vitest"
  },
  "dependencies": {
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@hookform/resolvers": "^3.3.4",
    "@loadable/component": "^5.16.3",
    "@mui/icons-material": "^5.15.7",
    "@mui/material": "^5.15.7",
    "@vitejs/plugin-react": "^4.2.1",
    "axios": "^1.6.7",
    "i18next": "^23.8.2",
    "jwt-decode": "^4.0.0",
    "lodash": "^4.17.21",
    "moment": "^2.30.1",
    "openapi-typescript": "^6.7.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-helmet-async": "^2.0.4",
    "react-hook-form": "^7.50.0",
    "react-i18next": "^14.0.1",
    "react-query": "^3.39.3",
    "react-router-dom": "^6.22.0",
    "react-use": "^17.5.0",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.3.3",
    "vite": "^5.0.12",
    "vite-plugin-svgr": "^4.2.0",
    "vite-tsconfig-paths": "^4.3.1",
    "yup": "^1.3.3",
    "zustand": "^4.5.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.4.1",
    "@testing-library/react": "^14.2.1",
    "@types/loadable__component": "^5.13.8",
    "@types/lodash": "^4.14.202",
    "@types/node": "^20.11.16",
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19",
    "@vitest/ui": "^1.2.2",
    "cross-env": "^7.0.3",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "vitest": "^1.2.2"
  },
  "resolve-path-alias": {
    "alias": {
      "@app/react/*": "libs/react-experimental/*",
      "@app/react-dom/*": "libs/react-dom-experimental/*",
      "@app/scheduler/*": "libs/scheduler-experimental/*"
    }
  },
  "engines": {
    "node": ">=20.0.0",
    "pnpm": ">=8.6.9",
    "npm": ">=9.9.2",
    "yarn": "please-use-npm"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
}
0

There are 0 answers