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

Question

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
                }
              }
              } />
)
}
}

I think the problem is the way you call this class, can you show us that ? — Vashnak, Aug 01 '18 at 12:24

score 2 · Accepted Answer · answered Aug 01 '18 at 12:40

2

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 {
    ....
}

answered Aug 01 '18 at 12:40

devserkan

16,870
4
31
47

1

I agree with you. – Vashnak Aug 01 '18 at 12:57
No its not react component. Its normal class which doesn't extend React component. Please check my updated question. The same class without extending React.Component was working absolutely fine before updating to latest babel versions and webpack to 4. – Hemadri Dasari Aug 01 '18 at 12:58
1

I'm still a noob when we talk about classes and still not so good with React but you are exporting a class and trying to use it as a regular React component here? A React component waits a function to return not a class. Don't we define a class and create some new instances from them? You are using this class as a component and passing to it some props. Where do you use those props? Please forgive my lack of info but this usage still seems to me weird. I don't know how this works before of course. – devserkan Aug 01 '18 at 13:15
Agree with you devserkan I am also confused in that part but the old code is working fine in my dev environment. This issue started appearing after I upgraded my webpack and babel to latest versions. Would it help if I share you webpack config and webpack version details – Hemadri Dasari Aug 01 '18 at 13:47
Sorry, I'm not good at Webpack configuration and still can't think of how this works before. – devserkan Aug 01 '18 at 13:48
Sorry devserkan. I made big stupid mistake. Instead of importing the right component I imported the other component which has similar name. – Hemadri Dasari Aug 01 '18 at 13:57
1

No problem, I'm glad you've solved it somehow. We all do stupid mistakes everyday :) – devserkan Aug 01 '18 at 13:58

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

1 Answers1