[heroku] Cannot find module 'webpack' 에러 해결 방법

 

오랜만에 다시 heroku에 프로젝트 배포를 하려는데

자꾸 저 에러가 뜬다

 

분명 내 컴퓨터에선 잘 돌아가는데 자꾸 웹팩을 찾을수 없단다

로그테일을 보니

2021-02-14T08_12_14_075Z-debug.log

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
2021-02-14T08:12:14.072560+00:00 app[web.1]: npm ERR! Failed at the pirates@1.0.0 start script.
2021-02-14T08:12:14.072710+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2021-02-14T08:12:14.084426+00:00 app[web.1]: 
2021-02-14T08:12:14.084751+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2021-02-14T08:12:14.084956+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2021-02-14T08_12_14_075Z-debug.log
2021-02-14T08:12:14.170327+00:00 heroku[web.1]: Process exited with status 1
2021-02-14T08:12:14.254487+00:00 heroku[web.1]: State changed from starting to crashed
2021-02-14T08:12:20.716795+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=cheesu001.herokuapp.com request_id=a9a004e0-d046-4f25-a2f8-545fab788982 fwd="124.58.249.175" dyno= connect= service= status=503 bytes= protocol=https
2021-02-14T08:12:21.009151+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=cheesu001.herokuapp.com request_id=a06f1f6d-04ae-4700-8e24-212cb5cab358 fwd="124.58.249.175" dyno= connect= service= status=503 bytes= protocol=https
2021-02-14T08:12:22.548024+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/sw.js" host=cheesu001.herokuapp.com request_id=e1dbf1a0-e255-41b2-826f-2abcb89bb87f fwd="124.58.249.175" dyno= connect= service= status=503 bytes= protocol=https
 
cs

 

뭐 이런것도 쭉 올라오고

디펜던시설정에서 뭔가 잘못된건가 해서 버전도 올려보고 캐쉬도 멈추고 

npm 인스톨도 다시 해보고 하는데도 해결될 기미가 보이지 않았다.

 

한참동안 구글링하면서 아둥바둥 하다가도 대체 뭐가 문제 일까하며 조금씩

 

수정하고 배포하고 수정하고 배포하고 하는데

배포할때마다 거슬리는 뭔가가 나온다

 

 

 

난 그냥 헤로쿠 배포하면서 꾸미기 용도로 저런 모양 만들어 놓은건줄 알았더니

내용을 보니 이제 Heroku-16 스택은 지원을 안한단다

검색해서 내용을 좀더 찾아보니 앵간하면 20으로 마이그레이션을 하라고 한다.

아 설마 저거때문일까 설마 ㅋㅋㅋ 아직까진 지원하는거잖아 ㅋㅋㅋ

 

저걸 보고도 1시간을 더 삽질하다가

진짜 예전스택이라 버전업된거 인식을 못하고 오류뜨는건가 싶어서

 

바로 heroku 20 stack로 마이그레이션 한 후에

 

배포했더니 바로 해결...

 

이제 잘돌아간다..

 

 

하... 

 

4년전에 만들어놧던 프로젝트에 인공호흡기 달아준다고 반나절을 삽질했다.

 

그래도 다시 서비스되는걸 보니 기분이 뿌듯 하다.

 

 

 

 

얼마전 예전에 공부용으로 만들어 뒀던 프로젝트에서 사용하는

MLab mongoDB 서비스가 atlas로 통합된다고

atlas로 마이그레이션 하지 않으면 데이터가 다 날아갈 것이라는 내용의 메일이 날아 왔었다.

 

당장 데이터가 날아간다는데 부랴부랴 마이그레이션 문서 찾아서 하라는대로 해서 

 

데이터를 옮겨놓고 클러스터 만들어서 굴려놓긴 했는데 

서비스하는곳이 바뀌면서 접속 URL이 달라져버렸다

 

기존엔

 

mongodb://[사용자]:[비밀번호]@ds145389.mlab.com:45389/[DB]

이런식이었는데

Atlas로 바뀌면서

mongodb+srv://[사용자]:[비밀번호]@cheesustudy.ujge0.mongodb.net/[DB]?retryWrites=true&w=majority

