Module not found: Error

import React, { useContext, useState } from "react";
import { useParams } from "react-router-dom";
import { useEffect } from "react";
import { Nav } from "react-bootstrap";
import "../App.css";
import { addItem } from "./../store.js";
import { useDispatch } from "react-redux";
import { set } from "immer/dist/internal";

// import {Context1} from './../App'

// import styled from 'styled-components'

// let YellowBtn = styled.button`
// background : ${props => props.bg};
// color : ${props => props.bg == 'blue' ? 'white' : 'black'};
// padding : 10px
// `
// let Box = styled.div`
// background : grey;
// padding : 20px
// `

// class detail2 extends React.Component{
// componentDidMount(){

// }
// componentDidUpdate(){

// }
// componentWillUnmount() {

// }

// }

function Detail(props) {
// let {재고} = useContext(Context1) //보관함 해체

let [num, setNum] = useState("");
let [count, setCount] = useState(0);
let [alert, setalert] = useState(true);
let [탭, 탭변경] = useState(0);
let { id } = useParams();
let 찾은상품 = props.shoes.find((x) => x.id == id);
let [fade2, setFade2] = useState("");
let dispatch = useDispatch();

useEffect(() => {
console.log(찾은상품.id);
let 꺼낸거 = localStorage.getItem("watched", [찾은상품.id]);
꺼낸거 = JSON.parse(꺼낸거);
꺼낸거.push(찾은상품.id); // 이미 있으면 push()하지마라 추가
꺼낸거 = new set(꺼낸거);
꺼낸거 = Array.from(꺼낸거);
localStorage.setItem("watched", JSON.stringify(꺼낸거));
// 그 페이지에 보이는 상품 id 가져와서
// localStorage에 watched 항목에 추가
}, []);

// useEffect(()=>{
// if (isNaN(num) == true){
// alert('그러지마세요')
// }
// }, [name])

useEffect(() => {
setFade2("end");
return () => {
setFade2("");
};
}, []);

// 업데이트는 재랜더링이랑 같음
// useEffect 안에 있는 코드는 html 렌더링 이후에 실행됨
// 복잡한 연산을 늦게 실행되어야 사람들이 사용하기 좋음 효율적인 동작
// 서버에서 데이터 가져오는 작업을 할떄 사용
// 타이머
useEffect(() => {
let a = setTimeout(() => {
setalert(false);
}, 2000);
return () => {
clearTimeout(a);
};
}, []);
// [] 안에 실행조건을 넣을수 잇음 // [count] 넣으면 count라는 state가 변할때만 실행됨
//1회만 실행하고 싶으면 []
// 리턴을 넣으면 useEffect 동작 실행전에 실행 됨 clean up 함수 서버데이터 요청 때 좋음 (기존데이터 제거)

return (
<div className="container">
<div className={"container start " + fade2}></div>
<input
onChange={(e) => {
setNum(e.target.value);
}}
/>
{/* {
alert == true
? <div className="alert alert-warnig">
2초 이내 구매시 할인
</div>
: null
} */}

{/* <Box>
<YellowBtn bg="blue">버튼</YellowBtn>
<YellowBtn bg="orange">버튼</YellowBtn>
</Box> */}
<button
onClick={() => {
setCount(count + 1);
}}
>
{" "}
버튼
</button>
<div className="row">
<div className="col-md-6">
<img
src="https://codingapple1.github.io/shop/shoes1.jpg"
width="100%"
/>
</div>
<div className="col-md-6">
<h4 className="pt-5">{찾은상품.title}</h4>
<p>{찾은상품.content}</p>
<p>{찾은상품.price}원</p>
<button
className="btn btn-danger"
onClick={() => {
dispatch(addItem(찾은상품.title));
}}
>
주문하기
</button>
</div>
</div>

<Nav variant="tabs" defaultActiveKey="link0">
<Nav.Item>
<Nav.Link
onClick={() => {
탭변경(0);
}}
eventKey="link0"
>
버튼0
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link
onClick={() => {
탭변경(1);
}}
eventKey="link1"
>
버튼1
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link
onClick={() => {
탭변경(2);
}}
eventKey="link2"
>
버튼2
</Nav.Link>
</Nav.Item>
</Nav>

<TabContent shoes={props.shoes} 탭={탭} />
</div>
);
}
function TabContent({ 탭, shoes }) {
let [fade, setFade] = useState("");

useEffect(() => {
setTimeout(() => {
setFade("end");
}, 100);
return () => {
setFade("");
};
}, [탭]);

return (
<div className={"start " + fade}>
{[<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][탭]}
</div>
);
}
// return <div className="start end">{
// [<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][탭]
// }
// </div>
// return [<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][탭]

export default Detail;

ERROR in ./src/routes/Detail.js 14:0-42
Module not found: Error: Can't resolve 'immer/dist/internal' in '/Users/jiuk/react test/codingapple/shop/src/routes'

webpack compiled with 1 error and 2 warnings

이렇게 오류가 나네요 ㅠㅠ종속성문제인가요??

import { set } from "immer/dist/internal"; 여기무제인거같아요