Semantic-ui-react: Deprecated functional components throw TypeError: Cannot call a class as a function

Created on 4 Aug 2016 · 15Comments · Source: Semantic-Org/Semantic-UI-React

I'm getting some new errors while generating static sources

Yay an error TypeError: Cannot call a class as a function
at _classCallCheck (/Users/johnsimons/Dropbox/WebstormProjects/node.js/itg/itg-webstack-boilerplate/node_modules/stardust/dist/utils/deprecate.js:22:99)
at DeprecatedComponent (/Users/johnsimons/Dropbox/WebstormProjects/node.js/itg/itg-webstack-boilerplate/node_modules/stardust/dist/utils/deprecate.js:58:7)
at ReactCompositeComponentMixin._constructComponentWithoutOwner (/Users/johnsimons/Dropbox/WebstormProjects/node.js/itg/itg-webstack-boilerplate/node_modules/react/lib/ReactCompositeComponent.js:321:27)
at ReactCompositeComponentMixin._constructComponent (/Users/johnsimons/Dropbox/WebstormProjects/node.js/itg/itg-webstack-boilerplate/node_modules/react/lib/ReactCompositeComponent.js:294:19)
at ReactCompositeComponentMixin.mountComponent (/Users/johnsimons/Dropbox/WebstormProjects/node.js/itg/itg-webstack-boilerplate/node_modules/react/lib/ReactCompositeComponent.js:192:21)
at Object.ReactReconciler.mountComponent (/Users/johnsimons/Dropbox/WebstormProjects/node.js/itg/itg-webstack-boilerplate/node_modules/react/lib/ReactReconciler.js:47:35)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/johnsimons/Dropbox/WebstormProjects/node.js/itg/itg-webstack-boilerplate/node_modules/react/lib/ReactMultiChild.js:242:44)
at ReactDOMComponent.Mixin._createContentMarkup (/Users/johnsimons/Dropbox/WebstormProjects/node.js/itg/itg-webstack-boilerplate/node_modules/react/lib/ReactDOMComponent.js:677:32)
at ReactDOMComponent.Mixin.mountComponent (/Users/johnsimons/Dropbox/WebstormProjects/node.js/itg/itg-webstack-boilerplate/node_modules/react/lib/ReactDOMComponent.js:535:29)
at Object.ReactReconciler.mountComponent (/Users/johnsimons/Dropbox/WebstormProjects/node.js/itg/itg-webstack-boilerplate/node_modules/react/lib/ReactReconciler.js:47:35)
at ReactCompositeComponentMixin.performInitialMount (/Users/johnsimons/Dropbox/WebstormProjects/node.js/itg/itg-webstack-boilerplate/node_modules/react/lib/ReactCompositeComponent.js:397:34)
at ReactCompositeComponentMixin.mountComponent (/Users/johnsimons/Dropbox/WebstormProjects/node.js/itg/itg-webstack-boilerplate/node_modules/react/lib/ReactCompositeComponent.js:262:21)
at Object.ReactReconciler.mountComponent (/Users/johnsimons/Dropbox/WebstormProjects/node.js/itg/itg-webstack-boilerplate/node_modules/react/lib/ReactReconciler.js:47:35)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/johnsimons/Dropbox/WebstormProjects/node.js/itg/itg-webstack-boilerplate/node_modules/react/lib/ReactMultiChild.js:242:44)
at ReactDOMComponent.Mixin._createContentMarkup (/Users/johnsimons/Dropbox/WebstormProjects/node.js/itg/itg-webstack-boilerplate/node_modules/react/lib/ReactDOMComponent.js:677:32)
at ReactDOMComponent.Mixin.mountComponent (/Users/johnsimons/Dropbox/WebstormProjects/node.js/itg/itg-webstack-boilerplate/node_modules/react/lib/ReactDOMComponent.js:535:29)

bug help wanted

Source

Johnsel

Most helpful comment

Possible help to others, I just ran into a very similar issue:

Uncaught TypeError: Failed to construct 'Image': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

In my case, I was simply missing Image in my import statement.

levithomason on 9 Aug 2016

👍8 ❤4

All 15 comments

Hm, I'd need to see a repo to diagnose this one. From the stack I can see that something is using one our deprecated exported components then calling it as a function instead of instantiating it. So, there is one of these:

