Error in production: "Uncaught TypeError: i.fetchBaseQuery is not a function"

[louh]

I have a very basic implementation of RTK Query that follows the "Basic Usage" instructions exactly:

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

export const myApi = createApi({
  reducerPath: 'myApi',
  baseQuery: fetchBaseQuery({
    baseUrl: '/api/v1/'
  }),
  endpoints: (builder) => ({
    getUser: builder.query({
      query: (userId) => `users/${userId}`
    })
  })
})

export const { useGetUserQuery } = myApi

It works exactly as expected in development, but when I deployed to a production instance, the app crashes, with this error in the console:

Uncaught TypeError: i.fetchBaseQuery is not a function

Am I to gather from this error message that RTK Query didn't bundle properly? I am using Parcel.

[markerikson]

Presumably, yeah, which is really bizarre. Never seen anyone report a problem like that before.

[louh]

I was able to search issues for a few other related keywords and found a couple situations that seem similar to mine. Both users are using Parcel, like me.

#2584
#2899

I am trying their recommendations now.

[louh]

I see the issue has been filed at Parcel as well: parcel-bundler/parcel#7622 (comment)

[louh]

OK, it seems these previous comments tracked down the solution. In case anyone else has stumbled across this same error, the issue is that Parcel is somehow skipping aliased exports in RTK Query. The solution is to write the import from two separate packages instead, like this:

import { createApi } from '@reduxjs/toolkit/query/react'
import { fetchBaseQuery } from '@reduxjs/toolkit/query'

@markerikson Thanks for chiming in so quickly. I'll let you decide what to do with the issue, but my situation is resolved.

[markerikson]

Wow, that's screwy :(

Thanks for the heads-up!