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

[illright]

@Glorfi could you please try v0.5.2? For both packages

[Glorfi]

Hey team! Unfortunately no success.
First of all steiger.config.ts doesn't see corresponding modules with tsconfig I provided earlier.
I could handle that error by updating tsconfig, yet it didn't help.

Basically I can see that the library still doesn't see corresponding connections. For instance:

┌ src\entities\manager
✘ 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​)

Yet there are actually references in widget and feature layers.

Let me know if there's any other information I can provide you to see the full picture.

[daniilsapa]

Hi @Glorfi

I'm sorry to see that the problems still exist for you but we'll investigate further and finally fix them.

┌ src\entities\manager
✘ 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​)

You said it had references in the widget and feature layers. Do those layers import from src\entities\manager\index.ts or as a sidestep from the public API (e.g. directly from src\entities\manager\ui\ManagerCard.tsx)? If the import is a sidestep then the error you see is expected because for the insignificant-slice rule Steiger counts only valid imports from an entity's public API, that's why you might see that error.

Also, could you please provide us with the contents of your steiger.config.ts, so we can debug it?

[Glorfi]

Well that's interesting, because v0.4.0 returns a more accurate response regarding this slice:

┌ src\entities\manager
✘ 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​)

While v0.5.2 returns the error mentioned in my previous message.

Here's the reference, this this "manager's" entity doesn't have a ui segment yet, but has an api segment.

And that's what my steiger.config.ts looks like when I try to upgrade to v0.5.2:

import { defineConfig } from 'steiger';
import fsd from '@feature-sliced/steiger-plugin';

export default defineConfig([...fsd.configs.recommended]);

[daniilsapa]

@illright
It looks like I found the reason why the problem remained after the 0.5.2 release. (And the reason for the problem that we discussed individually several hours ago)

It is a weird thing but I see that, for some reason, the 0.5.2 release contains the correct updated src code, but the built files (dist) remained from 0.5.1 🤷‍♂️

1. You can see for yourself, go to this page: https://www.npmjs.com/package/@feature-sliced/steiger-plugin?activeTab=code
2. Open package.json, it has the correct version 0.5.2
3. Open dist/index.js
4. Press Command + F and find occurrences of 'version' and see that it says 0.5.1 and the fixes that we pushed in 0.5.2 are not present in the file