Uncaught Error: Could not resolve "immer" imported by "zustand"

[MangoSeven]

I creat store :
import { createStore } from 'zustand/vanilla';
import { immer } from 'zustand/middleware/immer';

type PersonStoreState = {
person: { firstName: string; lastName: string; email: string };
};

type PersonStoreActions = {
setPerson: (
nextPerson: (
person: PersonStoreState['person'],
) => PersonStoreState['person'] | PersonStoreState['person'],
) => void;
};

type PersonStore = PersonStoreState & PersonStoreActions;

const createPersonStore = createStore()(
immer((set) => ({
person: {
firstName: 'Barbara',
lastName: 'Hepworth',
email: '[email protected]',
},
setPerson: (nextPerson) =>
set((state) => {
state.person = typeof nextPerson ? nextPerson(state.person) : nextPerson;
}),
})),
);
export default createPersonStore;

then I use It in my component.

const persion = createPersonStore.getState().person;
console.log(persion);

but，Uncaught Error: Could not resolve "immer" imported by "zustand"

[dai-shi]

zustand/docs/integrations/immer-middleware.md

Lines 11 to 18 in 5a886cb

	## Installation
	In order to use the Immer middleware in Zustand,
	you will need to install Immer as a direct dependency.
	```bash
	npm install immer
	```

[MangoSeven]

My problem is solved, thank you.