CometChat UI breaks react app when compiling with AWS and Vite.

[fishChipsDevTeam]

The problem.

Installed the cometChat react UI kit on a react app run with vite. Everything works fine locally.

When deploying on our prodEnvironment on Aws amplify (Builds and deploys without errors) and running the App, it breaks when compiling and throws this error:

“Uncaught TypeError: Cannot convert undefined or null to object at Function.keys”

here is a sample of the code that fails when attempting to start the app:

var fv = Fi.exports.EVENTS;
Object.keys(fv).forEach(function(e) {     <--------- error: TypeError Canot convert…
if (fv[e] === 0)
cv.prototype[“on” + e] = function() {
this.scope.emit(e)
}
;
else if (fv[e] === 1)
cv.prototype[“on” + e] = function(t) {
this.scope.emit(e, t)
}
;
else if (fv[e] === 2)
cv.prototype[“on” + e] = function(t, n) {
this.scope.emit(e, t, n)
}
;
else
throw Error(“wrong number of arguments!”)
});

Environment

We modified the extensions and imports on some of the files from .js to .jsx for vite to be able to compile and locally it works just fine but it might have something to do with the issue when running on production Env(aws amplify).

Please provide the following:

• Version used: "@cometchat-pro/chat": "3.0.2-beta1",
• Other modules/plugins/libraries that might be involved:
  "vite": "^2.6.2",
  "aws-amplify": "^4.2.9",

[priyadarshininadar]

Hi @fishChipsDevTeam,
Do you see this issue only when the React UI Kit is included in this project? If yes, could you please share the package.json file of your project, this will help us in reproducing the issue at our end.

[Fitux]

Yes this is only happening when importing the React UI Kit
Something that may be relevant is that the problem may be involved with vite doing the packaging of the project.

Here is how our packet.json looks

