Из-за чего возникает ошибка при импорте только компонентов и enum через алиасы?

Ссылка скопирована
Webpack
1 ответ

Столкнулся с проблемой:
Сейчас ситуация такая: при импорте enum и компонентов через алиас @/shared возникает ошибка. Обычные объекты и константы импортируются без проблем. Редактор VSC корректно разрешает переход по алиасам.
По вводным: куда можно еще копнуть - подскажите, или какую часть конфига докинуть для уточнения

import { Align } from '@/shared'; // Cannot read properties of undefined (reading 'Align')
import { Align } from '@/shared/UI'; // такой импорт уже будет работать, хотя на уровне shared реэкспорт настроен
resolve: { symlinks: false, extensions: ['.ts', '.tsx', '.js', '.jsx', '.css', '.scss', '.svg'], modules: ['node_modules', 'app'], alias: { '@': resolve(rootFolder, './src'), '@packages/common': resolve(monorepoRootFolder, './packages/common'), } } optimization: { providedExports: true, usedExports: true, concatenateModules: false, sideEffects: false, }
{ "compilerOptions": { "allowSyntheticDefaultImports": true, "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "jsx": "react", "module": "esnext", "moduleResolution": "node", "noImplicitAny": false, "noUnusedLocals": false, "preserveSymlinks": true, "resolveJsonModule": true, "skipLibCheck": true, "preserveConstEnums": true, "isolatedModules": false, "strict": true, "target": "ES2020", "baseUrl": "./", "paths": { "@/*": ["./src/*"], "@packages/common/*": ["../../packages/common/*"], "@packages/build-configs/*": ["../../packages/build-configs/*"] } }, "include": ["**/*.ts", "**/*.tsx"], "exclude": ["./cypress.config.ts", "node_modules", "cypress", "**/*.cy.tsx"] }
Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Ольга Сеть Ответ

Ошибка при импорте компонентов и enum через алиасы обычно возникает из-за того, что TypeScript, bundler и runtime по-разному понимают alias. Например, tsconfig видит путь @/components, но Webpack/Vite/Jest его не знает. Или enum экспортируется как type-only/import type, а на runtime нужен реальный объект.

Сначала проверьте, где именно падает: TypeScript compile, webpack build, jest/test или browser runtime. Если ошибка вида module not found, проблема в alias. Если ошибка вида enum is undefined, вероятнее всего проблема в экспорте/импорте enum.

Для TypeScript alias задается в tsconfig:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } }

Но для Webpack нужен отдельный resolve.alias:

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src')
  }
}

resolve: { alias: { '@': path.resolve(__dirname, 'src') } }

Для Vite аналогично:

resolve: {
  alias: {
    '@': fileURLToPath(new URL('./src', import.meta.url))
  }
}

resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }

  • не смешивайте default export и named export без проверки;
  • enum импортируйте обычным import, если нужен на runtime;
  • import type подходит только для типов, не для enum-значений;
  • проверьте barrel-файлы index.ts, они часто ломают циклические импорты;
  • после изменения alias перезапустите dev server и TS server.

Если ошибка возникает только при импорте enum через общий index.ts, попробуйте импортировать напрямую из файла enum. Если так работает, проблема в barrel export или циклической зависимости. Для стабильности держите enum/constants отдельно от компонентов, чтобы UI-компоненты не создавали циклы при импорте.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 1 ответ