I have a render method inside React component:

```
import * as React from "react";
import MediaService from "./service/MediaService";
import ComponentLifecycle = require("@types/react");
import DOMHelper from "../helpers/DOMHelper";

export default class PictureTaker extends React.Component implements ComponentLifecycle {
    // Not important

    render () {
        return (
          <article>
              <video id="ra-video">
                  Video not supported
              </video>
          </article>
        );
    }
}

```

It marks `id` as `attribute id is not allowed here`, but OK - I got it. I want to refactor code to extract `<video>` to another component:

```
import * as React from "react";

export default class VideoPlayer extends React.Component {
    constructor () {
        super();
    }

    render () {
        return (
            <video id="ra-video">
                Video not supported
            </video>
        );
    }
}

```

But it brokes with message: `unresolved type video`. Here is how it looks like:
[![Broken render() method](https://i.stack.imgur.com/2sb6y.png)](https://i.stack.imgur.com/2sb6y.png)

Code for `VideoPlayer` is pasted from `PictureTaker`, and it suprised me. I have `React`:

[![React imported in project](https://i.stack.imgur.com/zhq4s.png)](https://i.stack.imgur.com/zhq4s.png)

And `React DOM`:

[![React DOM](https://i.stack.imgur.com/RX1sY.png)](https://i.stack.imgur.com/RX1sY.png)

inside `Settings / Languages and frameworks / Javascript / Libraries`. Do you see any mistakes made by me? Thank you in advance for every answer.