angular universal 사용으로 인한 bootpay 이슈

[sanghyunh]

angular 7 + angular universal 환경에서 bootpay 모듈 오류가 있어 문의 드립니다.

angular universal 적용 참고

오류는 아래와 같으며 SEO 지원을 위한 server side rendering 적용 후 빌드 중에 오류가 발생하였습니다.

node_modules\bootpay-js\lib\event.js:32 Element.prototype.on = events.on; ^ ReferenceError: Element is not defined

임시로 package.json에서 bootpay 모듈 삭제 시 빌드 오류는 없어 집니다.

확인 부탁드리겠습니다.

감사합니다.

[gosomi151101]

frontend와 backend가 함께 컴파일 되는 경우는 현재 고려되지 않았습니다. frontend 기준으로 Vuejs, React, Angular등이 webpack으로 개발될때만 현재 고려되어 있어서 DOM API인 Element가 없어서 컴파일 에러가 나는 것으로 보입니다.

부트페이 결제 시 각 이벤트를 처리하는 용도로 각 on, off함수를 Override해서 사용중인데, Backend와 함께 컴파일이 되는 케이스를 위해서 Lazy Event Binding을 고려할 예정입니다.

현재 3.0.3-beta1이 npm에 배포가 된 상태이며 컴파일을 진행해보시고 문제가 발견되지 않으시면 결제 이벤트 관련 테스트 종료 후에 3.0.3으로 Release할 예정입니다.

피드백 주셔서 감사합니다!

[byungjuJin]

Angular Universal에서 동일하게 에러가 발생하여 아래와 같이 해결하였습니다.

import BootPay from 'bootpay-js'; 와 같이 import 하지 말고

사용하려는 component 에서 ngOnInit() {} 등에서 아래와 같이 import 하고 import('bootpay-js');

typings.d.ts 파일 등에서 아래와 같이 선언해서 쓰면 에러가 안 납니다. declare const BootPay: any;

[sanghyunh]

frontend와 backend가 함께 컴파일 되는 경우는 현재 고려되지 않았습니다. frontend 기준으로 Vuejs, React, Angular등이 webpack으로 개발될때만 현재 고려되어 있어서 DOM API인 Element가 없어서 컴파일 에러가 나는 것으로 보입니다.

부트페이 결제 시 각 이벤트를 처리하는 용도로 각 on, off함수를 Override해서 사용중인데, Backend와 함께 컴파일이 되는 케이스를 위해서 Lazy Event Binding을 고려할 예정입니다.

현재 3.0.3-beta1이 npm에 배포가 된 상태이며 컴파일을 진행해보시고 문제가 발견되지 않으시면 결제 이벤트 관련 테스트 종료 후에 3.0.3으로 Release할 예정입니다.

피드백 주셔서 감사합니다!

답변 감사합니다.

새로운 버전으로 적용 후 테스트 시 bootpay.js 의 151라인 localStorage 부분에서 에러가 발생합니다.

node_modules\bootpay-js\lib\bootpay.js:151 return window.localStorage.getItem(key); ^

TypeError: Cannot read property 'getItem' of undefined

angular universal localStorage 사용 참조 현재 저희 프로젝트에서는 위의 방식으로 localStorage를 사용하고 있습니다.

피드백 감사드립니다

[sanghyunh]

Angular Universal에서 동일하게 에러가 발생하여 아래와 같이 해결하였습니다.

import BootPay from 'bootpay-js'; 와 같이 import 하지 말고

사용하려는 component 에서 ngOnInit() {} 등에서 아래와 같이 import 하고 import('bootpay-js');

typings.d.ts 파일 등에서 아래와 같이 선언해서 쓰면 에러가 안 납니다. declare const BootPay: any;

답변 감사합니다.

알려주신 방법으로 적용하니 아래와 같은 오류가 발생하였습니다.

error TS1323: Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext'.

해당 오류로 구글링 후 tsconfig 정보를 변경해보았지만 오류가 계속 발생하고 있습니다.

tsconfig 정보도 공유해주시면 참고하겠습니다.

감사합니다.

[gosomi151101]

localStorage 역시 브라우저에서 사용가능한 함수라서 이부분도 예외처리를 해놓도록 하겠습니다. 저희가 따로 프로젝트로 angluar universal을 구축한 후에 테스트 후 3.0.4-beta1으로 배포될 예정입니다. 배포되면 답글로 회신 드리겠습니다.

[gosomi151101]

방금 3.0.4-beta1 버전이 릴리즈 되었습니다. Element DOM API인지 확인 한 후 이벤트를 모두 Binding하는 방식으로 수정하였습니다.

serverside에서 컴파일 될때는 에러가 없고 저희가 만든 테스트 페이지에서는 정상적으로 결제 창이 떳으나 클라이언트에 서 결제창이 제대로 뜨지 않는지 확인부탁드립니다.

package.json에서 'bootpay-js': '^3.0.4-beta1' 이라고 명시해주신 후 테스트 해주시면 됩니다.

문제가 없다고 피드백이 올 경우 저희가 몇가지 더 테스트해보고 3.0.4로 정식 릴리즈를 하도록 하겠습니다.

[byungjuJin]

Angular Universal에서 동일하게 에러가 발생하여 아래와 같이 해결하였습니다. import BootPay from 'bootpay-js'; 와 같이 import 하지 말고 사용하려는 component 에서 ngOnInit() {} 등에서 아래와 같이 import 하고 import('bootpay-js'); typings.d.ts 파일 등에서 아래와 같이 선언해서 쓰면 에러가 안 납니다. declare const BootPay: any;

답변 감사합니다.

알려주신 방법으로 적용하니 아래와 같은 오류가 발생하였습니다.

error TS1323: Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext'.

해당 오류로 구글링 후 tsconfig 정보를 변경해보았지만 오류가 계속 발생하고 있습니다.

tsconfig 정보도 공유해주시면 참고하겠습니다.

감사합니다.

tsconfig 에서 "module": "esnext" 라고 설정하면 됩니다. 아니면 require 문으로 바꾸거나요. 구글링으로 찾은 것을 적용하면 될텐데, 안된다니 이상하네요. if (isPlatformBrowser(this.platformId)) { import('bootpay-js'); }