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

Question

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:

• "typescript": "^3.1.6"
• "webpack": "^4.15.1"
• "babel-loader": "^8.0.4"
• "ts-loader": "^5.3.0"
• "@babel/core": "^7.1.5",
• "@babel/runtime": "^7.1.5",
• "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
• "@babel/plugin-syntax-dynamic-import": "^7.0.0",
• "@babel/preset-env": "^7.1.5",
• many more...

And I these additional dependencies for the storybook:

• "@storybook/react": "^4.0.4"
• all the others mentioned above
• many more...

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

• "module": "esnext",
• "moduleResolution": "node",
• "target": "es5" (this is on purpose)
• etc.

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

• In the folder "analytics", run "yarn install && yarn run dist"
• Go to folder "storybook" and run "yarn install && yarn start-storybook"
• Open a browser and go to localhost:6006
• Check the dev console
• Look out for a message that starts with "There you go!"
• I expect that there is an Object holding all the Analytics factories, rather than a Module or undefined...

Answer 1

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"
}