I am in the process of integrating pages from a typescript template based create-react-app application to a javascript template based create-react-app application.
First I followed all the steps given in this document to make typescript compatible in the existing javascript react app
https://github.com/Microsoft/TypeScript-React-Conversion-Guide#typescript-react-conversion-guide
Now after adding the new pages into the converted app, I am getting the following error while trying to render ReactApexChart component. This error is not evident when I try this in a pure typescript application. This error is evident only in the application in which I am trying to integrate the new pages.
apexcharts.common.js:6 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'indexOf')
at t.value (apexcharts.common.js:6:1)
at t.value (apexcharts.common.js:6:1)
at t.value (apexcharts.common.js:6:1)
at t.value (apexcharts.common.js:6:1)
at t.value (apexcharts.common.js:14:1)
at t.create (apexcharts.common.js:6:1)
at apexcharts.common.js:14:1
at new Promise (<anonymous>)
at t.value (apexcharts.common.js:14:1)
at r.value (react-apexcharts.min.js:1:1)
value @ apexcharts.common.js:6
value @ apexcharts.common.js:6
value @ apexcharts.common.js:6
value @ apexcharts.common.js:6
value @ apexcharts.common.js:14
(anonymous) @ apexcharts.common.js:6
(anonymous) @ apexcharts.common.js:14
value @ apexcharts.common.js:14
value @ react-apexcharts.min.js:1
commitLayoutEffectOnFiber @ react-dom.development.js:23305
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25981
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
apexcharts.common.js:6
this is my Custom Chart component
const ChartCustom: FC<IChartProps> = ({ series, options, type, width, height, className, ...props }) => {
return (
// eslint-disable-next-line react/jsx-props-no-spreading
<div className={classNames('apex-chart', className)} {...props}>
<ReactApexChart
options={{
colors: [
process.env.REACT_APP_PRIMARY_COLOR,
process.env.REACT_APP_SECONDARY_COLOR,
process.env.REACT_APP_SUCCESS_COLOR,
process.env.REACT_APP_INFO_COLOR,
process.env.REACT_APP_WARNING_COLOR,
process.env.REACT_APP_DANGER_COLOR,
],
plotOptions: {
candlestick: {
colors: {
upward: process.env.REACT_APP_SUCCESS_COLOR,
downward: process.env.REACT_APP_DANGER_COLOR,
},
},
boxPlot: {
colors: {
upper: process.env.REACT_APP_SUCCESS_COLOR,
lower: process.env.REACT_APP_DANGER_COLOR,
},
},
},
...options,
}}
series={series}
// @ts-ignore
type={type}
width={width}
height={height}
/>
</div>
);
};
This is my package.json file:
{
"name": "qconnect-client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@chakra-ui/icons": "2.0.17 ",
"@chakra-ui/react": "2.4.9",
"@emotion/react": "^11.10.6",
"@emotion/styled": "11.8.1",
"@hello-pangea/dnd": "^16.2.0",
"@natscale/react-calendar": "0.0.0-beta.23",
"@omtanke/react-use-event-outside": "^1.0.1",
"@popperjs/core": "^2.11.6",
"@reactour/tour": "^3.2.1",
"@reduxjs/toolkit": "1.8.1",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3",
"@types/jest": "^29.5.1",
"@types/node": "^18.16.5",
"@types/react": "^18.2.6",
"@types/react-dom": "^18.2.4",
"apexcharts": "^3.40.0",
"axios": "0.27.2",
"chart.js": "3.9.1",
"chartjs-chart-treemap": "2.0.2",
"chroma-js": "2.4.2",
"classnames": "^2.3.2",
"date-fns": "^2.29.3",
"dayjs": "^1.11.7",
"env-cmd": "10.1.0",
"formik": "^2.2.9",
"framer-motion": "^9.1.7",
"i18next": "^22.4.10",
"i18next-browser-languagedetector": "^7.0.1",
"i18next-http-backend": "^2.1.1",
"jsx-to-string": "^1.4.0",
"lodash": "4.17.21",
"moment": "^2.29.4",
"pascalcase": "^2.0.0",
"payment": "^2.4.6",
"prismjs": "^1.29.0",
"prop-types": "^15.8.1",
"qs": "6.11.0",
"randomcolor": "0.6.2",
"react": "^18.2.0",
"react-apexcharts": "^1.4.0",
"react-big-calendar": "^1.6.8",
"react-chartjs-2": "4.1.0",
"react-credit-cards": "^0.8.3",
"react-date-range": "^1.4.0",
"react-datepicker": "4.8.0",
"react-dom": "^18.2.0",
"react-i18next": "^12.2.0",
"react-image-webp": "^0.8.0",
"react-input-mask": "^2.0.4",
"react-jss": "^10.10.0",
"react-modern-calendar-datepicker": "^3.1.6",
"react-moment": "1.1.2",
"react-notifications-component": "^4.0.1",
"react-number-format": "^5.1.3",
"react-popper": "^2.3.0",
"react-redux": "8.0.1",
"react-router-dom": "^6.8.1",
"react-router-hash-link": "^2.4.3",
"react-scripts": "5.0.1",
"react-scrollspy": "^3.4.3",
"react-syntax-highlighter": "^15.5.0",
"react-toast-notifications": "^2.5.1",
"react-transition-group": "^4.4.5",
"react-use": "^17.4.0",
"redux-logger": "3.0.6",
"redux-thunk": "2.4.1",
"use-clipboard-copy": "^0.2.0",
"web-vitals": "^3.1.1",
"yarn": "1.22.19",
"@ionic/cli": "^7.1.1",
"react-icons": "^4.8.0",
"swiper": "^9.2.4"
},
"scripts": {
"start": "react-scripts start",
"start:prod": "env-cmd -f ./.env.prod npm run-script start",
"build": "react-scripts build",
"build:prod": "env-cmd -f ./.env.prod npm run-script build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"serve": "serve -s build",
"lint": "eslint .",
"lint:fix": "eslint --fix --ext .js --ext .ts --ext .jsx --ext .tsx ./src",
"lint:scss": "stylelint **/*.scss",
"lint:fix-scss": "stylelint --fix **/*.scss",
"icon": "svgr SvgIcons -d src/components/icon/svg-icons --typescript",
"storybook": "start-storybook -p 6006",
"storybook-withoutCache": "start-storybook -p 6006 --no-manager-cache",
"build-storybook": "build-storybook"
},
"_moduleAliases": {
"@modules": "build/modules",
"@core": "build/core"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
">0.2%"
]
},
"devDependencies": {
"@faker-js/faker": "6.3.1",
"@svgr/cli": "^6.5.1",
"@types/pascalcase": "^1.0.1",
"@types/payment": "^2.1.4",
"@types/prismjs": "^1.26.0",
"@types/react-big-calendar": "^1.6.0",
"@types/react-credit-cards": "^0.8.1",
"@types/react-date-range": "^1.4.4",
"@types/react-input-mask": "^3.0.2",
"@types/react-router-hash-link": "^2.4.5",
"@types/react-scrollspy": "^3.3.5",
"@types/react-syntax-highlighter": "^15.5.6",
"@types/react-transition-group": "^4.4.5",
"@whitespace/storybook-addon-html": "^5.1.1",
"animate.css": "^4.1.1",
"bootstrap": "^5.2.3",
"eslint": "^8.34.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-eslint-comments": "^3.2.0",
"eslint-plugin-flowtype": "^8.0.3",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"@typescript-eslint/eslint-plugin": "^4.7.0",
"@typescript-eslint/parser": "^4.7.0",
"prettier": "^2.8.4",
"react-scripts": "5.0.1",
"sass": "^1.58.3",
"sass-loader": "^13.2.0",
"source-map-loader": "^4.0.1",
"storybook-addon-jsx": "^7.3.15-canary.162.1301.0",
"stylelint": "^15.2.0",
"stylelint-config-prettier-scss": "^0.0.1",
"stylelint-config-standard": "^30.0.1",
"stylelint-config-standard-scss": "^7.0.1",
"stylelint-config-twbs-bootstrap": "^7.0.0",
"stylelint-declaration-block-no-ignored-properties": "^2.7.0",
"stylelint-declaration-strict-value": "^1.9.2",
"stylelint-no-px": "^1.0.1",
"stylelint-order": "^6.0.2",
"stylelint-prettier": "^3.0.0",
"stylelint-scss": "^4.4.0",
"trim-newlines": "^4.0.2",
"ts-loader": "^9.4.2",
"tsconfig-paths": "^4.2.0",
"typescript": "^4.4.0",
"webpack": "5",
"webpack-cli": "^5.0.2"
},
"jest": {
"transformIgnorePatterns": [
"<rootDir>/node_modules/(?!pascalcase|prismjs|@omtanke/react-use-event-outside/.*)"
]
},
"resolutions": {
"glob-parent": ">=5.1.2",
"json5": ">=2.2.2",
"nth-check": ">=2.1.1",
"trim": "^1.0.1"
},
"overrides": {
"glob-parent": ">=5.1.2",
"json5": ">=2.2.2",
"nth-check": ">=2.1.1",
"trim": "^1.0.1"
}
}
And this is my tsconfig.json file
{
"ts-node": {
// Do not forget to `npm i -D tsconfig-paths`
"require": ["tsconfig-paths/register"]
},
// "extends":"@tsconfig/node12/tsconfig.json",
"compilerOptions": {
"outDir": "./dist/", // path to output directory
"sourceMap": true, // allow sourcemap support
"strictNullChecks": true, // enable strict null checks as a best practice
"module": "CommonJS", // specify module code generation
"jsx": "react-jsx", // use typescript to transpile jsx to js
"target": "ESNext", // specify ECMAScript target version
"allowJs": true, // allow a partial TypeScript and JavaScript codebase
"skipLibCheck": true,
"lib": ["es5", "es6", "es7","DOM"],
// "target": "es2017",
// "module": "commonjs",
"moduleResolution": "node",
"rootDir": "src",
// "outDir": "build",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"esModuleInterop": true,
"noImplicitAny": true,
"strict": true,
"resolveJsonModule": true,
"baseUrl": ".",
"paths": {
"@modules/*": ["src/modules/*"],
"*": ["node_modules/*"]
},
"allowSyntheticDefaultImports": true,
"typeRoots" : ["node_modules/@types", "src/type"]
// "preserveConstEnums": true
},
"include": [
"./src/**/*",
"./src/index.d.ts",
"./src/declaration.d.ts"
],
"exclude": [
"node_modules",
"./node_modules",
"./node_modules/*",
// "./node_modules/@types/node/index.d.ts",
]
}
I verified if the state and props are properly passed to the components by doing runtime debugging using browser’s developer tools.
I verified if there are any version mismatch present and tried with various versions of react apex chart libraries.
I dont think I have any issue with respect to data (state and props) and version as well.