CODEWITHSUNDEEP
reactjstypescripttypescript-typingsreact-grid-layout
René Zweifel
René Zweifel

Reputation: 75

react-grid-layout with typescript not working

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>;
    }
}

Upvotes: 2

Views: 4454

Answers (2)

Ren&#233; Zweifel
Ren&#233; Zweifel

Reputation: 75

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.

Upvotes: 3

Peter Ambruzs
Peter Ambruzs

Reputation: 8213

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

Upvotes: 0

Related Questions