admin-bro/upload error: BasePropertyComponent.

에러

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of BasePropertyComponent.

 

내용

기존에 있던 관리자 페이지에 새로운 기능을 추가하는 요청을 받았다.

쉽게 변경이 가능 할 것 이라는 예상과는 다르게, 꽤 긴 시간이 걸렸다.

이유는 상단에 보여지는 에러 때문이다.

많은 검색을 통해서 왜 이렇게 됐는지 원인 파악을 위해 시도를 했고 결국에는 문제점을 파악하고 해결을 하였다.

 

원인

admin-bro가 해당 요소를 읽을 수 없다고 한다.

 

방법

properties를 수도 없이 고쳐보고 options도 고쳐보고  action에서도 추가했다가 뺏다가를 반복하고

진짜 계속 검색과 수정을 반복한 결과

내가 해결한 방법은 총 2가지로 정리 할 수 있다. (properties까지 입력을 해놓은 상태라고 가정을 한다.)

 

properties 입력 코드

{
            resource: model,
            features: [
                uploadFeature({  # const uploadFeature = require("@admin-bro/upload")
                    provider: {  # provider는 공식문서를 보면 잘 설명이 돼 있다.
                        local: {
                            bucket: path.join(
                                __dirname,
                                "../../uploads/images"
                            ),
                        },
                    },
                    properties: {   # properties는 공식문서를 보면 된다.  
                        key: "uploadedFile.path",
                        bucket: "uploadedFile.folder",
                        mimeType: "uploadedFile.type",
                        size: "uploadedFile.size",
                        filename: "uploadedFile.filename",
                        file: "uploadedFile",
                    },
                    validation: {
                        mimeTypes: [
                            "image/png",
                            "image/jpg",
                            "image/jpeg",
                            "image/gif",
                            "image/bmp",
                        ],
                    },
                }),
            ],
            options: {
                actions: {},
            },
        },

---

1.  node-modules, package-lock.json  제거

  내가 쓰는 버전에 문제가 있을 수도 있다는 생각을 가지게 되었고, 제거 후 재설치 하였다.

  그러나..... 똑같이 Error를 보게 됐다. (그래도 이 작업이 문제라고 생각하지 않기 때문에 기록을 한다.)

 

2. develop -> product로 변경

  검색 중 알게 된 부분을 캡쳐 해 왔다.

출처:https://github.com/SoftwareBrothers/adminjs/issues/605

이 분의 말씀으로는 실제 배포단계에서 이미 번들이 사용 되었고 묶여 있기 때문에 실패한다고 한다.(잘... 모르지만 어쨋든)

로컬에서 테스트를 진행해보려고 한다면, admin을 삭제 한 후에 진행을 해야 한다. 

 

이분이 남기신 글의 밑에 다른 분이 글을 써주셨다.

출처:https://github.com/SoftwareBrothers/adminjs/issues/605

thanks, you're right I just change development to production in my NODE_ENV and now it works fine.

---> NODE_ENV에서 dev-> pro 로 바꾸었더니 정상 처리가 됐다고 !!!!

 

실제로 나도 바꿔 주었더니 해결이 됐다.!!!!! (Thank you for wojtek-krysiak , AmiXDev)

 

 Ref.

https://github.com/SoftwareBrothers/adminjs/issues/405

https://github.com/SoftwareBrothers/adminjs-upload/issues/25

https://github.com/SoftwareBrothers/adminjs/issues/605#issuecomment-692706364

Upload image problem after Deployment · Issue #605 · SoftwareBrothers/adminjs

Rollup PARSE_ERROR and error in the UI · Issue #25 · SoftwareBrothers/adminjs-upload

Image Upload for the latest version of adminBro · Issue #405 · SoftwareBrothers/adminjs

 

제가 겪은 오류를 기록하였지만 혹시라도 부정확한 정보를 전달드릴수 있습니다. 틀린 부분이 있으면 댓글을 남겨주세요.