rcpch / digital-growth-charts-react-component-library

A typescript React library for displaying RCPCH Digital Growth Charts from API data
https://growth.rcpch.ac.uk
MIT License
8 stars 11 forks source link

v7.0.11 - Importing RCPCHChart from npm package no longer functions #107

Closed dmc-cambric closed 2 months ago

dmc-cambric commented 2 months ago

Hi guys,

Have attempted an upgrade from v7.0.9 to v7.0.11 in our app, however it appears that importing the RCPCHChart react component is no longer possible. Is this potentially related to recent build changes?

Import code:

import { RCPCHChart } from "@rcpch/digital-growth-charts-react-component-library"

Generated error:

error TS7016: Could not find a declaration file for module '@rcpch/digital-growth-charts-react-component-library'. 'node_modules/@rcpch/digital-growth-charts-react-component-library/dist/index.js' implicitly has an 'any' type.

Another potential issue I've spotted is the type importing, previously these were being fetched from the build folder within the package. (see below examples)

import { RCPCHChartProps } from "@rcpch/digital-growth-charts-react-component-library/build/RCPCHChart/RCPCHChart.types"
import { ClientMeasurementObject } from "@rcpch/digital-growth-charts-react-component-library/build/interfaces/ClientMeasurementObject";

I've had to update these to instead fetch from the src folder for the build to work correctly, i.e.

import { RCPCHChartProps } from "@rcpch/digital-growth-charts-react-component-library/src/RCPCHChart/RCPCHChart.types"
import { ClientMeasurementObject } from "@rcpch/digital-growth-charts-react-component-library/src/interfaces/ClientMeasurementObject";

Curious if this is an intentional change or if types should be getting imported differently.

Any help you can give is much appreciated!

eatyourpeas commented 2 months ago

Ah sorry @dmc-cambric yes it is possible things got moved around when I removed the fonts and css files. I changed the build folder name to dist. That was not very helpful - I apologize. In our own client we import this way: import { RCPCHChart } from "@rcpch/digital-growth-charts-react-component-library"; and import { ClientMeasurementObject } from "@rcpch/digital-growth-charts-react-component-library/dist/types"

This I guess is a breaking change which it was not meant to be so I can put it back the way it was. In the meantime changing build to dist should work

dmc-cambric commented 2 months ago

Hi Simon, yeah the import for the RCPCHChart there is the same one that we use:

import { RCPCHChart } from "@rcpch/digital-growth-charts-react-component-library"

However I think there are some differences in our implementation, we're using the import within a typescript file, and it seems the typing is broken in some areas with the new npm package build.

v7.0.9 build folder: src: https://www.npmjs.com/package/@rcpch/digital-growth-charts-react-component-library/v/7.0.9?activeTab=code image

v7.0.11 dist folder src: https://www.npmjs.com/package/@rcpch/digital-growth-charts-react-component-library?activeTab=code image

From what I can tell, a lot of files are missing from the dist folder that were previously present in the build folder of the npm package. Most notably the index.d.ts file.

I think this omission has been caused by a setting in tsconfig.json: "declarationDir": "build" which I believe should be pointing towards 'dist' - Link to line.

dmc-cambric commented 2 months ago

Regarding importing types from the dist/types: import { MidParentalHeightObject } from "@rcpch/digital-growth-charts-react-component-library/dist/types"

When doing the above, I get the following TS2459 error:

"@rcpch/digital-growth-charts-react-component-library/dist/types"' declares 'MidParentalHeightObject' locally, but it is not exported.

The above occurs for all the other imports as well (i.e. Measurement, ClientMeasurementObject). I'm wondering if the interfaces declared within @rcpch/digital-growth-charts-react-component-library/dist/types.d.ts should be 'export interface' instead of 'interface'?

dmc-cambric commented 2 months ago

I'm also getting a TS2724 error when attempting to import the RCPCHChartProps: '"@rcpch/digital-growth-charts-react-component-library/dist/types" has no exported member named 'RCPCHChartProps'

My previous import code fetched directly from the types file for the RCPCHChart, but this file is no longer present in the build folder. Should this be appearing in the dist/types file instead?

import { RCPCHChartProps } from "@rcpch/digital-growth-charts-react-component-library/build/RCPCHChart/RCPCHChart.types";
eatyourpeas commented 2 months ago

Thanks @dmc-cambric for this super helpful and detailed information. I meant to tidy the build folder in the process of stripping out the raw font files but should have thought about it a bit more clearly before refactoring things. I am sorry. I have set it all back to the way it was. Let me know here if I have missed something.

eatyourpeas commented 2 months ago

closed with #108