CODEWITHSUNDEEP
typescriptwebpackbabeljsstorybookjavascript-import
Walter
Walter

Reputation: 406

Why am I not getting the exported Object when importing in another Typescript project?

I'm trying to create a React component library written by means of Typescript that shall be imported into another Typescript project. To be precise, I would like to import an Analytics chart library into a storybook for demo and testing purposes.

To do that, I use these dependencies for the library:

And I these additional dependencies for the storybook:

Moreover, I have this settings in the tsconfig.json of my library:

Webpack generates a neat d.ts file which (among other things) contains:

declare module 'mylibrary' {
     import { BarChartFactory } from 'mylibrary/factories/barChartFactory';
     import { LineChartFactory } from 'mylibrary/factories/lineChartFactory';
     import { PieChartFactory } from 'mylibrary/factories/pieChartFactory';
     import { AreaChartFactory } from 'mylibrary/factories/areaChartFactory';
     import { RadarChartFactory } from 'mylibrary/factories/radarChartFactory';
     import { ScatterChartFactory } from 'mylibrary/factories/scatterChartFactory';
     import { GaugeChartFactory } from 'mylibrary/factories/gaugeChartFactory';
     import { HeatmapChartFactory } from 'mylibrary/factories/heatmapChartFactory';

     const Analytics: {
         "barChart": typeof BarChartFactory;
         "lineChart": typeof LineChartFactory;
         "pieChart": typeof PieChartFactory;
         "areaChart": typeof AreaChartFactory;
         "radarChart": typeof RadarChartFactory;
         "scatterChart": typeof ScatterChartFactory;
         "gaugeChart": typeof GaugeChartFactory;
         "heatmapChart": typeof HeatmapChartFactory;
     };
     export default Analytics;
}

Last but not least, the libraryTarget is UMD.

Now, when I try to import the library in the storybook like this:

import * as Analytics from "mylibrary";

and then make a

console.log(Analytics)

I get

Module
    Symbol(Symbol.toStringTag): "Module"
    __esModule: true
    __proto__: Object

in the console. This is not exactly useful, because what I expect is an Object that I can consume (as defined in the d.ts)..

So, I must be doing and / or misunderstand something fundamentally wrong about exports and imports. I appreciate it very much if somebody could point to the right direction. Let me know if any more details are needed.

Thanks a lot

Walter

EDIT: Minimal project setup

Upvotes: 2

Views: 564

Answers (1)

Matt McCutchen
Matt McCutchen

Reputation: 30999

It looks like the problem is that you have enabled static code splitting on analytics, so Webpack generates two bundles, vendors~Analytics.chunk.js and Analytics.js. Analytics.js is dependent on vendors~Analytics.chunk.js; for an import of Analytics.js to return a useful value, you would have to manually load vendors~Analytics.chunk.js first. You could do so by adding the following to storybook/stories/1_overview.stories.tsx before the import of analytics:

import "analytics/vendors~Analytics.chunk";

But I don't see what you are hoping to gain in this scenario by having code splitting enabled and having all users of the analytics library do this extra import. I'd suggest turning off code splitting by removing the following from analytics/webpack.config.ts:

splitChunks: {
  chunks: "all"
}

Upvotes: 1

Related Questions