Can someone please help me configure typescript, webpack, and vuejs to locate packages in my node_modules/older/lib/ directory?

I'm in the process of converting an older typescript project into a library for a new vue.js project. The previous package is set up to output to ./lib/ using tsconfig.json, and all the necessary "this is where my library is" configurations are included in package.json. When I compile with tsc, everything gets compiled to lib/ in the old package, and I'm utilizing npm link to link the packages together.

However, no matter what I attempt, I can't seem to get rid of the lib/ segment from my imports. For instance, I want to do something like

import { baz } from "older/common/thing"
instead of
import { baz } from "older/lib/common/thing"
. Is there a way to achieve cleaner imports or should I just accept it as is?

package.json (partial)

{
    "main": "./lib/index.js",
    "module": "./lib/index.js",
    "types": "./lib/index.d.ts",
}

tsconfig.json

{
  "compilerOptions": {
    "module": "es6",
    "target": "es6",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "allowSyntheticDefaultImports": true,
    "importHelpers": true,
    "sourceMap": true,
    "typeRoots": [
      "typings",
      "node_modules/@types"
    ],
    "outDir": "./lib",
    "declaration": true
  },
  "include": [
    "app/source/**/*",
    "test/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

Answer №1

Removing the extra /lib/ path while using es6 modules with a JavaScript build system on top of Typescript seems nearly impossible. One answer on StackOverflow pointed out that this feature was explicitly rejected from the ECMA standard. Instead, libraries like lodash-es create a second output that places everything in the root directory of the package, alongside package.json and tsconfig.json. This approach works for me as it allows for different build settings for the library and application.

I ended up adding a second set of tsconfig.json and package.json files in ./lib/, and instructed tsc to fetch the sources from ../app/source/. The new program will be linked via npm link to the library's package name instead of the application.

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "declaration": true,
    "sourceMap": true,
    "outDir": "./",
    "rootDir": "../app/source",
    "baseUrl": "./"
  },
  "include": [
    "../app/source/**/*"
  ],
}

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

Script for running a React app with Prettier and eslint in a looping fashion

My Create React App seems to be stuck in a compile loop, constantly repeating the process. Not only is this behavior unwanted, but it's also quite distracting. The constant compiling occurs when running the default npm run start command. I suspect t ...

Enhance vee validator by incorporating personalized error messages into the ErrorBag

Can custom errors be added to the ErrorBag? Currently using nuxtjs and vee-validate registered in my plugin via nuxt.config.js Works well, but looking to use the same error code within the template For example: <template> <div v-if="errors ...

Testing TypeScript using Jasmine and Chutzpah within Visual Studio 2015

I am new to unit testing in AngularJS with TypeScript. I have been using jasmine and chutzpah for unit testing, but I encountered an error "ReferenceError: Can't find variable: angular". My test file looks like this: //File:test.ts ///<chutzpah_r ...

Typescript: The type 'X' does not correspond with the signature '(prevState: undefined): undefined' in any way

My React Native app, which is written in TypeScript, has been giving me a hard time with an error lately. The issue revolves around a Searchable List feature. This list starts off with an Array of values and gets updated when users type into a search bar. ...

display does not reflect recent url modification

I am encountering an issue while trying to access different users through my search input. I can type the name of a user, click on their name in the search results, and navigate to their page. The problem arises when I try to view another user after alre ...

Expanding all rows with the same name in a Vuetify expandable table

I have noticed an issue with the expandable tables in Vuetify, where if two entries in the table have the same name, clicking on one row to expand it also expands another row with the same name. Is there a way to prevent this from happening? To see the pr ...

Is there a way to retrieve the `this.$route` data while using vue-apollo?

Currently working on building a GraphQL query with vue-apollo and graphql-tag. When I manually set the ID, everything runs smoothly. However, I'm aiming to dynamically pass the current route's ID as a variable to Vue Apollo. Successful Implemen ...

Discover the most effective method for identifying duplicate items within an array

I'm currently working with angular4 and facing a challenge of displaying a list containing only unique values. Whenever I access an API, it returns an array from which I have to filter out repeated data. The API will be accessed periodically, and the ...

What is the best way to trigger a data update in the parent component when the child component in a Vue component is clicked?

Here is the structure of my first component (child component) : <template> ... </template> <script> export default { ... methods: { addPhoto() { const data = { id_product: this.idProduc ...

Typescript's implementation of AngularJs provider

After creating an Angularjs provider in typescript, I found myself wondering if there might be a more efficient way to achieve the same outcome. My current provider serves as an abstraction for a console logger, with the interface primarily designed to s ...

Discovering how to create two interdependent HTTP requests in separate Vue components

Exploring ways to create 2 dependent HTTP requests in separate components within Vue. I am trying to retrieve data from a session and utilize the subsequent response in all following component requests displayed in router-view. Currently, I'm unable ...

Encountering an error when using the Vue 3 TypeScript Composition API for style binding with an asynchronous

I utilized nexttick alongside an async method to update a DOM element. However, I am encountering issues with returning the correct style type. An error message pops up stating: error TS2322: Type 'Promise<{ maxHeight: string; }>' is not ...

What is the process for retrieving prop details when making a GET API request in VUE 3?

Hey there! I am currently diving into learning VUE 3 with the router but I'm struggling to grasp how to fetch data based on an id. Can anyone help me out? Every time I check my console log, it keeps showing undefined as the result. What am I doing wr ...

The vue3-openlayers view remains consistently positioned at the bottom of the page

My perspective has shifted as illustrated below It seems like there is some padding within the view inside the map container causing the shift If I drag the map upwards, it disappears, but dragging it downwards keeps it visible I have custom controls at ...

Best practices for organizing CSS, JS, and image files in a Vue project

Currently I am in the process of transitioning an HTML template to a Vue project. I find myself facing the decision of whether to store my CSS and JS files in the public directory or within the src directory. Any guidance on this matter would be greatly ...

I'd like to know how to retrieve a total count of all the documents within a Firebase collection using Angular

My code currently fetches documents from a collection, but it's only bringing back 15 at a time (from what I can gather). This is causing an issue as I need to accurately determine the total number of documents in the collection for a program I'm ...

How to access a variable from outside a promise block in Angular

Is there a way to access a variable declared outside of a promise block within an Angular 6 component? Consider the following scenario: items: string[] = []; ngOnInit() { const url='SOME URL'; const promise = this.apiService.post(url ...

Send the function to the directive

Below is the code for a directive: module app.directives { interface IDmDeleteIconController { doAction(): void; } class DmDeleteIconController implements IDmDeleteIconController { static $inject = ['$scope']; ...

Error: An uncaught TypeError has occurred in a TypeScript script using three.js, stating that it is unable to read the 'position' property of

I'm encountering a small issue with initializing the camera position in my three.js project written in TypeScript. The browser console is showing me an error message: Uncaught TypeError: Cannot read property 'position' of undefined. Below is ...

What is the best way to create an assertion function for validating a discriminated union type in my code?

I have a union type with discriminated properties: type Status = { tag: "Active", /* other props */ } | { tag: "Inactive", /* other props */ } Currently, I need to execute certain code only when in a specific state: // At some po ...