What could be causing the absence of the exported Object when importing into a different Typescript project?

I am currently in the process of developing a React component library using Typescript that I want to import into another Typescript project. Specifically, I want to import an Analytics chart library into a storybook for demonstration and testing purposes.

For this endeavor, I have included the following 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",
  • and many more...

In addition, I've added these extra dependencies for the storybook:

  • "@storybook/react": "^4.0.4"
  • all of the aforementioned dependencies
  • and many more...

Furthermore, here are the settings in the tsconfig.json file of my library:

  • "module": "esnext",
  • "moduleResolution": "node",
  • "target": "es5" (this has been intentionally set)
  • etc.

When Webpack generates the d.ts file, it contains various declarations including the following:

declare module 'mylibrary' {
     ...
}

Finally, the libraryTarget specified is UMD.

However, when attempting to import the library in the storybook like this:

import * as Analytics from "mylibrary";

and then running a

console.log(Analytics)

The console displays:

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

This output is not what I expected, as ideally I would like to see an Object that I can interact with as defined in the d.ts file.

It seems there may be a fundamental error or misunderstanding on my part regarding exports and imports. Any guidance on how to rectify this issue would be greatly appreciated. Feel free to ask if further details are required.

Thank you,

Walter

EDIT: Minimal project setup

  • In the "analytics" folder, run "yarn install && yarn run dist"
  • Navigate to the "storybook" folder and run "yarn install && yarn start-storybook"
  • Open a browser and go to localhost:6006
  • Check the developer console for messages starting with "There you go!"
  • I expect to see an Object containing all the Analytics factories instead of a Module or undefined...
typescriptwebpackbabeljsstorybookjavascript-import

Answer №1

It appears that the issue stems from enabling static code splitting on analytics. This causes Webpack to create two bundles, vendors~Analytics.chunk.js and Analytics.js. However, Analytics.js relies on vendors~Analytics.chunk.js; so in order for an import of Analytics.js to work properly, you would need to manually load vendors~Analytics.chunk.js first. To do this, you could add the following line to 

storybook/stories/1_overview.stories.tsx
before importing analytics:

import "analytics/vendors~Analytics.chunk";

Nevertheless, it's unclear what benefit is gained by having code splitting enabled and requiring all users of the analytics library to perform this additional import step. It may be more practical to disable code splitting by removing the following section from analytics/webpack.config.ts:

