react-dom.production.min.js:106 Uncaught TypeError: Cannot redefine property: default

[vaynevayne]

dev environment, no errors,
In the production environment,
it will generate the error as shown in the picture, I'm not sure if it's a packaging error of zustand for the middleware?

[vaynevayne]

[dai-shi]

Can you reproduce the issue with https://codesandbox.io/s/react-new ?

[vaynevayne]

This error only occurs after the build, and the
With immer + zustand the problem occurs, without it it's fine.
But with immer alone, there is no problem, either.

Can you help me empirically see if it's a tsconfig issue?

  return createStore<PageState>()((set) => ({
    ...DEFAULT_PROPS,
    ...initProps,
    set,
    addTab: (tabData) =>
      set((state) => ({
        tabs: {
          ...state.tabs,
          items: state.tabs.items.concat({ ...tabData }),
          activeKey: tabData.key,
        },
      })),
    removeTab: (targetKey: TargetKey) =>
      set((state) => {
        console.log('state', state)

        const nextState = produce(state, (draft) => {
          const targetIndex = draft.tabs.items?.findIndex((pane) => pane.key === targetKey) || -1
          const newPanes = draft.tabs.items?.filter((pane) => pane.key !== targetKey)
          if (newPanes?.length && targetKey === draft.tabs.activeKey) {
            const { key } =
              newPanes[targetIndex === newPanes.length ? targetIndex - 1 : targetIndex]

            draft.tabs.activeKey = key
          }
          draft.tabs.items = newPanes
        })
        console.log('nextState', nextState)

        return nextState
      }),
  }))

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "suppressImplicitAnyIndexErrors": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "noImplicitAny": false,
    "jsx": "react-jsx",
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

[dai-shi]

The error doesn't seem a TS issue. It's a bundling issue.

[vaynevayne]

Could it be immer packing itself? Or the packing problem on my end?

[dai-shi]

Maybe you want to start with something that works, something pretty simple.

[vaynevayne]

哎