{
    "name": "fishnchips",
    "version": "0.2.0",
    "private": true,
    "scripts": {
        "dev": "vite --host",
        "start": "vite",
        "build": "vite build",
        "serve": "vite preview"
    },
    "dependencies": {
        "@ant-design/icons": "^4.7.0",
        "@cometchat-pro/chat": "3.0.2-beta1",
        "@emotion/core": "^10.0.35",
        "@fortawesome/fontawesome-free": "^5.15.4",
        "@fortawesome/fontawesome-svg-core": "^1.2.36",
        "@fortawesome/free-solid-svg-icons": "^5.15.4",
        "@fortawesome/react-fontawesome": "^0.1.16",
        "@stripe/react-stripe-js": "^1.6.0",
        "@stripe/stripe-js": "^1.20.3",
        "@vitejs/plugin-react": "^1.1.3",
        "antd": "^4.16.13",
        "aws-amplify": "^4.2.9",
        "country-flag-icons": "^1.4.10",
        "dateformat": "^4.0.0",
        "dayjs": "^1.10.7",
        "dotenv": "^10.0.0",
        "emoji-mart": "^3.0.0",
        "moment": "^2.29.1",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-html-parser": "^2.0.2",
        "react-png-flipcard": "^1.0.1",
        "react-redux": "^7.2.4",
        "react-responsive": "^9.0.0-beta.4",
        "react-router-dom": "^5.2.1",
        "react-scripts": "^4.0.3",
        "redux": "^4.1.1",
        "redux-devtools-extension": "^2.13.9",
        "redux-persist": "^6.0.0",
        "stripe": "^8.186.0",
        "twemoji": "^13.0.1"
    },
    "devDependencies": {
        "@vitejs/plugin-react-refresh": "^1.3.1",
        "less": "^4.1.1",
        "sass": "^1.42.0",
        "vite": "^2.6.2"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ],
        "parserOptions": {
            "ecmaVersion": 2018,
            "sourceType": "module",
            "ecmaFeatures": {
                "jsx": true
            }
        },
        "rules": {
            "object-curly-newline": 1,
            "brace-style": "off",
            "quotes": [
                "error",
                "single",
                {
                    "avoidEscape": true
                }
            ],
            "indent": [
                "off",
                "tab",
                {
                    "SwitchCase": 1
                }
            ],
            "no-mixed-spaces-and-tabs": 0,
            "comma-spacing": [
                "error",
                {
                    "before": true,
                    "after": true
                }
            ],
            "block-spacing": [
                "error",
                "always"
            ],
            "comma-dangle": [
                "error",
                "never"
            ],
            "no-cond-assign": [
                "error",
                "except-parens"
            ],
            "curly": [
                "error",
                "all"
            ],
            "no-multi-spaces": "error",
            "no-param-reassign": "error",
            "prefer-const": "error",
            "func-names": [
                "error",
                "never"
            ],
            "max-len": [
                "error",
                120
            ],
            "object-curly-spacing": [
                "error",
                "always"
            ],
            "@javascript-eslint/no-use-before-define": "off",
            "@javascript-eslint/type-annotation-spacing": [
                "error",
                {
                    "before": true,
                    "after": true,
                    "overrides": {
                        "arrow": {
                            "before": true,
                            "after": true
                        }
                    }
                }
            ],
            "@javascript-eslint/naming-convention": [
                "error",
                {
                    "selector": "variable",
                    "format": [
                        "camelCase",
                        "PascalCase",
                        "UPPER_CASE"
                    ]
                },
                {
                    "selector": "property",
                    "format": [
                        "camelCase",
                        "UPPER_CASE",
                        "snake_case"
                    ]
                },
                {
                    "selector": "parameter",
                    "format": [
                        "camelCase",
                        "UPPER_CASE"
                    ]
                },
                {
                    "selector": "function",
                    "format": [
                        "camelCase",
                        "PascalCase"
                    ]
                },
                {
                    "selector": "interface",
                    "format": [
                        "PascalCase"
                    ],
                    "prefix": [
                        "I"
                    ]
                },
                {
                    "selector": "method",
                    "format": [
                        "camelCase"
                    ]
                },
                {
                    "selector": "enum",
                    "format": [
                        "PascalCase"
                    ]
                },
                {
                    "selector": "enumMember",
                    "format": [
                        "UPPER_CASE",
                        "PascalCase"
                    ]
                },
                {
                    "selector": "typeParameter",
                    "format": [
                        "PascalCase"
                    ],
                    "prefix": [
                        "T"
                    ]
                }
            ],
            "@javascript-eslint/array-type": [
                "error",
                {
                    "default": "array"
                }
            ],
            "@javascript-eslint/ban-types": [
                "error",
                {
                    "types": {
                        "String": {
                            "message": "Use string instead",
                            "fixWith": "string"
                        }
                    }
                }
            ],
            "semi": [
                "error",
                "always"
            ],
            "space-infix-ops": "error",
            "react/self-closing-comp": [
                "error",
                {
                    "component": true,
                    "html": true
                }
            ],
            "react/boolean-prop-naming": [
                "error",
                {
                    "rule": "^(is|has)[A-Z]([A-Za-z0-9]?)+"
                }
            ],
            "react/jsx-indent-props": [
                2,
                "tab"
            ],
            "react/jsx-max-props-per-line": [
                2,
                {
                    "maximum": 1,
                    "when": "multiline"
                }
            ],
            "react/jsx-first-prop-new-line": [
                2,
                "multiline"
            ],
            "react/jsx-tag-spacing": [
                2,
                {
                    "closingSlash": "never",
                    "beforeSelfClosing": "always"
                }
            ],
            "react/jsx-fragments": [
                2,
                "syntax"
            ],
            "react/jsx-pascal-case": [
                2
            ]
        },
        "settings": {
            "react": {
                "version": "detect"
            }
        }
    }
}

[rahulalanmitra]

Hi @Fitux,
Thanks for sharing the information. Apologize for the delay in our response.

I wanted to make sure if the issue has been resolved from our end. If not, it would be great if we could connect to discuss this further. You can write to us at help@cometchat.com or reach out to us through Intercom. We'll be happy to help you.

Regards,
Rahul