Issues with importing when using TypeScript

[julianguyen]

Using TypeScript and @types/react-document-title.

I'm trying to do import * as DocumentTitle from 'react-document-title'; but in my render() I get
[ts] JSX element type 'DocumentTitle' does not have any construct or call signatures.

I tried import DocumentTitle from 'react-document-title'; and the page won't load properly.

export class Test extends React.Component<{}, {}> {
  render() {
    return (
      <DocumentTitle title="Hey">
        Test
      </DocumentTitle>
    );
  }
}

[Kepro]

@julianguyen I'm using normally import DocumentTitle from 'react-document-title';
and it's working well

[brookback]

I experience the same with react-document-title 2.0.3 and Typescript (definitions from https://www.npmjs.com/package/@types/react-document-title):

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

This warning is shown in the browser console when doing

import DocumentTitle from 'react-document-title';

and I cannot do

import * as DocumentTitle from 'react-document-title';

Buuut I guess this is actually an issue with the Typescript definitions (source here, by @cleverguy25), and not with this specific repo.

[brookback]

Ok, quick fix for the ones who have this problem:

1. Create a new TS typings file for this module (I keep my custom typings in typings/<package>/index.d.ts:

   // Type definitions for react-document-title 2.0
   // Project: https://github.com/gaearon/react-document-title
   // Definitions by:
   //  - Cleve Littlefield <https://github.com/cleverguy25>
   //  - Johan Brook <https://github.com/brookback>
   // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
   // TypeScript Version: 2.8
   
   declare module 'react-document-title' {
       import * as React from 'react';
   
       interface DocumentTitleProps {
           title: string;
       }
   
       class DocumentTitle extends React.Component<DocumentTitleProps, any> {}
   
       export = DocumentTitle;
   }

   The difference from the original Typescript typing is the export = DocumentTitle; line.

2. Change the import of DocumentTitle to

   import DocumentTitle = require('react-document-title');

   This makes Typescript understand the export = syntax from the typings file.

Sources:

• Typescript handbook
• Stack Overflow answer on CommonJS imports in TS