Import package with react-scripts-ts

[andresmgot]

Do you want to request a feature or report a bug?

A bug?

What is the current behaviour?

I am trying to render a PieChart component in a test, something like this:

import { mount } from "enzyme";
import * as React from "react";
import PieChart from "react-minimal-pie-chart";

it("renders a pie chart", () => {
  mount(<PieChart data={[{ value: 1, color: "blue" }]} />);
});

But when I try to execute it I get:

    Element 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.

I think the error is related to how the code is imported but I am not sure what could be the reason.

I am using "typescript": "^3.7.2" and "react-minimal-pie-chart": "^6.0.1".

What is the expected behaviour?

To be able to render a PieChart using jest

Steps to Reproduce the Problem

(Explained above, let me know if it's not reproducible)

Note that the code works as expected in the functional code, which is why I am confused.

[toomuchdesign]

Hi @andresmgot,
It seems an issue related with your test environment or enzyme itself. May you try to reproduce the error on repl.it?

Cheers

[andresmgot]

It could be, yes, but I am not sure what's the piece that's failing.

In this tarball I have added a minimal setup in which I can reproduce the issue:

pie.tar.gz

If you run yarn && npm run test you should be able to reproduce it too.

[toomuchdesign]

Someone else stumbled upon this issue in the past:
wmonk/create-react-app-typescript#364

Importing the library like this should make friends again with TS.

import * PieChart from "react-minimal-pie-chart";

I honestly don't know what's up with TS.

[andresmgot]

I changed that (BTW, nit: import * as PieChart from "react-minimal-pie-chart";) and the funny thing is that the test now worked but the functional Typescript code failed to compile with:

JSX element type 'PieChart' does not have any construct or call signatures.

I think there is a problem with the TS definition. If I re-declare the module adding a file:

▶ cat src/react-minimal-pie-chart.d.ts 
declare module "react-minimal-pie-chart";

Both the test and the compilation work but I lose all the Typescript annotations.

[andresmgot]

Never mind, redefining the package bypassed the validation but the application failed in the browser anyway so I cannot import the package with import * as PieChart

[toomuchdesign]

Got it. Happy to support if you find something wrong coming from this repo.

[andresmgot]

I have been trying different formats for declaring the types for typescript but none seemed to work in all scenarios 🤷‍♂️

Leaving this in case someone has more knowledge about Typescript.

Thanks for replying!

[toomuchdesign]

Closing since it seems a react-scripts-ts issue.