webpack - Varför får jag inte det exporterade objektet när jag importerar i ett annat Typescript-projekt?

Jag försöker skapa ett React-komponentbibliotek skrivet med Typescript som ska importeras till ett annat Typescript-projekt. För att vara exakt vill jag importera ett Analytics-diagrambibliotek till ett storybook för demonstrations- och teständamål.

För att göra det använder jag dessa beroenden för biblioteket:

• "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",
• många fler...

Och jag dessa ytterligare beroenden för storybook:

• "@storybook/react": "^4.0.4"
• alla de andra som nämns ovan
• många fler...

Dessutom har jag dessa inställningar i tsconfig.json för mitt bibliotek:

• "module": "esnext",
• "moduleResolution": "node",
• "target": "es5" (detta är medvetet)
• osv.

Webpack genererar en snygg d.ts-fil som (bland annat) innehåller:

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

Sist men inte minst är libraryTarget UMD.

Nu, när jag försöker importera biblioteket i Storybook på det här sättet:

import * as Analytics from "mylibrary";

och sedan göra en

console.log(Analytics)

Jag får

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

i konsolen. Detta är inte exakt användbart, eftersom det jag förväntar mig är ett objekt som jag kan använda (som definierat i d.ts)..

Så, jag måste göra och/eller missförstå något fundamentalt fel om export och import. Jag skulle uppskatta det mycket om någon kunde peka i rätt riktning. Låt mig veta om fler detaljer behövs.

Tack så mycket

Walter

REDIGERA: Minimal projektuppsättning

• I mappen "analytics", kör "yarn install && yarn run dist"
• Gå till mappen "storybook" och kör "yarn install && yarn start-storybook"
• Öppna en webbläsare och gå till localhost:6006
• Kontrollera utvecklarkonsolen
• Håll utkik efter ett meddelande som börjar med "Där har du det!"
• Jag förväntar mig att det finns ett objekt som håller alla analysfabriker, snarare än en modul eller odefinierad...

Svar #1

Det ser ut som problemet är att du har aktiverat statisk kodsplittning på analytics, så Webpack genererar två bundles, vendors~Analytics.chunk.js och Analytics.js. Analytics.js är beroende av vendors~Analytics.chunk.js; för att en import av Analytics.js ska returnera ett användbart värde måste du manuellt ladda vendors~Analytics.chunk.js först. Du kan göra det genom att lägga till följande i storybook/stories/1_overview.stories.tsx innan importen av analytics:

import "analytics/vendors~Analytics.chunk";

Men jag ser inte vad du hoppas uppnå i detta scenario genom att ha kodsplittring aktiverad och låta alla användare av analytics-biblioteket göra denna extra import. Jag skulle föreslå att stänga av kodsplittring genom att ta bort följande från analytics/webpack.config.ts:

splitChunks: {
  chunks: "all"
}