Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization in react-router-dom v6 loader

[vaynevayne]

can't use mobx in react-router-dom v6 loader function , Is there a problem with my writing?

  "mobx": "5.15.4",
    "mobx-react": "6.1.8",

// appStore.tsx
class AppStore {
  @observable isLogin = false
  @observable users = []
}
const appStore = new AppStore()

export default appStore

// store/index.tsx
import appStore from './appStore'
const store = {
  appStore,

}
export default store

// index.tsx
import store from './store'
class Root extends React.Component {
  render() {

    return (
      <StrictMode>

          <Provider {...store}>
            <RouterProvider
              router={router}
              fallbackElement={
                <Spin indicator={<LoadingOutlined spin />} size="large" />
              }
            />
          </Provider>

      </StrictMode>
    )
  }
}

ReactDOM.render(<Root />, document.getElementById('root'))

// router.tsx
import appStore from '@/store/appStore'
const rootLoader: NonIndexRouteObject['loader'] = async () => {
  const isLogin = !!Cookies.get('token')

  if (!isLogin) {
    return redirect('/login')
  }

   const resList =  Promise.all([useZustandStore
      .getState()
      .fetchUserPermission()
     ,appStore.setUserType()])

  return resList ?? null
}

const router = createBrowserRouter([
  {
    path: '/',
    // 模拟 RouterProvider支持 children  https://github.com/remix-run/react-router/discussions/10440#discussioncomment-6404629
    Component: App,
    id: 'root',
    ErrorBoundary: ErrorBoundary, // 错误冒泡到根 至少保证根有error
    loader: rootLoader,
    children: [
      {
        index: true,
        Component: inject('appStore')(
          observer(props => {
            const { userType, routerPathInfo } = props.appStore
            const use_type = userType[userType.length - 1]
            const path = routerPathInfo[use_type]
            console.log('Navigate', path)

            return <Navigate to={path}></Navigate>

            // const firstAuthPath = useUserStore(state => state.firstAuthPath)
            // return <Navigate to={firstAuthPath}></Navigate>
          }),
        ),
      },

[vaynevayne]

import { observable, action } from 'mobx'

class Polyfill2 {
  // antd message, modal, notification 静态方法兼容自定义，兼容 360 等低版本内核
  @observable modalConfig = {
    type: '',
    content: '',
    title: '',
  }
  @action setModalConfig(config) {
    this.modalConfig = {...config}
  }
  // 默认配置
  @observable messageConfig = {
    type: 'info',
    content: '',
    duration: 3,
  }
  @action setMessageConfig(config) {
    this.messageConfig = {...config}
  }
}

const P = new Polyfill2() // 
export default P

I searched and said that new cannot be executed here. Is that the reason? How should I modify it?

[kubk]

I see a mix of Mobx, Zustand (useZustandStore?) and react router. Could you create a clear reproducible issue here with only necessary code? https://codesandbox.io/s/minimal-mobx-react-project-ppgml?file=/index.js

Also I see people encountering the same issue even without Mobx:

• https://github.com/storybookjs/storybook/discussions/21525
• https://github.com/vercel/next.js/issues/32360