problem working with TypeScript

[Andrew-Sparrow]

TS2349: This expression is not callable. Type 'typeof import("F:/Develop/KZ/react-consudoc/node_modules/@welldone-software/why-did-you-render/types")' has no call signatures.

screenshot

wdyr.js

/// import React from 'react'

if (process.env.NODE_ENV === 'development') { // eslint-disable-next-line global-require // eslint-disable-next-line import/no-extraneous-dependencies const whyDidYouRender = require('@welldone-software/why-did-you-render') // eslint-disable-next-line global-require const ReactRedux = require('react-redux') whyDidYouRender(React, { trackAllPureComponents: true, trackExtraHooks: [[ReactRedux, 'useSelector']] }) }

package.json

{ "name": "react-consudoc", "version": "0.1.0", "private": true, "dependencies": { "@ant-design/icons": "^4.7.0", "@craco/craco": "^7.0.0-alpha.0", "@hookform/error-message": "^2.0.0", "@ivicos/react-jitsi": "^2.0.11", "@react-pdf/renderer": "^2.1.1", "@reduxjs/toolkit": "^1.8.0", "antd": "^4.19.2", "assert": "^2.0.0", "axios": "^0.26.1", "bootstrap": "^5.1.3", "browserify-zlib": "^0.2.0", "buffer": "^6.0.3", "date-fns": "^2.28.0", "dayjs": "^1.11.0", "env-cmd": "^10.1.0", "nanoid": "^3.3.2", "process": "^0.11.10", "react": "^17.0.2", "react-dom": "^17.0.2", "react-hook-form": "^7.28.0", "react-redux": "^7.2.6", "react-router-dom": "^5.3.0", "react-scripts": "^5.0.0", "redux": "^4.1.2", "redux-devtools-extension": "^2.13.9", "redux-logger": "^3.0.6", "redux-saga": "^1.1.3", "redux-thunk": "^2.4.1", "reselect": "^4.1.5", "sass": "^1.49.9", "source-map-explorer": "^2.5.2", "stream-browserify": "^3.0.0", "typescript": "4.6.2", "use-sound": "^4.0.1", "util": "^0.12.4", "web-vitals": "^2.1.4" }, "scripts": { "start": "craco start", "start17": "craco --openssl-legacy-provider start", "build": "craco build", "build:staging": "env-cmd -f .env.staging craco build", "build:staging17": "env-cmd -f .env.staging craco --openssl-legacy-provider build", "test": "craco test", "lint": "eslint --cache \"src/*/.{js,jsx,ts,tsx}\"", "lint:fix": "eslint --cache --fix \"src//.{js,jsx,ts,tsx}\"", "analyze": "source-map-explorer 'build/static/js/.js'" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@babel/core": "^7.17.7", "@babel/plugin-proposal-class-properties": "^7.16.0", "@babel/plugin-proposal-decorators": "^7.16.0", "@babel/plugin-transform-runtime": "^7.16.0", "@babel/preset-env": "^7.16.11", "@babel/preset-react": "^7.16.7", "@babel/preset-typescript": "^7.16.7", "@babel/runtime": "^7.16.3", "@hookform/devtools": "^4.0.2", "@testing-library/jest-dom": "^5.15.0", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", "@types/classnames": "^2.3.1", "@types/enzyme": "^3.10.10", "@types/jest": "^27.0.2", "@types/jitsi-meet": "^2.0.2", "@types/node": "^16.11.7", "@types/react": "^17.0.40", "@types/react-dom": "^17.0.13", "@types/react-redux": "^7.1.23", "@types/react-router-dom": "^5.3.2", "@types/redux-logger": "^3.0.9", "@typescript-eslint/eslint-plugin": "^5.4.0", "@typescript-eslint/eslint-plugin-tslint": "^5.4.0", "@typescript-eslint/parser": "^5.4.0", "@welldone-software/why-did-you-render": "^6.2.3", "babel-eslint": "^10.1.0", "eslint": "^8.11.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-base": "^15.0.0", "eslint-config-airbnb-typescript": "^16.1.2", "eslint-config-prettier": "^8.5.0", "eslint-config-react-app": "^7.0.0", "eslint-import-resolver-typescript": "^2.5.0", "eslint-plugin-flowtype": "^8.0.3", "eslint-plugin-import": "^2.25.4", "eslint-plugin-import-helpers": "^1.2.1", "eslint-plugin-jest": "^26.1.1", "eslint-plugin-jsx-a11y": "^6.5.1", "eslint-plugin-node": "^11.1.0", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-promise": "^6.0.0", "eslint-plugin-react": "^7.29.4", "eslint-plugin-react-hooks": "^4.3.0", "eslint-plugin-simple-import-sort": "^7.0.0", "eslint-plugin-standard": "^5.0.0", "eslint-plugin-unicorn": "^41.0.0", "eslint-webpack-plugin": "^3.1.1", "lcov-badge-generator": "^1.0.5", "prettier": "^2.5.1", "prettier-eslint": "^13.0.0", "prettier-eslint-cli": "^5.0.1", "stylelint": "^14.5.3", "stylelint-config-prettier": "^9.0.3", "stylelint-config-sass-guidelines": "^9.0.1", "stylelint-config-standard": "^25.0.0", "typescript-eslint-parser": "^22.0.0" }, "proxy": "http://localhost:8000", "jest": { "collectCoverageFrom": [ "src//.{js,jsx,ts,tsx}" ], "coveragePathIgnorePatterns": [ "/src/tests/mocks", "/src/tests/testsHelpers", "/src/index.tsx", "/src/shared/services", "helpers/genColumns.", "constants", "/models", "react-app-env.d.ts" ], "coverageReporters": [ "lcov" ] } }

tsconfig.json

{ "compilerOptions": { "target": "ESNext", "module": "ESNext", "lib": [ "DOM", "DOM.Iterable", "ESNext" ], "allowJs": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "checkJs": true, "jsx": "react-jsx", "noEmit": true, "strict": true, "moduleResolution": "node", "baseUrl": "src", "typeRoots": [ "./src/types" ], "forceConsistentCasingInFileNames": true, "isolatedModules": true, "noEmitOnError": true, "noFallthroughCasesInSwitch": true, "noImplicitAny": true, "removeComments": true, "resolveJsonModule": true, "skipLibCheck": true, "rootDir": "./src" }, "include": [ "src/*/", ], "exclude": [ "node_modules", "src/*/.spec.ts" ] }

[vzaidman]

add

/// <reference types="@welldone-software/why-did-you-render" />

as first line in wdyr.ts

[justlevine]

@vzaidman

I'm getting the same error with your suggestion:

/// <reference types="@welldone-software/why-did-you-render" />

import React from 'react';

if ( process.env.NODE_ENV === 'development' ) {
    const whyDidYouRender = require( '@welldone-software/why-did-you-render' );
    whyDidYouRender( React, {
        trackAllPureComponents: true,
    } );
}

[vzaidman]

Maybe try inspecting the object. What about require( '@welldone-software/why-did-you-render' ).default;?

/// <reference types="@welldone-software/why-did-you-render" />

import React from 'react';

if ( process.env.NODE_ENV === 'development' ) {
    const whyDidYouRender = require( '@welldone-software/why-did-you-render' ).default;
    whyDidYouRender( React, {
        trackAllPureComponents: true,
    } );
}