What is the correct way to properly import a non-relative path in TypeScript?

Struggling with importing into my TypeScript class.

// Issue arises here...
import * as Foundation from 'foundation/foundation';

// Everything runs smoothly until the above import is added...
export class HelloWorldScene {
  constructor() {
    console.log("...success...");
  }
}

While attempting to build my project with ts-loader for transpilation in a gulp webpack task, the following error occurs:

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
 Error: [object Object]

I strongly suspect that the problem lies in how I'm importing the library.

javascripttypescriptimporterror-handlingecmascript-6

Answer №1

Although I'm a bit tardy, the information provided may prove beneficial to someone in the future.

Here is the solution:

In the following brief example, we utilize reactjs typescript webpack2 without using relative paths.

To configure the compiler, specify the base URL and paths for resolving imports. For example, in the tsconfig.json file located in the root directory:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node",
    "baseUrl": "src", // URL FIX 'src/comp1' TO  @import 'comp1'
    "paths": {
      "*": [
        "*", //Paths 
        "modules/*"
      ]
    }

  }
}

In webpack, we define the resolvers in the webpack2 configuration:

  resolve: {
    extensions: [
        '.tsx',
        '.ts',
        '.json',
        '.js',
        '.jsx',
        '.css'
    ],
    modules: ["node_modules", 'src']

}

Check out the full example for reference.

After applying the solution, the difference between relative and non-relative imports can be observed in typescript information.

I sincerely hope this information proves helpful to someone.

https://i.sstatic.net/Nz0pi.png

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

Enhance User Experience with the Tooltip Feature and Customized

Here is the jQuery code I am using to style my tooltips: $(function() { // select all input fields within #tooltips and attach tooltips to them $("#tooltips :input").tooltip({ // place tooltip on the right edge position: "cen ...

javascriptjqueryhtmlcss

Is JavaScript necessary for this task in PHP?

Hi everyone, I recently discovered a way to style a PHP echo in a more visually appealing manner. Instead of presenting an unattractive colored box right away, I was wondering if there is a way to only display the box when the user selects the calculation ...

javascriptphpjqueryhtmlcss

Attempting to retrieve data from local server 3000 to local server 3001 resulted in an unexpected termination of the input stream

After attempting to make a GET request to the Serp API directly from a React application, I discovered that it was not possible. To work around this issue, I created a local server and implemented the necessary logic. After testing the server using Postman ...

javascriptreactjsexpressserverlocalhost

Reactjs is displaying an AxiosError stating a Network Error

Working on a project with Reactjs and Nextjs, I encountered an issue where the data being posted with axios is inserting "NULL" values. I'm not sure where I am going wrong. Below is the code snippet in Nextjs: const userData = { name: state.name, ...

javascriptphpreactjsnext.jsaxios

Having trouble with Typescript module path resolution for .js files?

I have embarked on a project in React and I am eager to begin transitioning the js files to typescript. The setup for aliases seems to function smoothly when importing .tsx within another .tsx file, however, it encounters issues when attempting to import . ...

reactjstypescriptwebpackalias

Ensure the backslashes are removed from the AWS Lambda string API response

I have an AWS Lambda function where I am sending a string as my final response let abc= `"phone_exist":"0","calls":"0","lastaction":"0"` callback(null,abc); Output: "\"phone_exist\":\"0\",\"calls\":\"0\",\"l ...

javascriptnode.jsstringaws-lambda

Processing a list in Angular using Observables

In my Angular12 application, I am fetching data from a Firebase Realtime DB using AngularFire. To streamline my code and ensure consistency, I have implemented a DAO service to preprocess the retrieved data (e.g., converting string dates to Date objects). ...

angulartypescriptwebobservable

Striving to implement a dynamic dropdown menu using React's <select> element and rendering users from an array as selectable options

I am currently working on a project to develop an application that allows users to be added to a MongoDb database and have their names displayed in a dropdown menu. While creating the form, I encountered two issues - one related to the closing tag error a ...

javascriptreactjs

Modify the state of an individual item within an array

I have a list of items that I need to show a loader for and hide it once a certain action is completed. For instance, below is my array of items: [ { "id": "69f8f183-b057-4db5-8c87-3020168307c5", "loading": null } ...

javascriptreactjsstate

Validation of VAT numbers using JavaScript instead of PHP

I came across an interesting function at this link that is used for checking VAT numbers in the EU. However, I am struggling to integrate it with my registration form. I would like to convert it into a JavaScript function so that I can validate the number ...

javascriptphpfunctionsoap

Creating a live child component using React

My issue lies with the menu component, which is supposed to dynamically load elements in another container component. Unfortunately, the child elements are not being rendered. App.js import React, { Component } from 'react'; import './App. ...

javascriptreactjses6-modules

The output from the Moment.js HTTP server is currently experiencing errors and is not displaying the expected

My first time working with JavaScript and the Momentjs library has not been smooth sailing. I am facing an issue where the output is not displaying as required. The goal is to show dates in the format "Day, date month year" (e.g., Tuesday, 14th May 2018). ...

javascriptnode.jsservermomentjs

Error encountered while attempting to send a delete request to MongoDB due to connection refusal

Recently, I've been diving into a Next.js tutorial that involves working with MongoDB. Everything seems to be running smoothly when testing my API endpoints with Postman. POST, GET, and DELETE requests all go through without any hiccups. However, thi ...

javascriptmongodbtwitter-bootstrapnext.js

Utilize a JavaScript variable within HTML within the confines of an if statement

On my HTML page, I am dynamically displaying a list of properties and then counting how many are displayed in each div. <script type="text/javascript> var numItems = $('.countdiv').length; </script> The class name for each property ...

javascriptjquerypythonhtmljinja2

HTML form submission with a grid of multiple choice options

I have created my own multiple choice grid: <div style="overflow-x:auto;"> <table class="w-100"> <tr> <td class="border"></td> <td class="border">Yes</td> <td class="border">No</ ...

javascripthtmljquery

A Step-by-Step Guide on Sending Response to ajaxError Callback in Perl

When working with JavaScript, I have a method of capturing errors that looks like this: $(document).ajaxError(function(event, jqxhr, settings, thrownError) { handleError(MSG_SAVE_ERROR); }); Now, my question is how can I retrieve an error message fro ...

javascriptjqueryajaxperl

How can we adjust the number of items based on the width of the viewport in Vue.js?

Imagine having a template that showcases a specific number of items, like this: <template> <div> <div v-for="item in items.slice(0, 10)" :key="item" /> </div> </template> How can I adjust the numbe ...

javascriptvue.js

Understanding type inference in TypeScript

I'm attempting to grasp the concept of inferring generics in Typescript, but I can't seem to figure out where I'm going wrong. Although my concrete example is too large to include here, I've provided a link to a small TypeScript playgro ...

typescripttype-inference

Obtain the month, day, or year from a timestamp

Can anyone provide guidance on extracting a specific date format (date, month, day, year) from a timestamp? I am interested in implementing this feature within a view using Backbone JS. ...

javascriptdatedate-format

Using an AngularJS directive to dynamically incorporate Bootstrap classes in the HTML elements

Our application is now incorporating reusable code by creating a simple directive to display content efficiently. Directive Code: angular.module("newsStore.moduleDirectives", []) .directive('renderAboutContent', ['aboutService', r ...

javascriptangularjstwitter-bootstrapangularjs-directive