! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

위즈모 그리드 업그레이드 이슈 > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

ReactJS 위즈모 그리드 업그레이드 이슈

페이지 정보

작성자 한기준 작성일 2024-05-27 11:01 조회 117회 댓글 0건
제품 버전 : 5.20232.939
컨트롤 이름 : 그리드

본문

안녕하세요

LG 에너지 솔루션 EMS 프로젝트 진행 중인 LG CNS 한기준 책임입니다.

 

크롬브라이저 이슈에 따른 버전 업데이트를 진행중입니다.

 

업데이트 버전은 다음과 같습니다.

 

"@grapecity/wijmo": "5.20232.939",

        "@grapecity/wijmo.react.all": "5.20232.939",

        "@grapecity/wijmo.react.grid": "5.20232.939",

        "@grapecity/wijmo.react.input": "5.20232.939",

 

 

최초 install(yarn install / yarn start:dev 후 실행에는 문제가 없는데, 재실행(yarn start:dev) 시 다음과 같은 에러가 발생하고 있습니다.

하지만 어플리케이션 동작엔 문제가 없습니다.

 

NodeJS 16.14.1

React 17.0.2

 

현재 저희 프로젝트에서 사용하는 노드와 리액트 버전은 위와 같고,

 

해당 에러를 처리하기 위해서  

 

  1. - install 'crypto-browserify'
  2. 위즈모 업그레이드 && [중요!] Google Chrome 정책 변경으로 인한, Wijmo 업그레이드 수정 안내 (24.3.27 업데이트) > FAQ | 메시어스 개발자 포럼 (mescius.co.kr)React polyfill 코드 참조 하여 추가도 해 보았습니다.

 

그렇지만 증상이 동일하여, 문의 메일 드립니다.

 

해결 방법이 있다면 공유 부탁드립니다.

 

감사합니다.

 

WARNING in ./node_modules/@grapecity/activereports/lib/node_modules/@grapecity/ar-js-pdf.js 4465:10-27

Module not found: Error: Can't resolve 'crypto' in 'C:\EMS\ems_react_singlex\node_modules\@grapecity\activereports\lib\node_modules\@grapecity'

 

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.

This is no longer the case. Verify if you need this module and configure a polyfill for it.

 

If you want to include a polyfill, you need to:

        - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'

        - install 'crypto-browserify'

If you don't want to include a polyfill, you can use an empty module like this:

        resolve.fallback: { "crypto": false }

@ ./node_modules/@grapecity/activereports/pdfexport/index.js 1:0-71

@ ./src/features/ems/mat/popup/Test.tsx 14:0-44

@ ./src/ sync ^\.\/features.*$ ./features/ems/mat/popup/Test.tsx ./features/ems/mat/popup/Test

@ ./src/components/layout/content/contentTab.tsx 95:55-97

@ ./src/components/common/elements/Search/search-table.tsx 15:0-76 45:31-49

@ ./src/components/common/index.ts 21:0-107 21:0-107 21:0-107 21:0-107

@ ./src/index.tsx 16:0-54 87:37-52

 

WARNING in ./node_modules/@grapecity/wijmo.react.base/es5-esm.js 188:12-39

Module not found: Error: Can't resolve 'react-dom/client' in 'C:\EMS\ems_react_singlex\node_modules\@grapecity\wijmo.react.base'

@ ./node_modules/@grapecity/wijmo.react.input/es5-esm.js 50:0-60 72:2-15 86:2-15 106:2-15 120:2-15 132:2-15 146:2-15 158:2-15 170:2-15 190:2-15 204:2-15 216:2-15 230:2-15 244:2-15 258:2-15 272:2-15 402:75-88 403:12-40 472:2-15 518:2-15 560:2-15 598:8-41 608:8-40 632:6-39 633:6-38 643:6-39 663:13-45 696:2-15 710:2-15

@ ./src/components/common/elements/Form/ComboBox.tsx 11:0-86 230:44-55 319:43-54 434:44-57 524:43-56

@ ./src/components/common/index.ts 9:0-63 9:0-63

@ ./src/index.tsx 16:0-54 87:37-52

  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

2 답변

ReactJS Re: 위즈모 그리드 업그레이드 이슈

추천1 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 MESCIUS루시 작성일 2024-05-29 08:49 댓글 5건

본문

안녕하세요 메시어스입니다.


문의하신 내용에 대해 답변드립니다.


1. Module not found: Error: Can't resolve 'crypto' 경고메세지

=> 해당 경고 메세지는 Wijmo가 아닌 ActiveReportsJS에서 서드파티 polyfills와 webpack 설정의 조합으로  발생하는 메세지로 파악됩니다.


이미 리포트된 경고메세지로 이를 해결하기 위해서는 ActiveReportJS V4.0 이상으로 업그레이드하여 사용하시면 됩니다.


만일 ActiveReportsJS 기술적 문의가 있으신 경우에는, ActiveReportsJS Q&A 게시판을 이용하시기 바랍니다.


혹은 라이선스 구매와 관련되어 궁금하신 점이 있다면 sales-kor@mescius.com 혹은 1670-0583 으로 연락주시면 확인 후 도와드리겠습니다.


2. Module not found: Error: Can't resolve 'react-dom/client' 경고메세지

=>해당 경고 메세지는 아래와 같이 React 18버전과 17버전 사이에 'react-dom' 모듈에 대한 경로 차이와 더불어 2023 v2 버전이 React 18 버전을 지원하여 나타난 것으로 추측됩니다. 

 

import ReactDOM from 'react-dom'; (v17) 
import ReactDOM from 'react-dom/client'(v18)

 

이를 해결하기 위해 react-dom 파일을 복사 및 교체하는 코드를 package.json 안에 설정하여 프로젝트 실행 시, 파일 처리가 될 수 있도록 해보시기 바랍니다.


"scripts": {
"start": "npm run prepare-react17 && react-scripts start",
"prepare-react17": "npx copyfiles ./node_modules/react-dom/umd/react-dom.production.min.js ./node_modules/react-dom -f && npx renamer --find react-dom.production.min --replace client ./node_modules/react-dom/react-dom.production.min.js"


다른 궁금한 점이 생기면 문의주시기 바랍니다.


감사합니다.

메시어스 드림

댓글목록

한기준님의 댓글

한기준 작성일

안녕하세요
최초 진행시에는 정상적으로 파일 카피 , 동작을 합니다.
그린더 재시작시에는
ERROR: Unable to rename ./node_modules/react-dom/react-dom.production.min.js to node_modules\react-dom\client.js [file exists]

에러가 발생하는데 보다 근본적인 해결방 법 없을까요?

파일체크 로직을 넣으려고 해도 로컬은 윈도우 서버는 리눅스여서 적용이 쉽지 않네요.

삭제된 댓글

한기준 작성일

삭제된 댓글 입니다.

삭제된 댓글

한기준 작성일

삭제된 댓글 입니다.

한기준님의 댓글

한기준 작성일

데이터 조회하고 그리드 렌더링 시에 나는 에러인 것같은데 이것도 확인 부탁드립니다.

TypeError: reactDomClient.createRoot is not a function at ComponentBase.selectiveDomRender (es5-esm.js:287:1) at DirectiveCellFactory._renderCell (es5-esm.js:179:1) at DirectiveCellFactory.renderTemplate (es5-esm.js:135:1) at DirectiveCellFactoryBase.updateCell (es5-esm.js:252:1) at GridPanel._renderCell (es5-esm.js:1133:1) at GridPanel._renderRow (es5-esm.js:1071:1) at GridPanel._updateCells (es5-esm.js:841:1) at GridPanel._updateContent (es5-esm.js:828:1) at FlexGrid._updateContent (es5-esm.js:7154:1) at FlexGrid._updateLayout (es5-esm.js:6975:1)

한기준님의 댓글

한기준 작성일

const el_div_name = cell.querySelector('.header-name');

기존 사용 코드가 null로 들어오는데 변경점이 있을까요? cell은 위즈모 그리드 cell입니다.

ReactJS Re: 위즈모 그리드 업그레이드 이슈

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 MESCIUS루시 작성일 2024-05-30 16:35 댓글 1건

본문

안녕하세요 메시어스입니다.

 

문의하신 내용에 대해 답변 및 확인요청 드립니다.

 

1. ERROR: Unable to rename 오류메시지

=> 해당 메시지는 서버를 재시작할 때 react-dom의 파일명을 다시 지정하여 같은 이름의 파일끼리 충돌되어 나타나는 오류메시지인 것으로 추측됩니다.


프로젝트를 실행할 때 해당 파일이 모듈에 있는지 확인한 다음 파일이 있다면 package.json에 prepare 17 라인이 실행되지 않도록 조건문 설정 또는 초기 실행이 해당 파일이 없다면 새로 생성되도록 조건문을 설정할 수 있습니다.


이와 관련하여 참고하실 수 있는 코드를 아래에 첨부해 드리오니 확인하여 보시길 바랍니다.

 

[package.json 파일]

  "scripts": {
    "start": "npm run prepare-react17 && react-scripts start",
    "prepare-react17": "npx shx test -f ./node_modules/react-dom/client.js || (npx copyfiles ./node_modules/react-dom/umd/react-dom.production.min.js ./node_modules/react-dom -f && npx renamer --find react-dom.production.min --replace client ./node_modules/react-dom/react-dom.production.min.js)",
    (...)
  }
}

 

다만 오류메시지를 해결할 수 있는 근본적인 해결책은 React 18 버전으로 업그레이드 사용하는 것이오니 참고 부탁드립니다.

 

2. createRoot is not a function 오류메시지

=> 해당 메시지는 Wijmo 컨트롤의 문제이기보다는 React 버전별 함수 지원 차이로 인해 발생된 것으로 확인됩니다.


createRoot 함수는 18버전에서 지원하는 기능이므로 React 18 버전으로 업그레이드 하시거나 React 17 버전을 사용하는 경우에는 아래 코드와 같이 createRoot 함수가 아닌 render 함수를 적용해 보시길 바랍니다.

import ReactDOM from 'react-dom';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);


3. querySelector로 가져온 셀 값이 null로 출력

=> 현재 문의하신 내용에 대해 좀 더 디테일한 체크가 필요하여 확인 요청드립니다.


1) 현재 특정 셀에 클래스를 추가하여 셀을 가져오고 있는데, 해당 셀의 클래스를 어떤 이벤트를 통해서 어떻게 설정하셨는지 사용하신 코드 공유 및 단계 요청드립니다.(예.  formatItem 이벤트 내부에서 특정 셀에 addClass와 같은 메서드로 클래스 설정)

 

2). 공유하신 코드의 querySelector 메서드를 통해 셀을 가져오는 경우, 어떤 이벤트와 인자값을 가지고 cell을 접근 및 querySelector 셀 영역을 가지고 오는지 해당 코드 및 디테일한 단계 공유부탁드립니다. (예. 그리드 클릭 이벤트 내에서 querySelector 선언)


정확한 답변을 위해 요청드리오니 내용 확인 후 회신주시면 감사드리겠습니다.

 

감사합니다.

메시어스 드림

댓글목록

한기준님의 댓글

한기준 작성일

빠르고 친절한 답변 감사드립니다.

2,3번 답변 내용은 신경 안쓰셔도 될 것 같습니다.

감사합니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.