import { Field } from 'stardust'            // Use "Form.Field" instead
import { Fields } from 'stardust'           // Use "Form.Fields" instead
import { Column } from 'stardust'           // Use "Grid.Column" instead
import { Row } from 'stardust'              // Use "Grid.Row" instead
import { MenuItem } from 'stardust'         // Use "Menu.Item" instead
import { TableColumn } from 'stardust'      // Use "Table.Column" instead
import { ListItem } from 'stardust'         // Use "List.Item" instead
import { ModalContent } from 'stardust'     // Use "Modal.Content" instead
import { ModalHeader } from 'stardust'      // Use "Modal.Header" instead
import { Items } from 'stardust'            // Use "Item.Items" instead

Doing something like this:

Field()

Instead of:

<Field />

Though, I don't think this is in Stardust as we're not seeing it on the doc site compile nor any of the contributors who are also compiling.

levithomason on 4 Aug 2016

Thanks, not sure why my code caused the classes to be ran as functions, but not using the deprecated classes is a good workaround

For reference, this was the original code, but I really don't see anything wrong with it:

<Menu className="examplemenu">
  <MenuItem className="active" type="link">
    <Link to="/">
      <Icon className="home" /> <FormattedMessage {...linksMessages.home} />
    </Link>
  </MenuItem>

  <MenuItem type="link">
    <Link activeClassName="active" to="/todos">
      <Icon className="home" /> <FormattedMessage {...linksMessages.todos} />
    </Link>
  </MenuItem>

  <MenuItem type="link">
    <Link activeClassName="active" to="/intl">
      <Icon className="mail" /> <FormattedMessage {...linksMessages.intl} />
    </Link>
  </MenuItem>
</Menu>

_EDIT by @levithomason 8/8/16: fix code block ticks & highlight_

Johnsel on 4 Aug 2016

Hm, the code looks right from what I can see. This could be an issue with the deprecate util itself. I'll leave this open and check it out when I get some time.

I assume using the non-deprecated imports works for you?

levithomason on 4 Aug 2016

It does indeed. If I bump into it again I will do some research into why/how it happens. Now I really need to deliver a solution as quickly as possible so the workaround will have to suffice.

Johnsel on 4 Aug 2016

@Johnsel are you by chance using any react transformations/plugins, such as babel-react-optimize?

davezuko on 4 Aug 2016

I'm considering dropping the deprecation warnings altogether while we're pre 1.0 to simplify things as well. I'm gonna close this for now, if we run into more issues I'll make a fix at that point.

levithomason on 4 Aug 2016

I stumbled upon what is causing this error:

exports.Menu = _Menu3.default;
var MenuItem = exports.MenuItem = (0, _deprecate.deprecateComponent)('MenuItem', 'Use "Menu.Item" instead.', _Menu3.default.Item);

Johnsel on 5 Aug 2016

@davezuko I do, snippet:

test: /\.js$/,
          exclude: constants.NODE_MODULES_DIR,
          loader: 'babel',
          query: {
            cacheDirectory: true,
            presets: ['es2015', 'react', 'stage-1'],
            plugins: [
              ['transform-runtime', {
                helpers: false,
                polyfill: false,
                regenerator: false,
              }],
              'add-module-exports',
            ],
            env: {
              development: {
                presets: ['react-hmre'],
              },
              production: {
                plugins: [
                  'transform-react-constant-elements',
                ],
              },
            },
          }

Johnsel on 5 Aug 2016

Thanks @Johnsel; guarantee it's the constant elements plugin (which, per the earlier question, is part of the babel-react-optimize plugin). I'm only familiar with it enough to know that these sorts (e.g. constant-elements) of optimizations can cause issues, but I currently lack an understanding as to the specifics concerning the _why_.

davezuko on 5 Aug 2016

Possible help to others, I just ran into a very similar issue:

Uncaught TypeError: Failed to construct 'Image': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

In my case, I was simply missing Image in my import statement.

levithomason on 9 Aug 2016

👍8 ❤4

I've run into the same problem Cannot call a class as a function trying to use <Column>.

    presets: ['es2015', 'react', 'stage-0'],

lukebarton on 10 Sep 2016

What does your import statement look like?

levithomason on 10 Sep 2016

👍1

After hacking through deprecated.js, returning early from _classCallCheck and _possibleConstructorReturn, I finally got a message I could do something with:

Stardust component "Column" is deprecated. Use "Grid.Column" instead.

Which resolved my issue - you were right about the import

lukebarton on 10 Sep 2016

I see, deprecate is a class extending the replacement component but the replacement is sometimes a functional component (Grid.Column). A class cannot extend a function and call super on it.

Deprecate needs to handle both classes and stateless functional components.

levithomason on 10 Sep 2016

Fixed in [email protected]

levithomason on 12 Sep 2016

Was this page helpful?

0 / 5 - 0 ratings