이렇게 형식이 많이 바뀌었다

url만 바꾸면 되는줄 알고

nodejs db 커넥트 하는 부분에서 URL을 바꿨는데

에러가 뜬다

 

대충 에러 내용은 접속 url형식이 +srv << 이렇게 된건 못쓴다는 내용이었다.

 

구글링을 해보니 mongoose 예전 버전에서는 저 url방식으로 접속이 불가능 하다는 것.

 

다른 방법은 없고 일단 몽구스 버전부터 올려야 했다.

 

3년전인가 4년전에 만들어 놓고 놔뒀던 소스라 잘 될까 했는데

 

역시 안된다.

몽구스 버전 업데이트를 하는데 의존성에 엮여있는것들이 나오고

 

그것들도 버전이 낮아서 제대로 안된다는 내용..;;

 

어차피 예전에 쓰던 노트북에 있던 프로젝트였고

 

현재 집에서 쓰는 데스크탑에선 셋팅한적이 없으므로 아얘 

 

데스크탑에서 새로 셋팅을 하기로 했다.

 

node설치하고 npm으로 새로 싹다 받아서 

 

예전에 깃에 올려뒀던 소스 받고 몽구스 버전만 바꾸어 주었다.

 

혹시 나처럼 mlab 쓰다가 atlas로 강제 이전하게 되었는데

 

디비 접속 오류 나는 사람은 그냥 싹 밀고 버전업 하면 될 것이다.

 

 

webpack.optimize.OccurenceOrderPlugin 

is not a constructor 

에러 해결 방법



react.js와 express 를 함께 사용 하는 강좌를 보며 예제를 만드는 와중에



npm run build 까진 잘 되다가 


npm run developer 명령어로 서버 실행을 하자





이런 에러가 발생한다.


대충 보니 OccurenceOrderPlugin  라는 녀석의 생성자가 없다 뭐 그런 내용인듯 하다


일단 해당 플러그인을 실행하는 부분에서 에러가 났나본데


한참동안 구글링을 하다가 


문득!


강좌는 몇달전에 만들어진거고 나는 이번에 생성하고 웹팩이나 바벨등을 설치 했으니


버전이 다르지 않을까? 라는 생각을 가지고


다시 검색을 해보니


와.. 세상에... 


이름이 바뀌었다 ㅋㅋㅋ


OccurenceOrderPlugin
OccurrenceOrderPlugin


구분이 갑니까?



webpack 1버전에서 2버전으로 올라오면서


스펠링 'r' 이 하나 더 늘었다



1
2
3
4
5
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],
cs



이렇게 되어있던 코드를


1
2
3
4
5
plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],
cs


이렇게 바꿔주도록 하자...


그럼 해당 에러는 사라지게 된다.


저 밑에 NoErrorsPlugin 이것도 문제가 있는데 다음 포스팅에 올리기로 한다.



해당 예제는

https://github.com/cheesu/react-express-study


에서 확인 할 수 있습니다.

node js cannot read property 'replace' of undefined 에러 해결 



방금전 ejs를 못찾는다는 에러를 해결후 예제대로 테스트를 해봤는데


서버 실행시키는 것 까지는 성공


그러나 브라우저에서 해당 포트번호 적고 띄워보니


cannot read property 'replace' of undefined 라는 에러가 나타나면서 접속에러가 떠버린다.


이건 뭐 내가 뭘 잘못했는지도 모르겠고


30분 삽질하다가 예제의



1
2
3
4
5
6
7
8
9
10
11
12
var ejs = require('ejs');
var http = require('http');
var fs = require('fs');
 
http.createServer(function (request, response) {
    fs.readFile('ejstest.ejs''utf8'function (error, data) {
        response.writeHead(200, { 'Content-Type''text/html' });
        response.end(ejs.render(data));
    });
}).listen(5000function () {
    console.log('Server Running...');
});
cs


서버실행 부분의 readfile를 보니


ejs 파일명만 적어놓고 경로는 없다는걸 보고


