New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typescript Issue with React when instantiating new Shuffle #214

Closed
Smarq opened this Issue Mar 23, 2018 · 5 comments

Comments

Projects
None yet
3 participants
@Smarq
Copy link

Smarq commented Mar 23, 2018

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 comment has been minimized.

Copy link
Owner

Vestride commented Mar 23, 2018

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

@Smarq

This comment has been minimized.

Copy link

Smarq commented Mar 23, 2018

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:
screen shot 2018-03-23 at 2 39 44 pm

@Vestride

This comment has been minimized.

Copy link
Owner

Vestride commented Mar 23, 2018

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

@Vestride Vestride closed this Mar 29, 2018

@gwillz

This comment has been minimized.

Copy link

gwillz commented Nov 25, 2018

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 added a commit that referenced this issue Dec 2, 2018

Change typings to use default export #214
If you're using CommonJS, you will need to `import * as Shuffle from 'shufflejs'`.
If you're using webpack and ts is configured to maintain `import`s, you can use it like `import Shuffle from 'shufflejs'`
@Vestride

This comment has been minimized.

Copy link
Owner

Vestride commented Dec 2, 2018

Released in v5.2.1. Thanks @gwillz.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment