Есть фича Layouts. Состоит из components. Что бы удобно импортировать

Question

Есть фича Layouts. Состоит из components. Что бы удобно импортировать

компоненты фичи, я в index.ts файле реэкспортирую эти компоненты(рис. 1)

Aside простой компонент
export const Aside = ({className}: Props) => {
return <div className={className}>Aside</div>;
};

Хочу его стилизовать через styled-components.

Делаю так
import {Aside} from 'features/Layouts';

export const StyledAside = styled(Aside)`
width: 300px;
`;
Получаю ошибку Cannot read properties of undefined (reading 'Aside')

Если импортировать с полным путем до Aside, то компонент стилизуется
Вот так:
import {Aside} from 'features/Layouts/components/Aside';

Не пойму.. Вебпак не смог пути правильные вывести или стайлед компонент не смог их понять?

Выводил в консоль.лог
import * as Layouts from 'features/Layouts';
console.log(Layouts);
Вроде есть этот Aside (рис. 2)

#frontend #javascript #programming #react.js #russian

0

25.06.2022

27 ответов

19 просмотров

Андрей Иванов Автор вопроса

Denis Deniskov
Сделай console.log(Aside) в случае с импортом из i...

Та же ошибка будет. Вопрос почему..) Cannot read properties of undefined (reading 'Aside')

0

25.06.2022

Denis Deniskov

Андрей Иванов
Та же ошибка будет. Вопрос почему..) Cannot read ...

Ну сделай import * as blablabla from 'features/Layouts'; console.log(blablabla) Посмотри что модуль вообще экпортирует

0

25.06.2022

Андрей Иванов Автор вопроса

Denis Deniskov
Ну сделай import * as blablabla from 'features/Lay...

На втором скрине) Самое последнее предложение

0

25.06.2022

Denis Deniskov

Андрей Иванов
На втором скрине) Самое последнее предложение

import {Aside} from 'features/Layouts'; console.log(Aside) Что будет в логе? undefined?

0

25.06.2022

Андрей Иванов Автор вопроса

Denis Deniskov
import {Aside} from 'features/Layouts'; console.lo...

Ошибка будет говорю же)

0

25.06.2022

Denis Deniskov

Андрей Иванов
Ошибка будет говорю же)

А стек у этой ошибки есть?

0

25.06.2022

Андрей Иванов Автор вопроса

Denis Deniskov
А стек у этой ошибки есть?

Да, он ведет до места где используется export const StyledAside = styled(Aside)` width: 300px; `;

0

25.06.2022

Denis Deniskov

ну хоршо, убери это строку и воткни там console.log(Aside), в нем будет undefined?

0

25.06.2022

Андрей Иванов Автор вопроса

Denis Deniskov
ну хоршо, убери это строку и воткни там console.lo...

0

25.06.2022

Denis Deniskov

А у тебя там случайно нет циклической зависимости? ну что-то типо index.tsx -> styled.ts -> index.tsx?

0

25.06.2022

Андрей Иванов Автор вопроса

Ну как сказать. Вроде нет. И лейаут и асайд реэкспортируются из index.tsx А уже в лейауте(styles.ts) имотрируется асайд

0

25.06.2022

Кирилл Мохначевский

Андрей Иванов
Ну как сказать. Вроде нет. И лейаут и асайд реэксп...

Это vscode? Нет плагина который бы следил за этим (всяко лучше чем самому по файлам бегать)

0

25.06.2022

Андрей Иванов Автор вопроса

Кирилл Мохначевский
Это vscode? Нет плагина который бы следил за этим ...

Это vs code

0

25.06.2022

Denis Deniskov

Андрей Иванов
Ну как сказать. Вроде нет. И лейаут и асайд реэксп...

styles.ts ты как импортируешь, покажи

0

25.06.2022

Denis Deniskov

Андрей Иванов
Ну как сказать. Вроде нет. И лейаут и асайд реэксп...

И где

0

25.06.2022

Андрей Иванов Автор вопроса

Denis Deniskov
И где

В лейуте мне нужны стили которые описал в styles)

0

25.06.2022

Denis Deniskov

Андрей Иванов
В лейуте мне нужны стили которые описал в styles)

У тебя циклическая зависимость

0

25.06.2022

Denis Deniskov

Андрей Иванов
В лейуте мне нужны стили которые описал в styles)

У тебя L/styles.tsx ссылается на index.tsx L/Index.tsx на L/styles.tsx index.tsx на L/index.tsx

0

25.06.2022

Андрей Иванов Автор вопроса

Denis Deniskov
У тебя L/styles.tsx ссылается на index.tsx L/Inde...

Не очень понятно, но спасибо, посижу покурю это)

0

25.06.2022

Denis Deniskov

Андрей Иванов
Не очень понятно, но спасибо, посижу покурю это)

Вообще если используешь eslint для него можешь поставить правило https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-cycle.md

0

25.06.2022

Андрей Иванов Автор вопроса

Denis Deniskov
Вообще если используешь eslint для него можешь пос...

Добавил правило. Не ругается import {Aside} from 'features/Layouts';

0

25.06.2022

Denis Deniskov

Андрей Иванов
Добавил правило. Не ругается import {Aside} from '...

Убери maxDepth

0

25.06.2022

Андрей Иванов Автор вопроса

Denis Deniskov
Убери maxDepth

Аналогично)

0

25.06.2022

Denis Deniskov

Андрей Иванов
Добавил правило. Не ругается import {Aside} from '...

"import/no-cycle": 2 а так? Ну странно ну проверь руками есть ли цикл, перейди, по файликам выше как я писал, если вернешься к тому же файлику с которого начинал, значит цикл есть=) Может правило не отрабатывает, а может я ошибся и цикла нет

0

25.06.2022

Андрей Иванов Автор вопроса

Denis Deniskov
"import/no-cycle": 2 а так? Ну странно ну провер...

С Aside перейти? import {Aside} from 'features/Layouts';

0

25.06.2022

Denis Deniskov

Андрей Иванов
С Aside перейти? import {Aside} from 'features/La...

Да можешь с любого начинать, если это цикл ты в любом случае по всем по ним пройдешься

0

25.06.2022