JS-C1001 · Found unnecessarily complex import statement

Found unnecessarily complex import statement JS-C1001

Anti-pattern

Minor

a month ago — a month old

Useless path segments for "../../layout/Horizantal/", should be "../../layout/Horizantal"

 1import React from "react";
 2import Horizantal from "../../layout/Horizantal/"; 3
 4import ProductEdittor from "./ProductEdittor";
 5

Useless path segments for "../../layout/Horizantal/", should be "../../layout/Horizantal"

src/views/home/Home.tsx

 1import React from "react";
 2import Horizantal from "../../layout/Horizantal/"; 3import Checkout from "./Checkout";
 4
 5import "./Home.scss";

Useless path segments for "../../../layout/Horizantal/", should be "../../../layout/Horizantal"

src/components/utils/Loading/index.tsx

1import React from "react";
2import Horizantal from "../../../layout/Horizantal/";3import LoadingPage from "./LoadingPage";
4
5const Loading: React.FC = () => {

Useless path segments for "./layout/Horizantal/", should be "./layout/Horizantal"

src/App.tsx

 6import toast, { Toaster } from "react-hot-toast";
 7import PrivateRoute from "./router/PrivateRoute";
 8import useLogin from "./hooks/useLogin";
 9import Horizantal from "./layout/Horizantal/";10import { getCategories } from "./redux/slices/categorySlice";
11import { getProducts } from "./redux/slices/productSlice";
12import { getCarts } from "./redux/slices/cartSlice";

Description

Unnecessarily complex import statements can be simplified. Complex imports usually result in confusing code. This usually happens as a result of refactoring.

For the following project structure

├── root.config.js
├── .deepsource.toml
└── calculator
        ├── index.js
        ├── calc.js
        └── config.js
        └── utils
            └── pofyfills.js
            └── index.js

Bad Practice

// <!-- calcuator/index.js -->

import utils from './utils/index.js' // unnecessary to mentioned `index.js` at the end. NodeJS always resolves using index.js
import config from './../root.config.js' // unnecessary to add the `./`/
import polyfills from './utils//polyfills.js' // unnecessary to add the extra `/` before  `polyfills.js`
import { processUtils } from './utils/' // unnecessary to add the extra `/` after  `./utils`

// <!-- calcuator/index.js -->

import utils from './utils'
import config from '../root.config.js' // unnecessary to add the `./`/
import polyfills from './utils/polyfills.js' // unnecessary to add the extra `/` before  `polyfills.js`
import { processUtils } from './utils' // unnecessary to add the extra `/` after  `./utils`

Huthaifa-Dev / project

Bad Practice

Recommended