Exporting Modules in ES6 and beyond

Transitioning from the Java world, I am venturing into creating a vanilla JS (ES2018) Application with types documented in JSDOC. By using the TypeScript compiler, I aim to generate clean definition files that can be bundled with my app. With just two main files - client.js (containing a default-exported class) and constants.js (featuring a default-exported object with constants) located under src/, I intend to unite them under a common namespace in index.js:

import XApiClient from 'src/brokers/xtb/x_api_client';
import {Constants} from 'src/brokers/xtb/x_api_constants';

/**
 * @namespace
 * @property {Constants} Constants
 * @property {XApiClient} XApiClient
 */
const XApi = {Constants: Constants, Client: XApiClient};
export default XApi;

Despite being used in other projects via npm+git, the Typescript compiler fails to recognize the type of XApi.XApiClient in this new project. This frustration has reached a point where I find myself contemplating giving up coding for a simpler life looking after goats in the hills.

Answer №1

In the end, I finally took the plunge and made the switch to Typescript. As a result, I now have an extra step of parsing JSDOC tags to generate the definition files. It turns out that the errors I encountered were simply due to misconfiguration in my tsconfig file.

For reference, here is a snippet of my tsconfig (based on gts with webpack integration):

{
  "extends": "./node_modules/gts/tsconfig-google.json",
  "compilerOptions": {
    "outDir": "js/",
    "rootDir": "src/",
    "sourceMap": true,
    "moduleResolution": "node",
    "module": "commonjs",
    "target": "ES2018",
    "lib": ["dom","dom.iterable", "ES2018"],
    "noImplicitAny": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*.ts", "test/**/*.ts"],
  "exclude": ["dist", "node_modules"]
}

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

In a VueJS project, access an xlsx file stored in the public directory by reading its contents

My current challenge involves trying to extract a quiz template from an xlsx file in order to create the quiz within it. Unfortunately, storing the xlsx file as json in a database is not a feasible solution for me at this time. I experimented with using ...

What is the best way for library creators to indicate to VSCode which suggested "import" is the correct one?

As a library creator, I have noticed that VSCode often suggests incorrect imports to users. For instance, VSCode typically suggests the following import: import useTranslation from 'next-translate/lib/esm/useTranslation' However, the correct im ...

"Maximizing the efficiency of passing state in React: expert tips

I am currently working on developing a social media platform similar to Facebook. A crucial feature of this project is the feed, which displays a list of posts retrieved from the database and rendered dynamically. In Feed.js const [posts, setPosts] = useS ...

Retrieving table information using javascript

My goal is to retrieve information from the <td> elements within the following HTML table: <table class="datadisplaytable" summary="This table lists the scheduled meeting times and assigned instructors for this class.."> <caption class="cap ...

Enhancing Visuals with src="imageUrl within Html"

Is there a way to customize the appearance of images that are fetched from an API imageUrl? I would like to create some space between the columns but when the images are displayed on a medium to small screen, they appear too close together with no spacing. ...

Getting an attribute parameter within a directive: A step-by-step guide

I am currently working on injecting the name from the myController scope into the myObj directive as a custom attribute called nameAttr. Even though I have set name: '=nameAttr' in the directive's scope, it doesn't seem to be functioni ...

Can JavaScript be executed from the console while navigating between pages?

I am facing a challenge that I can't find any solutions for online or elsewhere. The task at hand seems straightforward. I am using the Chrome console and attempting to run Javascript code to navigate between pages with pauses in between. It feels lik ...

Codeceptjs does not have the capability to scroll or swipe down without being linked to a specific element

I'm facing an issue with scrolling/swiping down in an Android application while using codeceptjs. The method I'm currently using only works on the visible element, but I need to scroll down to the bottom of the page or a specific element without ...

The difference between emitting and passing functions as props in Vue

Imagine having a versatile button component that is utilized in various other components. Instead of tying the child components to specific functionalities triggered by this button, you want to keep those logics flexible and customizable within each compon ...

Obtain the total sum from the array of objects that are nested within

In the array of objects below, each object contains a nested object called count. I am looking to calculate the total sum of Closed, Verify, and Analyze For example, the total for Closed is 23, Verify is 3, and Analyze is 20 "byPerson": [ ...

Retrieve client-side environment variables

When making multiple API calls within my components using the fetch method, I found myself constantly having to determine which environment I was in. To streamline this logic, I created a Utils class that provides the appropriate base URL: export default c ...

Adjustable Cursor - modify size while in motion at high speeds

I've designed a unique custom cursor and I am looking to enhance its functionality by adjusting its scale dynamically during fast movements. Similar to the cursor on this website: Example.com Here is my custom cursor for reference: CodeSandBox What ...

How can Vuejs be utilized to showcase data with the onChange event?

I'm working on a Vuejs component and I currently have this code snippet: <div class="col-sm-9"> <Select class="form-control" name="building" v-model="allBuild.id" @change="showBuilding($event)& ...

Tips for resetting the mapbox geocoder

Using the Mapbox Geocoder along with multiple select menus to customize a map has been my latest project. I am currently working on resetting the geocoder once a user selects an option from the menu, clearing the input field and removing the marker in the ...

The choice between using inline style objects with React or utilizing traditional CSS classes presents distinct advantages and

Is there a discernible difference between utilizing an inline style object for react components and using a normal CSS class through the className attribute? Even when wanting to modify styles based on a specific event, simply changing the className should ...

Tips on personalizing the formatting alert in Webclipse for Angular 2 using Typescript

Webclipse offers extensive formatting warnings for TypeScript code, such as detecting blank spaces and suggesting the use of single quotes over double quotes. However, some users find the recommendation to use single quotes annoying, as using double quotes ...

Looking for assistance in resolving the error message: 'state' is not defined no-undef

I'm having some trouble adding a navbar to one of my projects as I keep encountering a failed to compile error. "Line 7:5: 'state' is not defined no-undef Line 9:5: 'handleClick' is not defined no-undef" import React, { ...

The Application Insights Javascript trackException function is giving an error message that states: "Method Failed: 'Unknown'"

I've been testing out AppInsights and implementing the code below: (Encountering a 500 error on fetch) private callMethod(): void { this._callMethodInternal(); } private async _callMethodInternal(): Promise<void> { try { await fetch("h ...

Issue encountered in the file located at ./node_modules/framer-motion/dist/es... where the export 'useId' (imported as 'useId') could not be located in 'react' along with 'useInsertionEffect'

After adding the framer-motion library using yarn add framer-motion, I encountered the following configuration: https://i.sstatic.net/rG2FJ.png Error message : ERROR in ./node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs 40:13- ...

Determining the depth difference of nodes between two elements using JQuery

Is there a simple method to calculate the node depth difference between 2 elements? Example : <div id="1"> <div id="2"></div> <div id="3"> <div id="4"></div> </div> </div> <div id="5"></d ...