react-grid-layout with typescript not working

Question

I have a new project and i try to use react-grid-layout for building a dashboard. unfortunately i am not able to get it to work.

I use:

"@types/react-grid-layout": "0.16.5" "react-grid-layout": "0.16.5"

when i try to use it in a tsx file with

import { ReactGridLayout } from 'react-grid-layout';

i get the error:

/node_modules/@types/react-grid-layout/index"' has no exported member 'ReactGridLayout'.

Any suggestion what I am doing wrong?

Update

Additional Info: I use it in an SPA Webapp which runs on .Net core 2.1 How I try to use it:

import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import ReactGridLayout, { Layout } from 'react-grid-layout';
 //const ReactGridLayout = require('react-grid-layout');
 export class Dashboard extends React.Component<RouteComponentProps<{}>, {}> {
    //ReactGridLayout = require('react-grid-layout');`
    public render() {
        //const ReactGridLayout = require('react-grid-layout');
        var layout = [
            { i: 'a', x: 0, y: 0, w: 1, h: 2, static: true },
            { i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 },
            { i: 'c', x: 4, y: 0, w: 1, h: 2 }
        ];
    return <div>
             <ReactGridLayout className="layout" layout={layout} cols={12} rowHeight={30} width={1200}>`
                <div key="a">a</div>
                <div key="b">b</div>
                <div key="c">c</div>
            </ReactGridLayout>`
        </div>;
    }
}

score 3 · Answer 1 · answered Dec 12 '18 at 22:09

Finally I made it work with the following steps found in https://github.com/Microsoft/TypeScript-React-Starter/issues/8 Long story short: Add "esModuleInterop": true, "allowSyntheticDefaultImports": true, to your tsconfig.json file. After that all worked like a charm. Hope that helps if someone else has problems like that in a .net core react app.

Peter Ambruzs · Answer 2 · 2018-12-12T21:32:32.440

0

Sometimes the same named imports works in JavaScript but not works in TypeScript. Try with require, it worked for me.

const ReactGridLayout = require('react-grid-layout');

I have a working example with TypesScript https://codesandbox.io/s/5x5nyjqjwl

edited Dec 12 '18 at 21:32

answered Dec 11 '18 at 07:39

Peter Ambruzs

7,763
3
30
36

I tried different places for the require, but unfortunately none of them worked. probably I made something wrong. I updated my question with code how I try to use it. – René Zweifel Dec 12 '18 at 21:17
I updated my answer with a working example, hope it helps. – Peter Ambruzs Dec 12 '18 at 21:33
It seems that it would work but webpack throws an error when building it. The Webapp starts but shows an overlay message with the error: ERROR in [at-loader] ./ClientApp/components/Dashboard.tsx:23:15 TS2604: JSX element type 'ReactGridLayout' does not have any construct or call signatures. – René Zweifel Dec 12 '18 at 21:41
Additional Info: I use it in a .Net core 2.1 Webapplication based on the standard .Net Core 2.0 Rect template – René Zweifel Dec 12 '18 at 21:42
Hope you cope with the new problem. I do not know your setup. I got to sleep, its night here. – Peter Ambruzs Dec 12 '18 at 22:00
I got around all with some settings in the tsconfig.json file. But thanks for your help anyways. – René Zweifel Dec 12 '18 at 22:10

react-grid-layout with typescript not working

Update

2 Answers2