본문 바로가기
반응형

webpack4

gatsby build 이후 gatsby serve시 index(root)가 로드 되지 않는 오류 1. 일단 정말 싸발적이다. 이것 때문에 한 한시간 동안은 고민을 하였다.. 일단 gatsby develop을 통해 렌더링한 페이지는 모든 라우트가 정상적으로 작동하였다. 그러나 문제는 여기서 발생한다. gatsby 프로젝트 폴더를 gatsby build하고 gatsby serve를 통해 localhost:9000 에서 실행해보면 / 루트 라우트가 정상적으로 렌더링 되지 않는다. 아래 사진과 같이 말이다. 말도 안나오는 오류이다. gatsby new 로 새 프로젝트를 생성하고 파일들만 옮겨서 똑같이해봐도 똑같은 오류가 발생한다. 크롬에서도 같은 오류가 발생했다. 2. 구글링도 해봤지만 답은 나오지 않았다. 그래서 결국 콘솔의 오류를 눌러보았다. 오류가 발생하는 파일에서는 "Amazing Pandas Ea.. 2020. 7. 31.
[React] Webpack - Module not found: Error: Can't resolve 'fs' , 'net' in ... 1. webpack을 사용하던 도중, 모든 것을 정확히 설정하였는데도 불구하고 webpack에서 오류메세지가 뜨기도 한다. node_modules 에 있는 모듈에 대한 오류인데, 에러메세지는 다음과 같다. 'fs'와 'net' 모듈을 resolve 할 수 없다는 에러이다. 사실 이러한 오류는 구글링을 조금만 해보면 바로 나온다. 해결책은 다음과 같다. 2. module.exports = { entry: './server.js', output: { filename: 'compiled.js' }, node: { fs: 'empty', net: 'empty', }, resolve: { extensions: ['.js', '.jsx'] }, module: { rules: [ { test: /\.(js|jsx)$.. 2020. 7. 13.
[React] Webpack - Module not found: Error: Can't resolve ... 1. webpack 을 사용하다가 이런 오류를 마주치곤한다. node_modules 와 관련된 문제라면 그러려니 하겠지만, 내가 import 한 모듈에 대한 문제가 발생한것이다. 그러나 이 에러의 해결법은 간단하다. 2. webpack docs 에서 resolve.extensions 부분을 읽어보면 아래와 같이 설명 되어 있다. resolve.extensions 는 import할때 확장자를 붙이지 않아도 되도록 하는 역할을 한다. 그러므로 webpack.config.js 을 아래와 같이 수정해주면 된다. module.exports = { entry: './server.js', output: { filename: 'compiled.js' }, resolve: { extensions: ['js','jsx'].. 2020. 7. 12.
[Webpack] file-loader Javascript에서는 ESM, commonJs 를 통하여 다른 JS파일에서 내보낸 함수나, 객체등을 가져올 수 있다. //index1.js const obj = require('./index2.js'); console.log(obj.name); //index2.js const obj = {name: 'from index2'}; module.exports = obj; 이렇게 index1.js, index2.js 파일을 만들고 node js로 실행해보면 name이 정상적으로 출력되는 것을 확인할 수 있다. node js에서는 아직은 experimental module로 ESM을 지원하기 때문에, 특별한 설정을 하지 않으면 ESM을 사용할 수 없기에 CommonJs를 이용했다. 물론 ESM과 commonJ.. 2020. 3. 11.
반응형

티스토리툴바