splitChunks: {
  chunks: "all"
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging the ngFor local variable within nested elements

Is there a way to properly display a property of the local variable theme, such as theme.name? Below is an example of how my *ngFor is structured: <ul> <li *ngFor="#theme of themes"> <span>theme.name</span> </li> ...

typescriptangularngfor

A guide to declaring MongoDB models in TypeScript across multiple files

In my Node.js TypeScript project, the structure is as follows: https://i.stack.imgur.com/YgFjd.png The crucial part of the structure lies in mongoModels. I have 2 models where each Category model is connected and contains field category.expertUserIds whi ...

typescriptmongodbmongoose

encountering a loading issue with angular2-modal in rc1 version

Currently, I am implementing a library called angular2-modal. This library offers various modal options including bootstrap and vex for angular 2. While vex is functioning properly, I encounter an error when switching to bootstrap: responsive-applicati ...

javascripttypescriptangularangular2-directives

Adding a condition to the react-router v6 element: A step-by-step guide

I am currently in the process of updating my project from v5 to v6 of react-router-dom. However, I have encountered an issue. Everything was working fine in v5 <Route path={`${url}/phases/:phaseIndex`}> {(chosenPhase?.type === PhaseTy ...

reactjstypescript

The attribute is not found on the combined type

After combing through various questions on stackoverflow, I couldn't find a solution to my specific case. This is the scenario: interface FruitBox { name: string desc: { 'orange': number; 'banana': number; } } interf ...

typescripttypescript-genericsdiscriminated-union

Retrieving the property of a union type comprising a void type and an unnamed type

Currently, I am working on a project involving GraphQL. In my code, I have encountered a GraphQLError object with a property named extensions. The type of this property is either void or { [key: string]: any; }. Whenever I try to access any property within ...

typescriptgraphqlapollo

Angular Validators.pattern() does not seem to function properly, despite yielding successful results in online regex testers

I have developed a regex pattern on Regex101.com and thoroughly tested it. However, when I applied it to my FormControl Validators.pattern method, it is exhibiting unexpected behavior. This regex pattern is meant for validating the Width input of a packag ...

regexangulartypescript

Tips for triggering an event from a function instead of the window

Everything is functioning as expected, with the event listener successfully capturing the custom event when it is dispatched from the window and listened for as loading, all seems to be working well. const MyLib = mylib(); function mylib() { const re ...

javascripttypescript

The beta version of Angular 2.0 introduces the BrowserDomAdapter for easy access to the DOM

I have a Component in Angular 2.0 that is attempting to utilize the DOM Adapter API from Angular's BrowserDomAdapter documentation. The initialization of this DomAdapter can be found here. However, I am uncertain about whether the Dom Adapter needs t ...

javascriptangularjsdomtypescriptbeta

Turning off the transpiler in Vue Webpack to simplify the debugging process

Debugging in Vue can be quite challenging, especially when it comes to setting breakpoints and stepping through the code. The issue seems to stem from the transpiling of javascript ES6/ES2015/ES2016/ES2017 to ES5. While source maps provide some assistance, ...

javascriptdebuggingvue.jswebpackgoogle-chrome-devtools

Having trouble getting a constructor to function properly when passing a parameter in

Here's the code snippet I'm working with: import {Component, OnInit} from '@angular/core'; import {FirebaseListObservable, FirebaseObjectObservable, AngularFireDatabase} from 'angularfire2/database-deprecated'; import {Item} ...

javascriptangulartypescriptfirebaseangular5

What is the best way to retrieve entire (selected) objects from a multiselect feature in Angular?

I'm facing an issue with extracting entire objects from a multiselect dropdown that I have included in my angular template. Although I am able to successfully retrieve IDs, I am struggling to fetch the complete object. Instead, in the console, it dis ...

angulartypescriptangular7angular-ngmodelngfor

What is the best way to iterate over an Angular HTTP Response?

As a newcomer to Angular, I am working on mastering the process of uploading files and calling an API for validation. The API responds with a list of JSON validation errors based on specific file values. I am currently struggling to iterate through these ...

arraysangulartypescripthttpresponseangular-pipe

Displaying a segment of information extracted from a JSON array

I'm currently tackling a project that involves using React, Redux, and TypeScript. Within the JSON file, there is a key-value pair: "data_start": "2022-09-02" Is there a way to display this date in a different format, specifical ...

reactjsjsontypescriptredux

Encountering an issue when trying to launch the server in ReactJS

$ yarn start Failed to compile. Cannot read property 'compilation' of undefined error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. error Command failed with signal " ...

node.jsreactjsnpmwebpackyarn-lock.json

Uh oh: encountered an unexpected token 'export' in node_modulesexpoAppEntry.js

I'm encountering a challenge with my Expo project. While attempting to launch my app using yarn start, I'm running into this error: Android Bundling failed 449ms error: node_modules\expo\AppEntry.js: Unexpected token 'export&apo ...

javascriptreact-nativeexpobabeljsnode-modules

Guide on incorporating ReactJS Material UI via a CDN using Webpack's external dependencies

Issue at Hand: I am facing a challenge in developing a website (web app) using React and Material UI. Everything works smoothly when utilizing npm. However, encountering an error with Material UI when attempting to link them as externals and import throug ...

reactjswebpackmaterial-uicdn

Issue: The inject() function can only be executed within an injection context. Issue: An untruthy value was expected to be truth

I'm currently in the process of setting up a unit test for my app.component. I've imported all the necessary components, but I keep encountering an error that's puzzling me. I activated "preserveSymlinks": true in my angular.json file, but t ...

angulartypescriptunit-testingkarma-jasmine

Tips for simulating the getCustomRepository function in typeORM

I am facing a challenge in unit-testing a class that has a getCustomRepository method in its constructor. I'm struggling to find an easy way to mock it. Below is the code for my class: import {getCustomRepository} from 'typeorm'; export cl ...

node.jstypescriptunit-testingjestjstypeorm

What is the method for implementing two-way binding on a checkbox in Angular?

Within my accordion, I have a series of options in the form of checkboxes. Users are able to select these checkboxes, but I am seeking a way to pre-select certain checkboxes based on specific conditions. The challenge arises when these conditions are deter ...

javascripthtmlarraysangulartypescript