[ERROR] module not found: error: you attempted to import /app/node_modules/react-refresh/runtime.js

[ERROR] module not found: error: you attempted to import /app/node_modules/react-refresh/runtime.js which falls outside of the project src/ directory. relative imports outside of src/ are not supported.
에러가 발생했다,,이 때는 뭐가 문제인 지 몰랐는데, Vite로 생성한 프로젝트인 지 모르고 create-react-app으로 생성한 프로젝트 실행 방식으로 실행해서 이럼..ㅎㅎ

암튼 create-react-app로 생성된 프로젝트가 맞는데 저런 에러가 뜰 때의 해결 방법을 적어보겠다.

• https://github.com/storybookjs/storybook/issues/17049 여기 필수 참고
• 처음에 성공을 한 방법

  1. Ran npm ls react-refresh and it shows a different of react-refresh package versions

     ├─┬ @storybook/preset-create-react-app@4.1.2
     │ └─┬ @pmmmwh/react-refresh-webpack-plugin@0.5.7
     │   └── react-refresh@0.14.0
     ├─┬ @storybook/react@6.5.7
     │ └── react-refresh@0.11.0
     └─┬ react-scripts@5.0.1
     

  2. cd node_modules/react-scripts and ran npm dedupe to de-duplicate multiple versions

  3. https://github.com/facebook/create-react-app/issues/11810

  4. Ran npm ls react-refresh to check existing versions for react-refresh

     ├─┬ @storybook/preset-create-react-app@4.1.2
     │ └─┬ @pmmmwh/react-refresh-webpack-plugin@0.5.7
     │   └── react-refresh@0.11.0 deduped
     ├─┬ @storybook/react@6.5.7
     │ └── react-refresh@0.11.0
     └─┬ react-scripts@5.0.1
       └── react-refresh@0.11.0 deduped
     

  5. npm start compiles & runs successfully

• 그리고 .dockerignore 을 만드니까 다시 같은 에러 발생
  • 에러 발생 이유 : 위에서 성공한 방법은 npm dedupe 를 밑처럼 두개 버전에 같아졌기 때문임. 근데 .dockerignore 를 올리면 node_modules 가 제외되고 새롭게 npm install을 하는데, 이때는 수정하기 전 버전으로 버전이 다르게 나와서 에러가 뜨는 것임

    ├─┬ @storybook/preset-create-react-app@4.1.2
    │ └─┬ @pmmmwh/react-refresh-webpack-plugin@0.5.7
    │   └── react-refresh@0.11.0 deduped
    ├─┬ @storybook/react@6.5.7
    │ └── react-refresh@0.11.0
    └─┬ react-scripts@5.0.1
      └── react-refresh@0.11.0 deduped
    

• 해결 방법(https://github.com/facebook/create-react-app/issues/11810 필수 참고)
  • 여기서 package.json 에 버전을 아예 0.11.0 으로 만들어버리는 코드를 넣으면 된다고 함

    "overrides": {
      "react-refresh": "0.11.0"
    }