модуль-преобразователь babel не работает (реагирует) - PullRequest
Новая
       108

модуль-преобразователь babel не работает (реагирует)

0 голосов
/ 03 мая 2020

Я настроил babel-plugin-module-resolver в моем проекте ReactJS, я использую его в сочетании с TypeScript.

, поэтому у меня есть .babelrc: 

{
  "presets": [
    "@babel/preset-typescript",
    ["@babel/preset-env", {"modules": false}],
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "alias": {
          "@modules": "./modules",
          "@screens": "./screens",
          "@components": "./components",
          "@themes": "./themes",
          "@images": "./images"
        }
      }
    ]
  ],
  "env": {
    "test": {
      "presets": ["@babel/preset-env", "@babel/preset-react"]
    }
  }
}

и затем мой tsconfig.json

{
  "compilerOptions": {
    "esModuleInterop": true,
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "allowJs": true,
    "pretty": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "baseUrl": ".",
    "moduleResolution": "node",
    "module": "commonjs",
    "target": "es6",
    "jsx": "react",
    "lib": ["es6", "dom"],
    "paths": {
      "@modules/*": ["src/modules/*"],
      "@screens/*": ["src/screens/*"],
      "@components/*": ["src/components/*"],
      "@themes/*": ["src/themes/*"],
      "@images/*": ["src/images"]
    }

  },
  "exclude": ["node_modules"]
}

Для получения более подробной информации о моей файловой архитектуре, это выглядит как this

В моем файле rout.tsx я пытаюсь Импортировать модули тем 

import React from 'react'
import { BrowserRouter, Route as Road, Switch } from 'react-router-dom'
import { Route } from '@modules/types/navigations'

import { Main } from '@themes/ui/theme'

Возвращается следующая ошибка: Модуль не найден: Ошибка: Не удается разрешить 'themes / ui / theme' в проекте \ sr c импорт работает для import { Route } from '@modules/types/navigations', но не для import { Main } from '@themes/ui/theme'

Следующий код этих файлов: 

(theme.ts)
import styled from 'styled-components'

export const Main = styled.div`
    background: #000
`

(navigations.ts)
export interface Route {
    path: string,
    exact?: boolean,
    children: JSX.Element
}

Я пробовал много изменений пути в .babelrc / tsconfig. json, но я Не понимаю, почему импорт моих модулей не работает отдельно @ modules

Заранее спасибо!

...