Cannot read properties of undefined (reading 'Component') #194
Description
Get Cannot read properties of undefined (reading 'Component') error at:
}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component);
in visibility-sensor.js (dist/visibility-sensor.js)
usage:
//import VisibilitySensor from 'react-visibility-sensor';
const VisibilitySensor = require('react-visibility-sensor');
<VisibilitySensor onChange={isVisible => onChange(isVisible, data.OBJECTID, i)}>
<span> </span>
</VisibilitySensor>
package.json:
{
"name": "exb-client",
"version": "1.10.0",
"description": "",
"main": "src/app.js",
"scripts": {
"start": "cross-env NODE_ENV=development webpack --mode development --watch",
"build:dev": "cross-env NODE_ENV=development webpack --mode development",
"build:prod": "cross-env NODE_ENV=production OUTPUT_FOLDER=./dist-prod webpack --mode production",
"test": "jest --runInBand",
"lint": "eslint . --ext .ts,.tsx",
"postinstall": "npm run lerna-bootstrap",
"lerna-bootstrap": "lerna bootstrap"
},
"author": "",
"dependencies": {
"@arcgis/core": "^4.25.5",
"@emotion/cache": "^11.9.3",
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@esri/arcgis-html-sanitizer": "^2.10.0",
"@esri/arcgis-rest-auth": "^3.4.3",
"@esri/arcgis-rest-feature-layer": "^3.4.3",
"@esri/arcgis-rest-portal": "^3.4.3",
"@esri/arcgis-rest-request": "^3.4.3",
"@esri/arcgis-rest-types": "^3.4.3",
"@esri/calcite-components": "^1.0.0-beta.83",
"@esri/calcite-components-react": "^0.24.0",
"@esri/proj-codes": "^3.0.0",
"@popperjs/core": "^2.11.5",
"@react-spring/web": "^9.4.5",
"@testing-library/user-event": "^14.2.1",
"@types/lodash-es": "^4.17.6",
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
"ajv": "^8.11.0",
"analytics": "^0.8.1",
"bootstrap": "^4.5.3",
"bowser": "^2.11.0",
"brace": "^0.11.1",
"cancelable-promise": "^4.3.0",
"classnames": "^2.3.1",
"color": "^4.2.3",
"commander": "^9.3.0",
"csvjson": "^5.1.0",
"emotion-theming": "^11.0.0",
"fetch-jsonp": "^1.2.1",
"file-saver": "^2.0.5",
"history": "^5.3.0",
"hoist-non-react-statics": "^3.3.2",
"interactjs": "^1.10.14",
"invariant": "^2.2.4",
"jest-environment-jsdom": "^28.1.2",
"js-cookie": "^3.0.1",
"lodash-es": "^4.17.21",
"polished": "^4.2.2",
"prop-types": "^15.8.1",
"pubsub-js": "^1.9.4",
"qrcode.react": "^3.1.0",
"query-string": "^7.1.1",
"quill": "^1.3.7",
"rc-input-number": "^7.3.4",
"rc-upload": "^4.3.4",
"react": "^17.0.2",
"react-ace": "^10.1.0",
"react-color": "^2.19.3",
"react-contenteditable": "^3.3.6",
"react-copy-to-clipboard": "^5.1.0",
"react-datepicker": "^4.8.0",
"react-dom": "^17.0.2",
"react-draggable": "^4.4.5",
"react-inlinesvg": "^3.0.0",
"react-intl": "^6.0.4",
"react-joyride": "^2.5.0",
"react-modal": "^3.16.1",
"react-redux": "^8.0.2",
"react-resize-detector": "^7.1.2",
"react-sizeme": "^3.0.2",
"react-spinners": "^0.13.7",
"react-tooltip": "^4.5.1",
"react-transition-group": "^4.4.2",
"react-visibility-sensor": "^5.1.1",
"react-window": "^1.8.7",
"reactstrap": "^8.10.1",
"redux": "^4.2.0",
"redux-logger": "^3.0.6",
"reselect": "^4.1.6",
"seamless-immutable": "^7.1.4",
"stylis-plugin-rtl": "^2.1.1",
"systemjs": "^6.12.1",
"true-case-path": "^2.2.1",
"uuid": "^8.3.2",
"whatwg-fetch": "^3.6.2",
"workbox-cacheable-response": "^6.5.3",
"workbox-routing": "^6.5.3",
"workbox-strategies": "^6.5.3"
},
"devDependencies": {
"@interactjs/types": "^1.10.14",
"@testing-library/dom": "^8.14.0",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.1.5",
"@testing-library/react-hooks": "^7.0.2",
"@types/color": "^3.0.3",
"@types/enzyme": "^3.10.12",
"@types/history": "^4.7.9",
"@types/invariant": "^2.2.35",
"@types/jest": "^28.1.3",
"@types/js-cookie": "^3.0.2",
"@types/lodash.assign": "^4.2.7",
"@types/lodash.clonedeep": "^4.5.7",
"@types/lodash.get": "^4.4.7",
"@types/lodash.isequal": "^4.5.6",
"@types/node": "^18.0.0",
"@types/prop-types": "^15.7.5",
"@types/react": "^17.0.43",
"@types/react-color": "^3.0.6",
"@types/react-custom-scrollbars": "^4.0.10",
"@types/react-datepicker": "^4.4.2",
"@types/react-dom": "^17.0.14",
"@types/react-grid-layout": "^1.3.2",
"@types/react-redux": "^7.1.24",
"@types/reactstrap": "^8.7.2",
"@types/seamless-immutable": "^7.1.16",
"@types/systemjs": "^6.1.1",
"@types/uuid": "^8.3.4",
"@typescript-eslint/eslint-plugin": "^5.30.0",
"amdefine": "1.0.1",
"chrome-launcher": "^0.15.1",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^11.0.0",
"cross-env": "^7.0.3",
"cross-spawn": "^7.0.3",
"css-loader": "^6.7.1",
"del": "^6.1.1",
"enzyme": "^3.11.0",
"eslint": "^8.18.0",
"eslint-config-standard-with-typescript": "^22.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-n": "^15.2.4",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react-hooks": "^4.6.0",
"event-stream": "4.0.1",
"file-loader": "^6.2.0",
"fork-ts-checker-webpack-plugin": "^7.2.11",
"fs-extra": "^10.1.0",
"glob": "^8.0.3",
"gulp": "^4.0.2",
"gulp-jest": "^4.0.4",
"gulp-markdown": "^7.0.0",
"gulp-rename": "^2.0.0",
"gulp-replace": "^1.1.3",
"html-loader": "^3.1.2",
"html-webpack-plugin": "^5.5.0",
"ignore": "^5.2.0",
"image-size": "^1.0.1",
"jest": "^28.1.1",
"jest-emotion": "^11.0.0",
"jest-fetch-mock": "^3.0.3",
"jest-junit": "^14.0.0",
"lerna": "^5.1.6",
"lighthouse": "^9.6.3",
"mini-css-extract-plugin": "^2.6.1",
"mutation-observer": "^1.0.3",
"node-sass": "^8.0.0",
"npm-run-all": "^4.1.5",
"react-test-renderer": "^17.0.2",
"redux-mock-store": "^1.5.4",
"resolve-url-loader": "^5.0.0",
"rtlcss-webpack-plugin": "^4.0.7",
"run-sequence": "^2.2.1",
"sass-loader": "^13.2.0",
"schema-utils": "^4.0.0",
"style-loader": "^3.3.1",
"svg-inline-loader": "^0.8.2",
"svgo": "^2.8.0",
"svgo-loader": "^3.0.1",
"thread-loader": "^3.0.4",
"ts-jest": "^28.0.5",
"ts-loader": "^9.3.1",
"typedoc": "^0.22.16",
"typescript": "^4.7.4",
"url-loader": "^4.1.1",
"webpack": "^5.73.0",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "^4.10.0",
"webpack-manifest-plugin": "^5.0.0",
"webpack-stats-plugin": "^1.0.3",
"workbox-build": "^6.5.3"
}
}
tsconfig.json:
{
"compileOnSave": false,
"buildOnSave": false,
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"module": "esnext",
"moduleResolution": "node",
"target": "es6",
"skipLibCheck": true,
"lib": [
"dom",
"es6",
"scripthost",
"es2015",
"es2020.Promise"
],
"jsx": "react",
"noEmitHelpers": false,
"noUnusedLocals": false,
"allowUnreachableCode": true,
"allowJs": true,
"strictNullChecks": false,
"baseUrl": ".",
"paths": {
"arcgis-charts": [ "jimu-ui/arcgis-charts" ],
"calcite-components": [ "jimu-ui/calcite-components/index" ]
},
"esModuleInterop": true
},
"include": [
"dist/widgets",
"your-extensions",
"types",
"jimu-core/lib/types"
],
"exclude": [
"node_modules",
"arcgis-js-api",
"**/*.js"
]
}