Typescript Issue with React when instantiating new Shuffle

[ghost]

Shuffle version

5.1.1

Steps to reproduce

Here is my component code:

import * as React from 'react';
import * as Shuffle from 'shufflejs';
import { Chance } from 'chance';

interface State {
  photos: Array<{}>;
}

function generatePhotos(count: number = 30) {
  const photos = [];
  for (let index = 0; index < count; index++) {
    photos.push({
      id: Chance().natural(),
      username: Chance().name(),
      name: Chance().name(),
      color: Chance().pickone(['red', 'aquamarine', 'yellowgreen', 'pink', 'orange']),
      src: 'http://via.placeholder.com/50x25'
    });
  }
  return photos;
}

export default class AnimatedGrid extends React.Component<{}, State> {
  element: HTMLDivElement | null;
  sizer: HTMLDivElement | null;
  state = {
    photos: generatePhotos(45)
  };

  componentDidMount() {
    this.shuffle = new Shuffle(this.element as Element, {
      itemSelector: '.shuffle-card',
      sizer: this.sizer as Element
    });
  }

  render() {
    const cards = this.state.photos.map((photo) => <ShuffleCard key={`${photo.id}_${photo.username}`} {...photo} />);
    return (
      <div ref={element => this.element = element} className={`d-flex flex-horizontal space-between flex-wrap`}>
        {cards}
        <div ref={element => this.sizer = element} className="col-1@xs col-1@sm photo-grid__sizer" />
      </div>
    );
  }
}

What is Expected?

An error is does not occur in the componentDidMount.

What is actually happening?

"TypeError: WEBPACK_IMPORTED_MODULE_2_shufflejs is not a constructor" occurs on the line where this.shuffle = new Shuffle(this.element as Element, {... in the componentDidMount.

[Vestride]

This seems like an issue with your build system. If you console log Shuffle, what is it?

[ghost]

Thanks for the quick response! I placed the console statement here:

  componentDidMount() {
    // tslint:disable-next-line:no-console
    console.log(Shuffle);
    this.shuffle = new Shuffle(this.element as Element, {
      itemSelector: '.shuffle-card',
      sizer: this.sizer as Element
    });
  }

And here was the output to the console log:

[Vestride]

The issue is that you're importing the object here and trying to use that as the constructor. This is what you have now:

{ default: Shuffle }

Can you remove the *?

import Shuffle from 'shufflejs';

or maybe

import { default as Shuffle } from 'shufflejs';

[gwillz]

Hi, I don't think this ticket is resolved yet.
The issue is the type definitions included - it's really minor but Typescript is picky about it.

// index.d.ts
// line 6, currently:
export = Shuffle;
// should be:
export default Shuffle;

If this were a commonjs module, export = Shuffle; would be correct because there is no 'default' member. Commonjs singular exports don't actually record a 'default' member, i.e. module.exports = Shuffle;. This also means in Typescript, imports for es6 and commonjs-like defaults are different.

// es6 module
import Shuffle from 'shufflejs'
// commonjs module
import * as Shuffle from 'shufflejs'

But this is an es6 module, so there is a 'default' member and the definition should reflect that.

I hope that helps! No snark intended, just want to be thorough :)

[Vestride]

Released in v5.2.1. Thanks @gwillz.