v0.5.0 Validation and Link Reference Bugs

[Glorfi]

Hey team! Thanks for the great work you do! I have a regular React + TypeScript project. I've just updated your package to and v0.5.0 followed the migration guide but it seems that now it mischecks quite a lot of rules. For instance:

┌ src\widgets\order
✘ This slice has no references. Consider removing it.
│
└ fsd/insignificant-slice (​https://github.com/feature-sliced/steiger/tree/master/packages/steiger-plugin-fsd/src/fsd/insignificant-slice​)

While it actually has reference, and v0.4.0 didn't complain about it.

Besides it seems it mischecks forbidden-imports rule, for instance in v0.4.0 it detected an error:

┌ src\pages\auth\ui\Auth.tsx
✘ Forbidden import from higher layer "app".
│
└ forbidden-imports (​https://github.com/feature-sliced/steiger/tree/master/packages/steiger-plugin-fsd/src/forbidden-imports​)

cause by import { checkAuth } from "@/app/store/userState"; but it's not detected in v0.5.0

Another mischeck is this one, there's no such warning in in v0.5.0, but detected in previous version. :

┌ src\entities\order
✘ This slice has only one reference in slice "features\order\filter-order". Consider merging them.
│
└ insignificant-slice (​https://github.com/feature-sliced/steiger/tree/master/packages/steiger-plugin-fsd/src/insignificant-slice​)

Besides it seems that referencial links are broken or something, although the articles explaining the issues are great!

For now I'm going to return to the previous version, until it gets fixed. Anyway keep up the great work! Let me know if you need any other data from me to fix the issue!

[daniilsapa]

Hi @Glorfi Thank you for the detailed feedback! We'll try to fix the issues ASAP.

Could you please provide this additional information about your environment?

• Operating system (and its version)
• Your setup (framework, TS?)

This would be very helpful for debugging. Thank you in advance!

[Glorfi]

Hey @daniilsapa! Sure, here it is: Windows 10 22H2 (19045.5011) React 18.2.0 Typescript 4.8.4

[Glorfi]

I've seen it's been updated to 0.5.1 it seems the hasn't resolved the issues (if it was intended to solve it). All above mentioned issues still remain.

[daniilsapa]

@Glorfi Thank you for helping us resolve the issues, we appreciate it and apologize for the inconvenience!

Have you updated @feature-sliced/steiger-plugin to 0.5.1? If not, it's important because the fixes are mostly there.

P.S. Fixes for the links have not been included yet.

[Glorfi]

Hey! @daniilsapa I tried updating to 0.5.1 and using this plugin, but unfortunately it still misses correct imports. Let me provide steiger reports both from 0.5.1 and 0.4.0 And I'll show you my imports from report of 0.4.0 which seems to be working for me now.

//Auth.tsx
import React, { FC, useEffect } from "react";
import { ReactComponent as LogoAuth } from "../assets/icons/logoAuth.svg";

import "../styles/Auth.scss";
import { useAppDispatch, useAppSelector } from "@/hooks/use-redux";
import AuthService from "@/api/service/AuthService";
import { checkAuth } from "@/app/store/userState"; 
import { Navigate } from "react-router-dom";
...

//OrdersFilterWidget.tsx
mport React, { useEffect, useMemo, useState } from "react";
import IconButton from "@mui/material/IconButton";

import { useAppDispatch, useAppSelector } from "hooks/use-redux";

import { closeModal } from "@/app/store/sseSlice";
import { fetchDataFilters } from "@/app/store/dataFilters";
import { resetSort } from "@/app/store/tableState";

import { getIndicator } from "@/application";
import { ReactComponent as YourSvg } from "@/assets/icons/IconButton.svg";
import { removeDuplicates } from "@/application/remove-duplicates";
import { toSelectOptions } from "@/features/order/filter-order/lib/to-select-options";
import useDebounce from "@/hooks/use-debounce";
import { SelectOption, Filters } from "@/models";
import { ModalOrderError } from "@/ui";
import { MainButton } from "@/ui/common";
import { ModalContent } from "@/ui/Modal/modalContent";

import { openStateModal, OrderFilteringModal, OrdersFilterBar, resetState } from "@/features/order/filter-order";
import { useGetCitiesQuery } from "@/entities/city";
import { useGetManufactoriesQuery } from "@/entities/manufactury";

//OrderToolbar.tsx
import { useEffect } from "react";
import { IconLabelButton } from "../../../ui/common";
import Button from "@mui/material/Button";
import Paper from "@mui/material/Paper";
import Popper from "@mui/material/Popper";
import Fade from "@mui/material/Fade";
import PopupState, { bindToggle, bindPopper } from "material-ui-popup-state";
import { useAppDispatch, useAppSelector } from "hooks/use-redux";
import { connectToSSE, closeSSEConnection } from "../../../app/store/sseSlice";
import { useGetFilteredOrdersQuery } from "@/features/order/filter-order";
import { RefreshIcon, AddInvertIcon } from "@/shared/assets";

// OrderFilteringModal.tsx
import React, { useState, useEffect, useMemo, useRef } from "react";
import { useAppDispatch, useAppSelector } from "hooks/use-redux";

import { getCountFilters, getDefaultValue } from "../../../../application";
import { CustomSelect, MainButton } from "../../../../ui/common";
import { data } from "../../../../data/dataOrder";

import Fade from "@mui/material/Fade/Fade";
import Modal from "@mui/material/Modal";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Backdrop from "@mui/material/Backdrop";
import { DesktopDateTimePicker } from "@mui/x-date-pickers";
import dayjs, { Dayjs } from "dayjs";

import { style } from "../config/index";
import { ReactComponent as Ruble } from "../../../../shared/assets/ruble.svg";

import { ReactComponent as Line } from "../../../../shared/assets/line.svg";
import { InputValueDispatch } from "../../../../models";
import { defaultDatePickerProps } from "../../../../constants/default-date-time-picker-props";
import { PhoneInput } from "../../../../ui/common/PhoneInput";
import { toSelectOptions } from "../lib/to-select-options";
import { useDebounceFn } from "../../../../hooks/use-debounce-fn";
import { Input } from "../../../../ui/common/Input/Input";
import { removeDuplicates } from "../../../../application/remove-duplicates";
import { AddressField } from "../../../../ui/common/AddressField/AddressField";
import { fetchCouriers, fetchManagers, fetchProducts, fetchPromos, toggleClientPhone } from "@/app/store/dataFilters";
import { changeInput, changeMainState, changeSelect, closeStateModal, IOrderFilterState, onFilterChange, resetModalState } from "../model";
import { useGetCitiesQuery } from "@/entities/city";
import { useGetManufactoriesQuery } from "@/entities/manufactury";
import { useGetPromosQuery } from "@/entities/promo";

// OrdersTableWidget.tsx
import React, { useEffect, useState } from "react";
import Box from "@mui/material/Box";
import { DataGrid } from "@mui/x-data-grid";
import "./OrdersTableWidget.scss";
import { useAppDispatch, useAppSelector } from "hooks/use-redux";
import { resetSort, setSort } from "app/store/tableState";

import { useGetFilteredOrdersQuery } from "@/features/order/filter-order";
import { orderTableColumns } from "@/constants/order-table-columns";
import { getFormatTimeFromIso8601, getTypeDelay } from "@/application";
import { Footer, NoRowsOverlay } from "@/ui/common";
import { IOrder } from "@/entities/order";
import { useGetCitiesQuery } from "@/entities/city";

Please find steiger reports attached: steiger v0.4.0 report.txt steiger v0.5.1 report.txt

[daniilsapa]

@Glorfi Got it, thank you for such a detailed report! I'm debugging it. I see that for some reason path aliases are wrongly processed by Steiger in your case. Could you provide compilerOptions from your tsconfig? It would help me to reproduce the problem better

[Glorfi]

Hey! Sure, thanks for addressing my issue. Here's my: tsconfig.json