Bit-source: When Typescript transpiler generates references to the module's .js.map file

Recently, I attempted to utilize Bitsrc for sharing front-end components across multiple applications. Although I successfully created and exported the components to bitsrc, I encountered errors when attempting to import and use them.

To elaborate, I set up a new aurelia application using Typescript and RequireJS by initiating it with au new. Following that, I developed a basic component comprising simple HTML structure:

- src
| - components
  | - rocketship
    | - rocketship.ts
    | - rocketship.html
    | - index.ts

Upon building this component using bit build coupled with the typescript compiler (@0.0.5), the index.js.map seemed problematic:

{"version":3,"file":"module.js","sourceRoot":"","sources":["module.tsx"],"names":[],"mappings":";;AAAA,2CAAsC;AAA7B,kCAAA,SAAO,EAAA"}

The presence of a file named module.js, which wasn't defined in any location, led me to believe that it could be the root cause of my issues.

After installing the component via NPM and adding it to aurelia.json as shown below:

{
  "name": "@bit/user.workspace.components.rocketship",
  "path": "../node_modules/@bit/user.workspace.components.rocketship/dist",
  "main": "index"
}

Upon running the application using au run -w, an error surfaced:

Error: An error occurred while trying to read the map file at C:\Git\Aurelia test application\node_modules\@bit\user.workspace.components.rocketship\dist\module.js.map
Error: ENOENT: no such file or directory, open 'C:\Git\Aurelia test application\node_modules\@bit\user.workspace.components.rocketship\dist\module.js.map'
    at readFromFileMap (C:\Git\Aurelia test application\node_modules\aurelia-cli\lib\build\convert-source-map\index.js:32:11)
    at new Converter (C:\Git\Aurelia test application\node_modules\aurelia-cli\lib\build\convert-source-map\index.js:39:32)
    at Object.exports.fromMapFileComment (C:\Git\Aurelia test application\node_modules\aurelia-cli\lib\build\convert-source-map\index.js:112:10)
    at Object.exports.fromMapFileSource (C:\Git\Aurelia test application\node_modules\aurelia-cli\lib\build\convert-source-map\index.js:131:22)
    at acquireSourceMapForDependency (C:\Git\Aurelia test application\node_modules\aurelia-cli\lib\build\bundle.js:184:33)
    at work.then (C:\Git\Aurelia test application\node_modules\aurelia-cli\lib\build\bundle.js:206:25)
    at <anonymous>

This situation indicates that Aurelia CLI is looking for a non-existent file named module.js.map within the component's folder. Is there a fault in the Typescript transpiler or perhaps Aurelia struggles to handle the outcome of the transpiled component?

The transpiler currently in use is

bit.envs/compilers/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89fdf0f9ecfaeafbe0f9fdc9b9a7b9a7bc">[email protected]</a>
typescriptnpmaureliabit-src

Answer №1

At this moment, the typescript compiler is set up with a fixed configuration assuming you are utilizing this particular setup: If you want to customize the compilerOptions, you'll have to fork the components and adjust them according to your preferences.

Forking involves importing the component, making modifications, tagging it, and exporting it to a new scope.

Answer №2

One challenge arises when the Bit environment being utilized has its own unique configuration, which may not align with the settings in your project. This discrepancy occurs because Bit currently includes a fixed set of configurations that cannot be easily customized.

To address this issue, here is a recommended approach for creating a personalized version of an existing Bit environment:

  1. Begin by establishing a new directory and initializing a blank workspace within it using the command bit init
  2. Import the specific environment you wish to modify (without utilizing the --compiler/tester flag)
  3. Edit and adjust the configuration file of the component as needed
  4. Create a tag and export the updated version of the component to your designated Scope

By following these steps, you will have successfully developed a custom compiler containing a tailored selection of plugins. The subsequent task involves returning to your project and updating the bit.json file to reference the new compiler. Running bit status will confirm the modifications made to all components due to the updated compiler. Finally, create a tag and export a fresh version with the newly implemented compiler.

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

n (Node Version Manager): unable to establish directory

Currently using lubuntu 14.10 and attempting to update my node version with "n" (node version manager) Followed installation steps: sudo npm install -g n Encountering issues without using "sudo", as it requests admin privileges... Every time I try to u ...

node.jsnpmn

What is the best way to combine TypeScript output while maintaining node import integrity?

Currently, I am combining the results of the typescript compiler using this particular technique. However, this process is causing issues with the imports of relative path modules in Node. The code below compiles and merges successfully; // Group.ts clas ...

node.jstypescript

The name 'Symbol' cannot be located in the whatwg-fetch type declaration file

Within the dt~whatwg-fetch's d.ts file, there is a declaration that includes the following code snippet. declare class Headers { // other code ommited [Symbol.iterator](): IterableIterator<[string, string]>; } We attempted to create v ...

typescripttypescript2.0

Executing an npm script with single quotes to safely handle user-provided input

