Ошибка при импорте react компонента c использованием typescript

Question

Есть такая стукрутура файлов,

src/
 components/
  Spinner/
   index.tsx
   Spinner.tsx

index.tsx здесь хранится импорт компонента

import Spinner from './Spinner';

export {
  Spinner
};

и непосредственно содержимое компонента Spinner.tsx

import React from 'react';
import classNames from 'classnames';

interface IProps {
    authMod?: Boolean
}

const Spinner: React.FC<IProps> = ({ authMod }) => {
    const spinnerClasses = classNames('spinner_wrap', { auth_mod: authMod });

    return (
        <div className={spinnerClasses}>
            <div className="spinner">
                <div className="spinner-border" role="status">
                    <span className="sr-only">Loading...</span>
                </div>
            </div>
        </div >
    );

};

export default Spinner;

Также для того чтобы писать всегда абсолютный путь при импорте я добавил в файл .env такую запись NODE_PATH=src . Но когда я пытаюсь сделать импорт компонента Spinner import { Spinner } from 'components/Spinner'; у меня появляется такая ошибка (Cannot find module 'components/Spinner' or its corresponding type declarations.). Скажите пожалуйста в чем может быть проблема, как исправить эту ошибку?

Answer 1

Ваша env-переменная это какой-то бессмысленный, кхм-кхм, ужас. В ней нет чего-либо полезного, удалите ее. Для того, чтобы пользоваться aliases для путей, вам нужно добавить их в webpack config и tsconfig
В качестве примера:

// webpack.config.js
resolve: {
    'components': path.join(__dirname, 'src', 'components')
}
// tsconfig.json
baseUrl: './src',
paths: {
    "components/*": ["./components/*"]
}

Никогда не показывайте код в виде скриншотов, используйте для этого возможности редактора stackoverflow
Структуру файлов нужно было показывать примерно так:

src/
 components/
  slider.tsx
  otherComponent.tsx
 app.tsx
 index.tsx

Answer 2

Ошибка пропала после того как я убрал из переменной .env запись NODE_PATH=src и добавил в tsconfig.json в обьект compilerOptions свойство "baseUrl": "src".

БЛОГ НА HUSL

Ошибка при импорте react компонента c использованием typescript

Ответы (2 шт):