Error: unable to locate module that was imported from

Every time I try to run the project using this command, an error pops up:

> npm run build
npm info using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a9b7aa87fee9f1e9f0">[email protected]</a>
npm info using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4628292223063077706877726874">[email protected]</a>
npm info found workspace root at /Users/xiaoqiangjiang/source/reddwarf/frontend/codemirror-tex

> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1d3c58ccdc4dbc4d38cd5c4d9e1918f918f90">[email protected]</a> build
> NODE_OPTIONS='--loader ts-node/esm' gulp build

(node:82873) ExperimentalWarning: --experimental-loader is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
CustomError: Cannot find module '/Users/xiaoqiangjiang/source/reddwarf/frontend/codemirror-tex/packages/lezer-tex/src/utils/lzw' imported from /Users/xiaoqiangjiang/source/reddwarf/frontend/codemirror-tex/packages/lezer-tex/gulpfile.ts
    at finalizeResolution (/Users/xiaoqiangjiang/source/reddwarf/frontend/codemirror-tex/node_modules/ts-node/dist-raw/node-internal-modules-esm-resolve.js:366:11)
    at moduleResolve (/Users/xiaoqiangjiang/source/reddwarf/frontend/codemirror-tex/node_modules/ts-node/dist-raw/node-internal-modules-esm-resolve.js:801:10)
    at Object.defaultResolve (/Users/xiaoqiangjiang/source/reddwarf/frontend/codemirror-tex/node_modules/ts-node/dist-raw/node-internal-modules-esm-resolve.js:912:11)
    at /Users/xiaoqiangjiang/source/reddwarf/frontend/codemirror-tex/node_modules/ts-node/src/esm.ts:218:35
    at entrypointFallback (/Users/xiaoqiangjiang/source/reddwarf/frontend/codemirror-tex/node_modules/ts-node/src/esm.ts:168:34)
    at /Users/xiaoqiangjiang/source/reddwarf/frontend/codemirror-tex/node_modules/ts-node/src/esm.ts:217:14
    at addShortCircuitFlag (/Users/xiaoqiangjiang/source/reddwarf/frontend/codemirror-tex/node_modules/ts-node/src/esm.ts:409:21)
    at resolve (/Users/xiaoqiangjiang/source/reddwarf/frontend/codemirror-tex/node_modules/ts-node/src/esm.ts:197:12)
    at ESMLoader.resolve (node:internal/modules/esm/loader:530:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:251:18)
npm ERR! Lifecycle script `build` failed with error:
npm ERR! Error: command failed 
npm ERR!   in workspace: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1f6d7b32737a657a6d326b7a675f2f31119f3e3e33">[email protected]</a> 
npm ERR!   at location: /Users/xiaoqiangjiang/source/reddwarf/frontend/codemirror-tex/packages/lezer-tex

The issue seems to be that the build process is not recognizing the .ts file type. What could have caused this? Below you can find the package.json:

{
  "name": "rd-lezer-tex",
  "version": "0.0.1",
  "description": "lezer-based TeX grammar",
  "keywords": [
    "lezer",
    "tex",
    "cm",
    "codemirror",
    "codemirror6",
    "cm6",
    "latex",
    "grammar",
    "language"
  ],
  "author": "mu.io <<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cbafaebd8ba6aabfa3aea6aabfa2a8e5a2a4">[email protected]</a>>",
  "homepage": "https://github.com/mu-io/codemirror-tex",
  "license": "GPL-3.0-or-later",
  "main": "./lib/index.cjs",
  "module": "./lib/index.js",
  "types": "./lib/index.d.ts",
  "type": "module",
  "exports": {
    "import": "./lib/index.js",
    "require": "./lib/index.cjs"
  },
  "files": [
    "lib"
  ],
  "directories": {
    "lib": "lib",
    "test": "tests"
  },
  "publishConfig": {
    "access": "public"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/mu-io/codemirror-tex.git"
  },
...

In addition, here is the content of the tsconfig.json:

{
  "extends": "./tsconfig.build.json",
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
    "module": "ESNext",
    "rootDir": ".",
    "allowJs": true
  },
  "ts-node": {
    "esm": true
  },
  "include": ["src", "tests", "third_party"]
}

I made sure that the import file exists and the import style matches this pattern: 

import { lzwEncode } from './src/utils/lzw';
.

typescript

Answer №1

After extensive research, I stumbled upon the solution on a github issue: https://github.com/TypeStrong/ts-node/issues/422. By adding 

"experimentalSpecifierResolution": "node"
in ts-node, the problem can be fixed. Here is an example configuration that may resolve the issue:

{
  "extends": "./tsconfig.build.json",
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
    "module": "ESNext",
    "rootDir": ".",
    "allowJs": true
  },
  "ts-node": {
    "esm": true,
    // https://github.com/TypeStrong/ts-node/issues/422
    "experimentalSpecifierResolution": "node",
  },
  "include": ["src", "tests", "third_party"]
}

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

Animating with Angular 2

As I delve into this informative resource, my goal is to incorporate some animations into my applications, but I find myself grappling with understanding how the animations are triggered. HTML Component <div class="navbar navbar-default navbar-fixed-t ...

angulartypescriptangular-animations

Can you modify a specific column in a table using mat-table in Angular material?

For my project, I am utilizing Angular Material's table to present data in a tabular format. However, due to a new requirement, I now need to enable in-line editing for the last 2 columns alongside highlighting another column when the user clicks on t ...

htmlcssangulartypescriptangular-material

Redux-toolkit payload does not recognize the specified type

