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

How can we declare and showcase a generic object with an unspecified number and names of keys in React using TypeScript?

I am facing a challenge with objects that have a 'comments' field. While all the other fields in these different objects have the same types, the 'comment' field varies. I do not know the exact number or names of the keys that will be p ...

reactjstypescriptmaterial-ui

The dynamic form functionality is experiencing issues when incorporating ng-container and ng-template

I'm currently working on a dynamic form that fetches form fields from an API. I've attempted to use ng-container & ng-template to reuse the formgroup multiple times, but it's not functioning as anticipated. Interestingly, when I revert b ...

javascriptangulartypescriptangular-reactive-forms

What are the best methods for repairing a malfunctioning Drawer?

My template can be found here: SANDBOX When transitioning to a nested route, I am experiencing a double rendering issue which causes the DRAWER to reopen. How can this be fixed? You can observe this effect in the "NESTED" tab. It is important that the fi ...

reactjstypescriptreact-routermaterial-ui

Angular2 - how can I effectively organize the logic between my components and services?

Within my current project setup, I have the following structure implemented: I have a Component that interacts with a Service Class which in turn calls an external API. The specific logic that I need to implement is related solely to the user interface. ...

angulartypescript

Using Angular to pass an index to a pipe function

Currently, I am attempting to incorporate the *ngFor index into my pipe in the following manner: <td *ngFor="let course of courses | matchesTime:time | matchesWeekday:i ; index as i">{{course.courseName}}</td> This is how my pipe is structure ...

javascriptangulartypescriptfilterpipe

The problem with MUI SwipeableDrawer not being recognized as a JSX.Element

Currently, I am implementing the SwipeableDrawer component in my project. However, an issue arises during the build process specifically related to the typings. I have made the effort to update both @types/react and @types/react-dom to version 18, but unf ...

typescriptmaterial-uitypescript-typingsreact-typescript

Error in Firebase Functions: Promises must be properly managed

Currently, I am in the process of creating a Firebase function using TypeScript to deliver push notifications to multiple users. However, whenever I execute the command firebase deploy --only functions, TSLint flags an error stating "Promises must be han ...

typescriptfirebasegoogle-cloud-functionstslint

Issues with command functionality within the VS Code integrated terminal (Bash) causing disruptions

When using Visual Studio Code's integrated terminal with bash as the shell, I have noticed that commands like ng and tsc are not recognized. Can anyone shed some light on why this might be happening? ...

typescriptvisual-studio-codeangular-cli

I'm having trouble with TypeScript locating a method specified in a parent class's type definition. What might be causing this issue?

While working with JointJS, I came across the defined typings. In my Typescript class, the structure is as follows: namespace joint { namespace shapes { namespace devs { class Model extends basic.Generic { ... } } } } ...

typescriptinheritancetypescript-typings

Unable to find the module... designated for one of my packages

Within my codebase, I am utilizing a specific NPM package called my-dependency-package, which contains the module lib/utils/list-utils. Moreover, I have another package named my-package that relies on my-dependency-package. When attempting to build the pr ...

javascriptnode.jstypescriptnpm

When deploying my Angular project, I am unable to access my files

I have been facing challenges while trying to deploy my web application with the frontend being Angular. The issue I am encountering is that I cannot access my JSON file located in the assets folder. Below is the function I am using to retrieve data from ...

jsonangulartypescriptdeploymentserve

Bringing in External Components/Functions using Webpack Module Federation

Currently, we are experimenting with the react webpack module federation for a proof of concept project. However, we have encountered an error when utilizing tsx files instead of js files as shown in the examples provided by the module federation team. We ...

reactjstypescriptwebpacktypescript-typingswebpack-module-federation

Is it possible for TypeScript to automatically determine the specific type that was used in a union type parameter?

I need some help with a utility function I'm working on that can remove a specified number of elements from either a string or an array. My goal is to have the compiler determine whether the return value should be a string or an array based on what is ...

typescript

Leveraging the outcome of an Observable in one method with another Observable in Angular2

The issue at hand I am facing difficulty in utilizing the value returned by the Observable from getUserHeaders() within my http.get request. Error encountered Type 'Observable<void>' is not assignable to type 'Observable<Particip ...

angulartypescriptionic2rxjsobservable

Updating from React 17 to React 18 in Typescript? The Children of ReactNode type no longer supports inline conditional rendering of `void`

When using the React.ReactNode type for children, inline conditional renders can cause failures. Currently, I am utilizing SWR to fetch data which is resulting in an error message like this: Type 'false | void | Element | undefined' is not assig ...

reactjstypescriptupgradevoidswr

The compatibility between cross-fetch and React Native is currently not supported

I have developed an API wrapper that utilizes fetch to carry out the API requests. To ensure compatibility with Browsers, Node, and React Native, I incorporate cross-fetch. When testing the wrapper in Node, everything works fine. However, when using it in ...

javascripttypescriptreact-nativefetch-api

Pass the type of object property as an argument in the function

I've been having trouble trying to figure this out and haven't been able to find a solution in the TS docs or examples I came across. Essentially, I'm working with a configuration specifying operations on object properties and looking to en ...

typescripttypescript-generics

Cross-origin resource sharing (CORS) seems to be creating a barrier for the communication between my Angular

During the process of developing an Angular and NestJS app with NGXS for state management, I encountered a CORS error while serving my application. The error message in the console indicated: Access to XMLHttpRequest at 'localhost:333/api/product-i ...

angulartypescriptnestjsngxs

How to Pass Values in handleChange Event in Typescript

I have noticed that most online examples of handling change events only pass in the event parameter, making the value accessible automatically. However, I encountered an error stating that the value is not found when trying to use it in my handleChange fun ...

javascriptreactjstypescriptmaterial-uiformik

Develop a flexible axios client

I have a basic axios client setup like this: import axios from "axios"; const httpClient = axios.create({ baseURL: "https://localhost:7254/test", }); httpClient.interceptors.request.use( (config) => config, (error) => Prom ...

typescriptvue.jsvuejs2axios