Closed fishChipsDevTeam closed 4 months ago
priyadarshininadar
commented
2 years ago 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
commented
2 years ago 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
commented
2 years ago 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
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:
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).