[Vue]Can't resolve 'fs' in 오류

teachable audio를 이용할 때 발생하는 오류

구글링을 해보니 이러한 오류로 발생한다고 한다.

 => "Module not found: Error: Can't resolve 'fs'" 오류는 Webpack 버전 5에 주요 변경 사항이 있기 때문에 발생합니다.

 

=> Vue.js는 일반적으로 웹 브라우저에서 실행되는 클라이언트 사이드 프레임워크입니다. 웹 브라우저 환경에서는 기본적으로 파일 시스템에 직접 액세스할 수 없기 때문에, Node.js의 파일 시스템 모듈(fs)을 사용하는 코드는 브라우저에서 실행될 때 오류가 발생할 수 있습니다.

"can't resolve 'fs'" 오류는 보통 웹팩(Webpack)이나 Vue CLI와 같은 빌드 도구를 사용하여 Vue.js 애플리케이션을 번들링할 때 발생합니다. 번들링 과정에서 웹팩은 의존성을 해석하고 필요한 모듈을 가져오는데, 파일 시스템 모듈(fs)은 브라우저 환경에서 사용할 수 없기 때문에 해당 모듈을 해석할 수 없다는 오류가 발생하는 것입니다.

"browser":{"fs":false}를 package.json에 추가함으로써, 해당 설정은 번들링 과정에서 파일 시스템 모듈(fs)을 사용하지 않도록 지시합니다. 이렇게 하면 웹팩이 파일 시스템 모듈을 포함하지 않고 애플리케이션을 번들링할 수 있습니다.

이러한 설정은 보통 브라우저 환경에서 실행되는 Vue.js 애플리케이션에서 Node.js의 특정 모듈을 사용하는 경우에 유용합니다. 대부분의 경우, 파일 시스템 모듈은 서버 사이드(Node.js)에서 필요한 기능이므로 브라우저에서는 해당 모듈을 사용할 필요가 없습니다. 따라서 "browser":{"fs":false} 설정을 추가하여 번들링 시에 해당 모듈을 제외시키는 것이 일반적인 해결 방법입니다.

 

발생오류

node_modules/@tensorflow-models\speech-commands/package.json에 추가

위와 같이 쓰라고 stackoverflow에서 나왔으나 나의 오류는 fs오류이기 때문에 "fs": false 이것만으로도 해결이 된다.

 

하지만 git에 올릴 때 node_modules를 올리지 않기 때문에 새로 clone받아 npm install하면 오류 다시 발생

 

그 경우 node_modules를 새로 npm i를 할 때 변경사항으로 바꿀 수 있는 파일을 만들면 된다.

#.patch-package

npm i patch-package

package.json에 추가

ex) npx patch-package @tensorflow-models/speech-commands

npx patch-package {바꿀 패키지명}

-변화를 감지하지 못하는 경우에는 뒤에 --exclude를 작성해주면 작업이 진행된다.

 

dependancy오류가 나면 package.lock.json제거 후 다시 npm i

 

patch파일이 성공적으로 만들어지면 node_modules를 지우고 다시 install하면 자동으로 수정되는 결과를 볼 수 있다.