IntelliSense doesn't work with my own React component library

user_7293393 0
Viewed 927

IntelliSense doesn't display props that components in my React library accept. The library is bundled into a UMD module with Webpack (if that matters).

Here's what it looks like in my IDE when I try to see what props the component takes:

enter image description here

Compared to other elements/components...

enter image description here

How do I get IntelliSense to work with my components?

react-proptypes reactjs ecmascript-6 javascript
1 Answers

Late to the party, but hopefully this will help someone.

I had the same problem with my component library that I was building with rollup.

I was using @babel/plugin-proposal-class-properties, and writing the classes like this:

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

export default class Alert extends PureComponent {
    static propTypes = {
        type: PropTypes.oneOf(['success', 'info', 'warning', 'danger']),
        title: PropTypes.string,
    }

    render() {
        const { type, children } = this.props


        return (
            <div>
                <h3>{title}</h3>
                {children &&
                <div className="alert-content">
                    {children}
                </div>
                }
            </div>
        )
    }
}

In my compiled file, this used defineProperty like this to define the propTypes:

_defineProperty(Alert, "propTypes", {
  type: PropTypes.oneOf(['success', 'info', 'warning', 'danger']),
  title: PropTypes.string
});

By setting the option loose: true on the babel-plugin, I managed to turn it into this, and the intellisense worked in IntelliJ:

Alert.propTypes = {
  type: PropTypes.oneOf(['success', 'info', 'warning', 'danger']),
  title: PropTypes.string
};

My .babelrc

{
  "plugins": [
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}
user_4542260
Related