While working on my project, I encountered an issue when using redux-toolkit. I have created the following reducer: setWaypointToEdit: (state, action: PayloadAction<WaypointToEditPayload>) => { let gridPolygonsData: GridPolygonsData; const { ...

reactjstypescriptreduxredux-toolkit

The function scan() from RXJS Angular 17 is encountering an issue with error code TS2769, indicating that there is no

I'm currently working through an Angular RXJS course by Deborah Kurata and I've encountered a type error that I can't seem to figure out. The error is being thrown from the action stream which uses scan(). Here's the code snippet: priva ...

angulartypescriptrxjs

Enabling Cross-Site Request Forgery (CSRF) through Angular's HttpClientModule is causing an error message to appear: TS2552 -

As a novice in front-end development, I am looking to incorporate CSRF tokens into certain requests within a frontend application. The app is built using Angular version 12.2.17, and I am following the guidelines outlined in the Angular documentation: http ...

angulartypescriptcsrfangular-http-interceptorscsrf-token

The type 'ClassA<{ id: number; name: string; }>' cannot be assigned to the type 'ClassA<Record<string, any>>'

One requirement I have is to limit the value type of ClassA to objects only. It should also allow users to pass their own object type as a generic type. This can be achieved using Record<string, any> or { [key: string]: any }. Everything seems to be ...

typescriptconditional-statementstypeerrortypescript-generics

"Enhancing user experience with MaterialUI Rating feature combined with TextField bordered outline for effortless input

I'm currently working on developing a custom Rating component that features a border with a label similar to the outlined border of a TextField. I came across some helpful insights in this and this questions, which suggest using a TextField along with ...

reactjstypescriptmaterial-ui

Tips for effectively utilizing the Angular ngIf directive for toggling the visibility of elements

<div *ngFor = "let element of myElements, let i=index" [ngClass]="{'selected':element[i] == i}"> <li> Name: {{element.element.name}}</li> <li> Description: {{element.element.description}}</li ...

htmlcssangulartypescriptangular-directive

Guide on transforming a tuple of random types into a nested type structure with the help of recursive conditional types

When I responded to the query on whether Typescript Interfaces can express co-occurrence constraints for properties, I shared the following code snippet: type None<T> = {[K in keyof T]?: never} type EitherOrBoth<T1, T2> = T1 & None<T2&g ...

typescript

What could be the reason for the TypeScript compiler not recognizing tsconfig.json?

I recently came across a file from a tutorial that has left me confused due to the inconsistency between documentation, tutorials, and examples: /scripts/tsconfig.json: { "compilerOptions": { "emitDecoratorMetadata": true, "experiment ...

jsontypescriptgulpasp.net-core

The value is currently unset in the TypeScript language

The variable `this.engenes_comparte` is showing up as undefined inside the subscribe function, but it works fine outside of it. baja(){ this._restService.getEngines(this._globalService.currentFisherMan.nid).subscribe((data : any[]) => { le ...

javascriptarraysangulartypescriptthis

Displaying Modal from a separate component

CardComponent: export class Card extends Component<Prop, State> { state = { isCancelModalOpen: false, }; marketService = new MarketService(); deleteMarket = () => { this.marketService .deleteMar( ...

javascriptreactjstypescriptreact-props

Tips for modifying the type definition of a third-party library in a Vue project built with Create-Vue

After updating the Cesium library in my Vue project, I encountered some errors. This is the code snippet: camera.setView({ destination, orientation: { heading, pitch } }) The error message reads: Type '{ heading: number; pitch: number; }' i ...

typescriptvue.jsvite

Implement dynamic routerLink binding with Angular 11

Having a value containing routerLink and queryParams, I am attempting to bind it in the HTML. anchorValue : string = `<a [routerLink]="['../category/new ']" [queryParams]="{ query: 'category' }" routerLinkActive = ...

angulartypescriptangular8angular10angular11

Is it possible for Next.js to retrieve the window size without resorting to a faulty hook call or encountering an undefined window

In my ongoing efforts to dynamically adjust the size of an image within a next.js application to make it responsive to various screen sizes, I have encountered challenges. The different methods I have attempted and observed have resulted in either an inv ...

reactjstypescriptreact-hooksnext.js

Tips for type guarding in TypeScript when using instanceof, which only works with classes

Looking for a way to type guard with TypeScript types without using instanceof: type Letter = 'A' | 'B'; const isLetter = (c: any): c is Letter => c instanceof Letter; // Error: 'Letter' only refers to a type, but is being ...

typescriptfiltertypescastingtypeguards

Issue with Angular UI Bootstrap accordion heading behavior when used in conjunction with a checkbox is causing

I have implemented a checkbox in the header of an accordion control using Bootstrap. However, I am facing an issue where the model only updates the first time the checkbox is clicked. Below is the HTML code for the accordion: <accordion ng-repeat="tim ...

angularjscheckboxtypescriptaccordionangular-ui

Exploring the versatility of Highcharts with callback functions and comprehensive

Currently, I am utilizing Highcharts with angular 9. Here is the link to the code : https://stackblitz.com/edit/angular-ivy-wdejxk For running on the application side or test side, follow these instructions: Test Side: In the angular.json file at line ...

angulartypescriptunit-testinghighchartskarma-jasmine

How to use TypeScript variables in React applications

In my current project, I am attempting to customize a Fabric JS component (Dropdown) using styled-components within a React component. The specific CSS class names are defined in a file located at office-ui-fabric-react/lib/components/Dropdown/Dropdown.sc ...

reactjstypescriptglobal-variables

Develop a variety of Jabber client echo bots

Hello Stackoverflow Community, I've been trying different approaches to resolve my issue, but I keep ending up with stack overflow errors. Programming Language: Typescript Main Objective: To create multiple instances of the Client Class that can be ...

node.jstypescriptxmppnode-xmpp