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

Encountering a 405 error when making an OpenAI API call with next.js, typescript, and tailwind CSS

I encountered a 405 error indicating that the method request is not allowed. I am attempting to trigger an API route call upon clicking a button, which then connects to the OpenAI API. Unsure of my mistake here, any guidance would be highly appreciated. E ...

typescriptnext.jstailwind-css

Setting various colors for different plots within a single chart: A step-by-step guide

I'm currently tackling a project that requires me to showcase two different plots on the same chart, one being a "SPLINE" and the other a "COLUMN". My aim is to assign distinct background colors to each of these plots. Please note that I am referring ...

angulartypescriptchartshighcharts

Is there a way to modify the style within a TS-File?

I've created a service to define different colors and now I want to set separate backgrounds for my columns. However, using the <th> tag doesn't work because both columns immediately get the same color. Here's my code: color-variatio ...

javascriptangulartypescriptmat-table

Guide to Validating Fields in Angular's Reactive Forms After Using patchValue

I am working on a form that consists of sub-forms using ControlValueAccessor profile-form.component.ts form: FormGroup; this.form = this.formBuilder.group({ firstName: [], lastName: ["", Validators.maxLength(10)], email: ["", Valid ...

angulartypescriptvalidationangular-reactive-forms

Utilizing a package from your local computer

Due to my current circumstances, I am unable to utilize the npm publish command to release a package on the internet and subsequently use npm install. I also have no intention of publishing it on a remote server like nexus. Is there a method available to ...

node.jsangulartypescriptnpmmodule

Issue with MongoDB $push within an Array of Arrays: The shorthand property 'elements' does not have a value available in scope

I am encountering an issue while trying to insert data into Elements in MongoDB using TypeScript. Any suggestions on how to resolve this problem? Attempt 1 Error: I am receiving an error message stating "No value exists in scope for the shorthand property ...

databasemongodbtypescriptmongodb-querypush

The functionality of TypeScript's .entries() method is not available for the type 'DOMTokenList'

I'm currently working with a stack that includes Vue3, Vite, and TypeScript. I've encountered an issue related to DOMTokenList where I'm trying to utilize the .entries() method but TypeScript throws an error saying Property 'entries&apo ...

javascripttypescriptvue.jsvite

Alter the language settings of the Datepicker feature in Material Angular 4

Need help changing the language of Datepicker in Material Angular. Struggling to locate this information in the Angular material 2 documentation. Check out this plunkr https://plnkr.co/edit/unzlijtsHf3CPW4oL7bl?p=preview <md-input-container> < ...

javascriptangulardatetypescriptangular-material2

Tips for transferring information between service functions in Angular

In my front-end development, I am working on creating a store() function that adds a new question to the database. However, I need to include the active user's ID in the question data before sending it to the back-end. Below is the code for the store ...

angulartypescriptrxjs

The specified type 'Observable<{}' cannot be assigned to the type 'Observable<HttpEvent<any>>'

After successfully migrating from angular 4 to angular 5, I encountered an error in my interceptor related to token refreshing. The code snippet below showcases how I intercept all requests and handle token refreshing upon receiving a 401 error: import { ...

angulartypescriptrxjs

Mastering the Art of Mocking Asynchronous Methods in Node.js Using Jest

I have the following files: |_ utils.js |_methods.js I am currently conducting unit testing for rest.js methods, where the content of the file is as follows: methods.js import Express from 'express' import { add_rec } from './utils' ...

node.jstypescriptexpressunit-testingjestjs

AngularJS ng-model not refreshing

One of the features in my application is a Font Awesome icon picker that allows employees to easily access different icons without having to search for their codes online. However, I am facing an issue where clicking on an icon does not update the ng-mode ...

javascriptangularjstypescriptfont-awesomedevextreme

Developing a way to make vue-custom-element compatible for embedding in external websites

I've been exploring ways to use a component from my Vue website on another site by embedding it in HTML. I came across https://github.com/karol-f/vue-custom-element and found this helpful guide. After installing the npm packages vue-custom-element an ...

javascriptvue.jswebpack

Develop a mobile application utilizing reactjs based on my website, not native

I am in the process of creating a mobile application that mirrors my existing website built with reactjs. As I was researching on reactjs, I wondered if it is possible to convert my reactjs code from the website into code for the mobile application. Any s ...

node.jsreactjsexpresswebpackmobile-application

An effective method for adding information to a REDIS hash

My current computing process involves storing the results in the REDIS database before transferring them to the main database. At the moment, I handle operations in batches of 10k items per chunk using a separate GAE instance (single-threaded computing wi ...

node.jstypescriptgoogle-app-engineredis

What is the reason behind Webpack's behavior of loading all files from a folder during lazy loading

I am attempting to dynamically import i18n files using webpack: function getI18n(lang) { return import(/* webpackChunkName "i18n/[request]" */ `./locales/${lang}.json`) .then(/*whatever*/) } However, I have noticed that all the files from the specifi ...

typescriptvue.jswebpackvuejs2lazy-loading

The Lenis smooth scrolling feature (GSAP) is not functioning properly

I have encountered an issue with the smooth scrolling feature of gsap causing a delay on my website. This problem is only resolved when I manually go into the browser settings and disable smooth scrolling by navigating to chrome://flags/#smooth-scrolling ...

javascriptreactjstypescriptnext.js

When using React MUI Autocomplete, make sure to handle the error that occurs when trying to filter options using the

I am trying to implement an autocomplete search bar that makes a custom call to the backend to search through a list of tickers. <Autocomplete multiple id="checkboxes-tags-demo" options={watchlis ...

reactjstypescriptmaterial-ui

The attribute 'split' is not found on the never data type

I have a function that can update a variable called `result`. If `result` is not a string, the function will stop. However, if it is a string, I then apply the `split()` method to the `result` string. This function always runs successfully without crashin ...

javascripttypescript

Tips for displaying personalized data with MUI DatePicker

I need to create a React TypeScript component that displays a MUI DatePicker. When a new date is selected, I want a custom component (called <Badge>) to appear in the value field. Previously, I was able to achieve this with MUI Select: return ( ...

javascriptreactjstypescriptmaterial-uidatepicker