Steps to turn off the creation of "exports.__esModule = true;" and "require('lib');"

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js'></script>
    <script src="app.js"></script>
</body>
</html>

app.ts :

import { Vue } from "vue/types/vue";

let vue = new Vue({
    el:"#app",
    data:{
        text:"hello world"
    }
})

After running tsc, the generated JavaScript will look like this:

"use strict";
exports.__esModule = true;
var vue_1 = require("vue/types/vue");
var vue = new vue_1.Vue({
    el: "#app",
    data: {
        text: "hello world"
    }
});

Expected Output

I would like to avoid generating "exports.__esModule = true;" and "require("lib");"

var vue = new Vue({
    el: "#app",
    data: {
        text: "hello world"
    }
});

Note:

I utilize DefinitelyTyped for type definition

Answer №1

Update your tsconfig.json file to set module as es2015 and moduleResolution as node.

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node"
  }
}

This is the recommended setup.

The occurrences of exports.__esModule and require('lib') are what take place when transitioning from an ES module to commonJS, either with babel or TypeScript as discussed in this article here.

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

When the keyboard appears, the Ionic 2 form smoothly slides upwards

I am currently working with the most recent version of Ionic 2. In my code, I have a <ion-content padding><form></form></ion-content> containing a text input. However, when attempting to enter text on an Android device, the keyboard ...

I'm on the lookout for a component similar to angular-ui-tree that is compatible with angular

As a new developer, I am in search of a component similar to: But specifically for Angular 6, with all the same functionality (drag-and-drop capability, nested items, JSON structure, etc.). I have come across some components that either lack dragging fun ...

Buffer.from in Node.js exposes program context leakage

Have you encountered a bug where the Buffer.from() function reads outside of variable bounds when used with strings? I experienced some unusual behavior on my backend, where concatenating 2 buffers resulted in reading contents of variables and beyond, inc ...

IntelliJ IDEA mistakenly believes that the MouseEvent interface has already been declared

Can someone help explain the error TS2687:All declarations of 'x' must have identical modifiers.? I'm diving into the documentation for TypeScript to grasp the language better. The code snippet from the Function Parameter Bivariance section ...

The Java value is not returned by the Observable<boolean> stream

I'm currently working on making a request to the backend for a boolean value using observables, but I'm struggling to figure out the best approach between .map and .subscribe. return this.http.put({url}, credentials, this.requestOptions) .ca ...

The application is having trouble accessing the property 'isXXXXX' because it is undefined

My attempt to utilize a shared service in one of my components has been successful when used with the app's root component. However, I encountered an error when trying to implement it on another module or dashboard. https://i.sstatic.net/x3rRv.png s ...

What is the best way to ensure that the second http call only runs after the first http call has completed, and passing an argument retrieved from the first call to the

My current challenge involves hitting one API to retrieve a specific string, storing it in a variable, and then passing it to another HTTP API call. However, I'm encountering an issue where the API call requiring the argument executes but never sends ...

Testing Jasmine with objects that contain optional properties

In the IData interface, there are optional properties available. interface IData { prop1: string, prop2?: string } setObj(){ prop1 = 'abc'; prop2 = 'xyz'; let obj1 : IData = { prop1: this.prop1, ...

Creating a custom string subtype in TypeScript

I am currently working on developing a game called Risk using TypeScript and React hooks. This game is played on a map, so my first step was to design a MapEditor. The state of the Map Editor is as follows: export interface IMapEditorState { mousePos: ...

Exploring the seamless integration of Next.js, TypeScript, and useContext across

Revision: I realized that I had forgotten to include the following line of code in my Header.tsx component: import Link from 'next/link'; After rectifying this oversight, everything started functioning properly. I am currently struggling with ...

Develop interactive web applications using Typescript

Having difficulty compiling and executing the project correctly in the browser. The "master" branch works fine, but I'm currently working on the "develop" branch. It's a basic web project with one HTML file loading one TS/JS file that includes i ...

What is the process for choosing a specific id from a JSON structure?

Is there a way to extract specific data from a JSON format within an Ionic project? What is the process for selecting the ID associated with particular data in a JSON format? And how can I retrieve and display the value linked to the selected product&apos ...

Showing off the latest products at the top of the list

Typically, when utilizing ngFor, the most recent item is displayed underneath the initial element. For instance, a list containing: [Apple, Orange, Banana] If we use ngFor to display this list: Apple Orange Banana I am interested in learning a method t ...

Tips for adjusting the search bar's position on a mobile device when it is activated by the user

I need help with an open source project where I am developing a search engine using Angular. When using smaller screen sizes, the search bar is positioned in the middle but gets hidden behind the keyboard terminal when clicked on. Can anyone advise on ho ...

Facing an issue with TypeScript when attempting to import React createElement in a different class

I currently have a file named SEO.tsx which contains a component import React, { Component } from 'react' export default class SEO extends Component { render() { return ( <div>test</div> ); } } Wi ...

Leverage es6 classes along with mongoose in typescript to utilize loadClass functionality

I've been struggling with a problem and despite my exhaustive search on Google, I still haven't found a solution. My issue revolves around incorporating es6 classes with mongoose using the schema.loadClass(class) method. Unfortunately, when worki ...

Upgrade to Primeng 4.3 to easily convert column values from 'S' and 'N' to 'Yes' and 'No' in your Datatable

These are the columns I have: this.columns = [ { field: 'acronym', header: 'Acronym', sortable: true }, { field: 'name', header: 'Name', sortable: true }, { field: 'commonUserName', header: ' ...

Increase progress by pressing a button

I've implemented the NgCircleProgressModule library to display a circle with a percentage value in the center. It seems that the progress value remains static and only updates when the buttons are clicked. Clicking on the 25% button within the circl ...

Passing data from the front-end of an Angular component (app.component.html) to the back-end of another component (other.component.ts)

Imagine a scenario involving basic crud operations. Within the app.component.html file, there are multiple input fields and buttons. Upon clicking a button in app.component.html, the value of an HTML field is sent to the 'other.component.ts' comp ...

I'm diving into the world of Typescript and trying to figure out how to use tooltips for my d3 stacked bar chart. Any guidance on implementing mouseover effects in Typescript would be greatly

I am currently facing some issues with the code below and need guidance on how to proceed. I am new to this and unsure of how to call createtooltip. Any assistance would be greatly appreciated. The error message states that createtooltip is declared but n ...