Cannot read properties of undefiend (reading 'userApi') using RTKquery

Question

I am learning a RtkQuery library with React.js. I am learning an official documintation of RtkQuery and start my learning with Quick Start Guide. I have a small database which is running on json-server.And code like this(simmilar to quick start in docs.).

store.js

import {configureStore} from "@reduxjs/toolkit"

import { usersApi } from "./index"


export const store = configureStore({
    reducer : {
        [usersApi.reducerPath] : usersApi.reducer,
    }, 
    middleware: (getDefMiddleware) => getDefMiddleware().concat(usersApi.middleware)
})

usersApi.js

import {createApi , fetchBaseQuery} from "@reduxjs/toolkit/query/react" ;


export const usersApi = createApi({
    reducerPath: 'usersApi',
    baseQuery: fetchBaseQuery({baseUrl: "http://localhost:3001/"}),
    endpoints: (builder) => ({
        getUsers: builder.query({
            query: () => `users`,

        })
    })
})


export const {useGetUsersQuery} = usersApi

And this code in simple jsx component

import {useGetUsersQuery} from "./redux"


const Loading = () => {
 return (<h1>isLoading</h1>)
}

const ShowData = ({data}) => {
  return (
    <ul>
      {data.map(user => {
        <li key={user.id}>{`name: ${user.name}`}</li>
      })}
    </ul>
  )
}


function App() {

  const {data , isLoading} = useGetUsersQuery()
 
  return (
    <div>
 {isLoading ? <Loading/> : <ShowData data={data}/>}
    </div>
  );
}

export default App;

This is a text of error in browser console

index.js:10 Uncaught TypeError: Cannot read properties of undefined (reading 'usersApi')
    at Module.usersApi (index.js:10:1)
    at ./src/redux/store.js (store.js:8:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/redux/index.js (index.js:10:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/App.js (bundle.js:15:64)
usersApi @ index.js:10
./src/redux/store.js @ store.js:8
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/redux/index.js @ index.js:10
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/App.js @ bundle.js:15
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/index.js @ App.js:30
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7

And for more information i didn`t see nothing in redux devstools extesion.

Answer 1

Solution: Fix your import paths

Change this line in store.js

import { usersApi } from "./index"

to this:

import { usersApi } from "./usersApi"

Problem: You have a dependency cycle

Your store.js file is importing from index.js. I’m guessing that the usersApi.js and the store.js are both in the same folder. Presumably the index.js re-exports the usersApi variable so the path isn’t “wrong” in the traditional sense. But it will create a circular import!

The dependency cycle between index.js and store.js means that the contents of index.js are undefined when processing the store.js file. The store variable depends on the contents of index.js, but the contents of index.js depend on the store variable.

Therefore the usersApi variable must be imported directly from the usersApi.js file.