혹시나 하는 생각에 위의 예제가 있는 폴더 안에 ejs 파일을 넣고 실행시켰더니 정상 동작 한다....


그렇지.. 아직 맵핑도 없고 아무것도 없는 상태였지...


하.. 멍청한짓을 하다니;;


너무도 자연스럽게 서버와 ejs는 분리되는게 맞겠지 하면서


폴더를 나눠놓고 실행시켜서 나타났던 오류였다


cannot read property 'replace' of undefined  이 오류가


이 포스팅의 이유만으로 나타나는 것은 아니고 여러가지 이유가 있겠지만


혹시나 나와 같은 실수를 하는 사람이 있거나 내가 같은 실수를 또 할 것만 같아서


이렇게 포스팅을 한다.




Cannot find module 'ejs' 에러 해결 방법


드디어 node.js 에 나도 입문을 하게 되었다.


node.js 설치 과정은 다른 블로그에도 많이 나와있고 나중에 시간이 되면 포스팅 하기로 하고


이 포스팅 내용을 검색해 들어온 사람들은 이미 설치를 끝내고 나서 진행하다가 찾아 온 사람들이니 생략


그리고 진짜 오늘 시작해본것 이기 때문에 진정한 야매가이드라는걸 잊지 말고


내 포스팅을 전부 신뢰하진 말길....




nodejs 서버에 jsp 같은 파일을 띄우려면 템플릿? 이라는걸 사용해야 한단다


jade도 있고 ejs도 있는데 html이랑 제일 유사하게 생긴게 ejs라고 하길래 어떻게 하는가 찾아 봤더니


ejs를 설치 하란다


그래서 설치 하고 예제에 있는대로 작성하고 서버를 실행시켰더니


Cannot find module 'ejs' 라는 에러가 나타난다





이런게 뜨길래 구글링해서 찾아봤더니


역시나 스택오버플로우 형님들이 해결책들을 제시해 주었다




package.json 이라는 녀석을 열어 보면 저렇게 mvc2에서 디펜던시 해주는것처럼 종속성에 대한 정보가 들어있는 녀석이 있는데


저기에 아마 ejs 라는 동그라미친 부분이 없어서 나오는 에러이다


저부분을 추가해 주면 해결이 된다고 하는데 난 해결이 안된다...



그래서 스크롤을 좀더 내려보니


npm install ejs --save


이렇게 설치를 해야 한다고 한다


npm 명령어중 --save 는


설치된 node 모듈을 pakage.json 파일 내의 디펜던시 목록에 추가 하게 하는 옵션이다.


나도 아직 nodejs 설치 한지 두시간밖에 안지나서 정확히는 모르겠다.



여하튼 에러나는 사람은 저렇게 다시 설치 해보도록 하자



그리고 만약 프로젝트 폴더에 package.json 이 파일이 없다면


프로젝트 등록? 뭐 그게 안된거다


방법은 해당 프로젝트 폴더로 들어가서


npm init 라는 명령어를 실행시켜


어플리케이션을 보관할 디렉토리를 작업 디렉토리로 설정 하도록 하자


대충 엔터치면 지나가는데


해당 어플리케이션 설명이나 리파지토리 뭐 이런거 적으라고 나오는건


알아서 적도록 하자 그냥 엔터쳐서 넘겨도 된다.


그중에


entry point:(index.js) 라고 나오는데


기본 파일의 이름을 지정 하는것 이라고 한다.



ps: 뒤에 --save 붙이는게 의무적인건 아니라고 한다... 근데 난 저거 붙여서


해결했으니까 ㅠ_ㅠ;;; 


ps2: 에러난 이유가 환경 변수의 문제일 수도 있겠다는 제보를 받았다

노드js는 C에 설치 하고 프로젝트폴더는 D에 있어서 

내가 처음에 설치 할떈 글로벌로 설치 하면 드라이브 상관 없이

다 되는 건줄 알고 npm install ejs -g 라는 -g 옵션을 썻는데

이렇게 설치 하면 C에 경로가 잡히가 되는거 아니냐는 의견을 받았음.

확인 해보진 않았지만 혹시나 다른 사람들은 확인해보시길






+ Recent posts