Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of VelocityTransitionGroup.

[htoor91]

Using the latest version of treebeard (4.2.4) and having this issue with VelocityTransitionGroup. Several people have mentioned that animations={false} as a prop to Treebeard should help fix it, but it doesn't. I've tried downgrading, but no success.

To note, it works perfectly fine on storybook, but when we use it in app, it breaks. We're trying to render the component on an animated sidebar, and that's the only difference between the storybook version and our in app version...all the data is the same and static for testing purposes. It just breaks and shows that error in console when the component is mounted onto our sidebar.

[IvanRoslov]

I have same problem.

[MatthewCochrane]

I had the same issue and have resolved it now. My problem was that I had something akin to this in my webpack.config.js.

module.exports = {
  //...
  resolve: {
    modules: [path.resolve(__dirname, 'node_modules'),],
  },
};

Note that the search path from which to resolve modules is an absolute path, not a relative one. This meant that when resolving modules, webpack would only use root-level modules.

And so, velocity-react was importing the wrong version of TransistionGroup from react-transition-group because it was looking for the module at the absolute path instead of relative to that module.

See also:

• https://webpack.js.org/configuration/resolve/#resolvemodules
• Webpack imports wrong version of duplicate dependency webpack/webpack#6538 (comment)