CoDeR2006
@CoDeR2006
TypeScript

Какая причина ошибки в Redux Toolkit Typescript?

Наткнулся на такую ошибку:
VITE v4.5.0  ready in 240 ms

Error: Build failed with 1 error:
node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js:92:14: ERROR: Could not read from file: D:\src\redux
    at failureErrorWithLog (D:\WebStorm\project\SS\client\node_modules\esbuild\lib\main.js:1649:15)
    at D:\WebStorm\project\SS\client\node_modules\esbuild\lib\main.js:1058:25
    at D:\WebStorm\project\SS\client\node_modules\esbuild\lib\main.js:1525:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)


Использую Vite + React + Typesript + Redux Toolkit
Прикольно то что ошибка вылетает не при сборке проекта, а при заходе на сайт "я предполагаю что просто в этот момент активируется redux и ловит ошибку, хз какую"

Теперь код:

main.tsx
import ReactDOM from 'react-dom/client'
import { App } from './components/template/App.tsx'
import { BrowserRouter } from 'react-router-dom'
import './main.css'
import { Provider } from 'react-redux'
import store from './redux/store/store.ts'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
)

store.ts
import { configureStore } from '@reduxjs/toolkit'
import cartReducer from '../features/cart/cartSlice.ts'

const store = configureStore({
  reducer: {
    cart: cartReducer,
  },
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

export default store

cartSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit'

interface ICartState {
  product: any[] // replace 'any' with the actual type of your product
}

const initialState: ICartState = {
  product: [],
}

export const cartSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    addProduct: (state, action: PayloadAction<any>) => {
      state.product = [...state.product, action.payload]
    },
  },
})

export const { addProduct } = cartSlice.actions
export default cartSlice.reducer

hooks.tsx
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import { AppDispatch, RootState } from '../store/store.ts'

export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector


package.json
{
  "name": "client",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@fontsource/montserrat": "^5.0.15",
    "@reduxjs/toolkit": "^1.9.7",
    "axios": "^1.6.2",
    "clsx": "^2.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.1.3",
    "react-responsive": "^9.0.2",
    "react-router-dom": "^6.18.0",
    "socket.io-client": "^4.7.2",
    "swiper": "^11.0.5",
    "tailwind-merge": "^2.0.0",
    "vite-plugin-svgr": "^4.1.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react-swc": "^3.3.2",
    "autoprefixer": "^10.4.16",
    "postcss": "^8.4.31",
    "tailwindcss": "^3.3.5",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": "src",
    "types": ["vite-plugin-svgr/client"],
    "paths": {
      "assets/*": ["src/assets/*"],
      "components/*": ["src/components/*"],
      "atoms/*": ["src/components/atoms/*"],
      "molecules/*": ["src/components/molecules/*"],
      "organisms/*": ["src/components/organisms/*"],
      "hooks/*": ["src/hooks/*"],
      "pages/*": ["src/pages/*"],
      "redux/*": ["src/redux/*"],
      "services/*": ["src/services/*"],
      "types/*": ["src/types/*"],
      "utils/*": ["src/utils/*"],
    }
  },
  "include": ["src"],
  "references": [{ "path": "../../leader/client/tsconfig.node.json"}]
}


Первый раз юзайю ts + toolkit - по этому ошибка может быть в чем то элементарном.
  • Вопрос задан
  • 118 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы