Using Typescript in the browser with Babel and Webpack: Step-by-Step Guide

I've been exploring the use of Typescript in my browser with a specific architecture: Typescript in browser architecture

However, I'm facing an issue with the import/export functionality when running this command:

tsc && babel build-ts -d lib && webpack --config webpack.config.js

ERROR in ./lib/index.js Module not found: Error: Can't resolve 'index' in 'C:\Users\aurel\Desktop\Platformer\lib'

ERROR in ./lib/index.js Module not found: Error: Can't resolve 'file' in 'C:\Users\aurel\Desktop\Platformer\lib'

index.html :

<script src="dist/bundle.js"></script>

index.ts

export const index = "test";
import { file } from 'file';

console.log(file)

file.ts

export const file = "test";
import { index } from 'index';

console.log(index)

webpack.config.js

const glob = require("glob");

module.exports = {
   entry: {
   js: glob.sync("./lib/**/*.js"),  
},
output: {
  filename: 'bundle.js',
  path: __dirname + '/dist',
},
};

tsconfig.json

"target": "es6",
"module": "amd",
"outDir": "./build-ts",

Any ideas on how to solve this issue? I would appreciate any help, thank you in advance!

Answer №1

It is important to use relative imports instead of absolute ones:

export const username = "john_doe";
import { profile } from './profile';

console.log(profile)
export const profile = "John Doe's Profile";
import { username } from './username';

console.log(username)

By using relative imports, the file will be searched for within the project directories, rather than in 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

React Material UI Select component is failing to recognize scrolling event

Having some difficulty understanding how to detect a scroll event with a Select component using Material-UI. The Select has MenuProps={...}, and I want to listen for the scroll event inside it. I've tried putting onScroll within MenuProps={...}, but ...

Is it possible to utilize a library from one repository and integrate it into a different repository's web application through Webpack?

I have a collection of Vue.js components in a library, and I also have a Vue web application that imports these components. Both are using Webpack and are stored in separate repositories. Prior to utilizing webpack, I was using browserify-hmr and could ea ...

Is it possible to consolidate this type definition?

I generated the following code snippet: type NumberFields<T, K extends keyof T> = T[K] extends number ? K : never; type AnsFields<T> = SomeOtherList & NumberFields<T, keyof T>; In the code above, SomeOtherList consists of predefined ...

Defining assertions with specified type criteria

Looking to do something special in TypeScript with a class called Foo. I want to create a static array named bar using const assertion, where the values are restricted to the keys of Foo. This array will serve as the type for the function func while also a ...

Alert the parent angular component of any changes in the object

I am working with a large object in my component, where the properties of the object are connected to various components and inputs within the template: constructor() { this.data = { identifier: null, isRequired: true, title: ' ...

"Unlocking the treasure trove: Extracting a single item from my Firebase real-time database using

Searching for the user's article in my Realtime database to display information. https://i.sstatic.net/yCdgf.png This is my Ionic script page Below are the imports I have: I am able to retrieve the user's ID, but I'm facing difficulty in ...

release a Node.js module on NPM

Being a complete beginner in creating npm packages using typescript2 and angular2, I find myself in need of creating an npm package and publishing it on our company's private repository. I've managed to generate files like d.ts and .js. But how ...

Is there a way to determine what is affecting the properties of an element?

I've been grappling with a chunk of lengthy HTML, styles, and javascript. My mission? To uncover whatever magic is changing the text within a specific element. <span class="panel-title"> I'm a Panel with All Options</span> Transform ...

The TypeScript error states that the argument type 'string | undefined' cannot be assigned to the parameter type 'string'

Receiving TS error that says "Object is undefined" I am attempting to retrieve the "userid" from my headers. However, I keep encountering the error message "Argument of type 'string | undefined' is not assignable to parameter of type 'str ...

Is there a way to turn off the "defer" feature in an Angular build?

After compiling my Angular project, I noticed that the compiler automatically adds the "defer" attribute to the script tag in my "index.html" file. However, I need to disable this feature. Is there a way to do it? I am currently working with Angular versi ...

Displaying updated information in Angular

I recently developed a chat application using Angular that utilizes the stomp socket from @stomp/ng2-stompjs. To display all messages, I am leveraging *ngFor. <p *ngFor="let item of messages" style="padding: 5px; font-size: 18px"> <span style ...

How can a div be displayed next to another div when it is clicked using angular2?

Is there a way to have another page show up after clicking on a div, like shown in the image below? Before Click: https://i.sstatic.net/qSBbc.png After Click: https://i.sstatic.net/julH4.png ...

What is the best method for calculating the total sum by multiplying the values in an array?

In my current project, I have an array consisting of multiple objects, each containing a property named "amount". My goal is to sum up all these amount values to get the total. Initially, I attempted to use a for loop but encountered an issue where settin ...

Setting the response type to text in Angular 6 when making an http call

Attempting to send an HTTP request to the Spring REST API, which returns a string value ('success' or 'fail'). However, I am uncertain of how to specify the response type as a string value when making the call to the API. The error mess ...

Is it feasible to mock a defined function in Typescript for a unit test scenario?

Currently, I am working on typescript code that compiles into javascript, gets bundled with rollup, and is utilized by a framework. This framework exposes a library to me in the global scope, taking the form of a function: fun({ prop1: number, ...

Improprove lazy loading in Vue.js by utilizing webpack chunks. Explore the differences between using import and require-resolve

When it comes to lazy loading with webpack chunks, I've discovered two methods - one involves using require & resolve, and the other involves using import. The require & resolve method: const Home = resolve => { require.ensure(['co ...

Can a function's return type be set to match the return type of its callback function?

Check out the following function export const tryAsyncAwait = async (fn: () => any) => { try { const data = await fn(); return [data, null]; } catch (error) { return [null, error]; } }; If I use this function as an example... const ...

Transferring information between Puppeteer and a Vue JS Component

When my app's data flow starts with a backend API request that triggers a Vue component using puppeteer, is there a way to transfer that data from Backend (express) to the vue component without requiring the Vue component to make an additional backend ...

Learn how to apply inline styles to multiple objects within a single element using React

In my project using React, I am attempting to apply styles only to a specific element within another element. Here is an example with an h1 tag: const Header = () => { const firstName = "Ashraf"; const lastName = "Fathi"; const date = new Date() ...

Observable<Any> Filter

I am currently utilizing Typescript and Angular 4 in my work. Within my project, I have two lists implemented using rxjs/Rx. ... myList: Observable<MyClass[]>; filteredList: Observable<MyClass[]>; ... My objective is to filter the myList base ...