Within my package.json file, I have the following structure: "scripts": { "run-me": "echo" } By executing the run-me script with a parameter enclosed in single quotes like this: npm run-script run-me '$40$30$20' The command that gets execu ...

bashnpm

Adjusting various angular-cli configuration files or providing input variables

My application caters to different customers, requiring personalized configurations based on their needs. I am looking for a way to customize the settings in the angular-cli.json file each time I run ng build. Is there a method to: 1) Dynamically cha ...

angulartypescriptangular-cli

Struggling to bring in components in ReactJS

My journey with ReactJS has just begun, and I've encountered some issues with the code that I believe should work but doesn't. To start off, I set up a new ReactJS project using the npm command create-react-app. Following this, I installed Googl ...

reactjstypescriptmaterial-ui

Error: Unknown - the word "interface" is not allowed in strict mode

When defining an interface for the state in a React component file: interface IState { } Attempting to compile it with babel.transform results in the following error message: SyntaxError: unknown: interface is a reserved word in strict mode Is this beh ...

javascriptreactjstypescriptbabeljs

Update process disrupted due to a Composer error related to 'npm-signature'

While in the process of updating my libraries for a yii2 application using the composer update command, I encountered an issue where composer-php exited unexpectedly. [InvalidArgumentException] ...

npmyii2composer-php

Avoiding deadlock when calling an asynchronous function within a for loop in TypeScript and NHibernate

When writing an http post call inside a for loop with TypeScript, I encountered an issue while debugging the backend method. It seems that the requests are being handled simultaneously. For instance, if the server needs to execute 2 methods M1() and then ...

c#angularjstypescriptasp.net-web-apinhibernate

Using Node.js, use the `require()` function to bring in external modules

In my development of an application using Typescript that compiles into node code, I find myself favoring import statements over require. When attempting to utilize Lodash with Lodash-Deep, the official documentation suggests using: const _ = require("dee ...

javascriptnode.jstypescript

Encountering an npm issue when attempting to check the npm version

In order to work with Angular 8 CLI, I require node10+ version. However, when using node10.16.2, I encounter the following error message while running npm build: npm-v10.16.2 -v /auto/sw/packages/node/v10.16.2/lib/node_modules/npm/bin/npm-cli.js:84 let no ...

node.jsnpmnpm-install

Is it possible to utilize the System.import or import() function for any JavaScript file, or is it restricted to single module-specific files?

After reading an intriguing article about the concept of dynamic component loading: I am interested in learning more about the use of System.import. The author demonstrates a specific syntax for loading the JavaScript file of the module that needs to be d ...

javascriptangulartypescriptwebpackng-modules

Tips for automatically increasing the ID of a parameter in Angular using TypeScript

I am working on creating a gallery using the @ks89/angular-modal-gallery library, and the only remaining task is to assign different ids to each image in the gallery. I attempted to use a for loop, but it returned undefined. https://i.sstatic.net/7TmEN.pn ...

angulartypescript

Touched the Force of ngModel

I am looking to make the required fields show in red in the angular material when the "Submit" button is clicked. To achieve this, I need to trigger the input to be marked as touched. <div class="formRow"> ...

angulartypescriptvalidationinputrequired

React, Typescript, and Material-UI 4 compilation dilemma

Out of the blue, my entire project collapsed and I can't seem to build it. I recently reset the project using a fresh create-react app build, which seemed fine initially. However, just yesterday, I encountered a similar issue but with a different erro ...

reactjstypescriptmaterial-ui

create a fresh variable instead of appending it to the current object

I'm encountering an issue where a new array is supposed to be added on callback using props, but instead an empty variable is being added. Here's the code snippet: const [data, setData] = useState({ title: "", serviceId: "", serviceNa ...

reactjstypescriptecmascript-6next.js

Exploring the nuances of checking lists in TypeScript

In the following list: empList = ['one','two','finish','one','three'] I am required to evaluate conditions based on empList: Condition 1: If 'two' appears before 'finish', set this ...

angulartypescript

Tips for verifying that parameters possess designated characteristics in TypeScript

How can I ensure that data2 and data3 work correctly, while data1 triggers an error if the data type is not specified as shown in the code below? I need to validate that when a user enters params like {name: 'aa', age: 20}, it should throw an er ...

typescript

A guide on logging errors triggered within reducers

I'm facing a challenge in Redux where I am unable to get error messages logged to the console. My stack includes React, Redux Toolkit, and TypeScript. Here is a snippet of one of the reducers I've implemented: // Reducer const removeResourceRedu ...

reactjstypescriptreduxreact-reduxredux-toolkit

Tips for generating cautionary claims in Playwright TypeScript assessments for non-urgent issues?

Is there a way to implement warnings instead of failures for non-critical assertions in Playwright TypeScript tests? Currently, while working on Playwright tests using TypeScript, I am searching for a solution to handle assertions that would issue warning ...

typescriptautomated-testswarningsplaywrightassert