Uncaught (in promise) TypeError: Cannot call a class as a function

Hemadri Dasari

I recently upgraded my babel versions to latest. After update the normal class is not recognized by babel in my react application and I am getting below error.

Uncaught (in promise) TypeError: Cannot call a class as a function

.babelrc

{
  "presets": [
    "env", 
    "react"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread"
  ]
}

babel related libs in my app:

"babel-core": "^6.26.3",
"babel-eslint": "^8.2.6",
"babel-jest": "^22.4.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1"

babel doesn't understand this class

CRUDTree.js

const resourceBoxWidth = 225;
const resourceBoxHeight = 85;
const halfBoxWidth = resourceBoxWidth / 2;
const halfBoxHeight = resourceBoxHeight / 2;
const urlLeftMargin = 10;
const urlFontSize = 12;
const fullPathFontSize = 10;
export default class{
  static resourceBoxWidth() { return resourceBoxWidth; }
  static resourceBoxHeight() { return resourceBoxHeight; }
  static halfBoxHeight() { return halfBoxHeight; }
  static halfBoxWidth() { return halfBoxWidth; }
}

APITree.js

import React, { Component } from 'react';
import CRUDTree from './CRUDTree';

class extends Component{
render(){
return(
  <CRUDTree data={
                [
                  this.state.treedata,
                  this.onClick,
                  {
                    x: this.state.offsetX,
                    y: this.state.offsetY
                  }
                ]}
              width={400} height={500}
              options={{
                border: "2px solid black",
                margin: {
                  top: 0,
                  bottom: 0,
                  left: 50,
                  right: 0
                }
              }
              } />
)
}
}
devserkan

If your CRUDTree is a React component (it seems as it is to me) then you are defining it wrong. You are missing the extends part.

export default class extends React.Component {
    ....
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

ReactJS - Uncaught TypeError: Cannot call a class as a function

Nuxt throwing error : Uncaught TypeError: Cannot call a class as a function

Uncaught (in promise) TypeError: $ is not a function

React axios api call error: Uncaught (in promise) TypeError: setTempFetch is not a function

createSwitchNavigator - TypeError: Cannot call a class as a function

reactJS - TypeError: Cannot call a class as a function

React HOC: TypeError: Cannot call a class as a function

TypeError: Cannot call a class as a function (React/Redux)

React / Redux TypeError: Cannot call a class as a function

Uncaught (in promise) TypeError: spawn is not a function

Uncaught (in promise) TypeError: X is not a function

Uncaught (in promise) TypeError: this.~(...).then is not a function

Uncaught (in promise) TypeError: setExercises is not a function

Uncaught TypeError: Cannot read property 'class function' of undefined in reactjs

Uncaught (in promise): TypeError: Cannot read property

Uncaught (in promise) TypeError: response.json is not a function

Uncaught (in promise) TypeError: dispatch is not a function useContext/useReducer

Uncaught (in promise) TypeError: localStorage.setItem is not a function

Uncaught (in promise): TypeError: component.canDeactivate is not a function

redux-promise: Uncaught TypeError: middleware is not a function

Angular : Error: Uncaught (in promise): TypeError: Object(...) is not a function

Error: Uncaught (in promise): TypeError: guard is not a function

Uncaught (in promise) TypeError: (intermediate value).setAttribute is not a function

Uncaught (in promise) TypeError: mostrarError is not a function. with hooks

Uncaught (in promise) TypeError: images.map is not a function

Uncaught (in promise) TypeError: type.trim is not a function

Uncaught (in promise) TypeError: this.loadCategories is not a function in React

Uncaught (in promise) TypeError: video.addEventListner is not a function

Uncaught (in promise) TypeError: img.src is not a function