How to access an absolute path defined in a separate workspace

Encountering an issue with cypress.

Within my repository, I have 3 workspaces: backend, common, and frontend.

package/
  backend/
    jest.config.cjs
    tsconfig.json
    utils/
  common/
    jest.config.cjs
    tsconfig.json
    utils/
      helpers/
  frontend/
    cypress.config.ts
    tsconfig.json
    utils/

While working in the common workspace, I have implemented absolute paths.

  • Backend

package.json

"dependencies": {
    "@package-common": "workspace:^",
}

jest.config.cjs

module.exports = {
  ...
  moduleNameMapper: {
    '@utilsCommon/(.*)$': '@package-common/utils/$1',
  },
};
  • Common

jest.config.cjs

module.exports = {
  ...
  moduleNameMapper: {
    '@utilsCommon/(.*)$': '<rootDir>/utils/$1',
  },
};

tsconfig.json

{
  ...
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
      "@utilsCommon/*": ["utils/*"]
    }
  },
}

  • Frontend

package.json

"dependencies": {
    "@package-common": "workspace:^",
}

cypress.config.ts

on(
    'file:preprocessor',
    webpack({
      webpackOptions: {
        resolve: {
          ...
          alias: {
            '@utilsCommon': resolve(__dirname, '../common/utils'),
          },
        },

When running tests with Cypress or Jest, the functions imported via alias in the common package are not found.

./common/utils/services/http.service.ts

import {
  getUrlApiFhirStaging,
} from '@utilsCommon/helpers';

view image description here view image description here

Attempts to adjust the cypress.config.ts file have been unsuccessful.

cypress.config.ts

on(
    'file:preprocessor',
    webpack({
      webpackOptions: {
        resolve: {
          ...
          alias: {
            '@utilsCommon': resolve('@package-common/utils'),
          },
        },

Answer №1

The issue does not lie with your alias (at least the first one) as it works perfectly.

on(
    'file:preprocessor',
    webpack({
      webpackOptions: {
        resolve: {
          ...
          alias: {
            '@utilsCommon': resolve(__dirname, '../common/utils'),
          },
        },

The problem arises with your export statement (or perhaps the import).

When utilizing a named export in the helper file, everything functions as expected.

export const getUrlApiFhirStaging = () => 'surprise'

However, switching to a default export results in an error.

const getUrlApiFhirStaging = () => 'surprise'
export default getUrlApiFhirStaging

This causes the following error:

(0 , utilsCommon_helpers__WEBPACK_IMPORTED_MODULE_1_.getUrlApiFhirStaging) is not a function

On the contrary, modifying the import statement to:

import getUrlApiFhirStaging from '@utilsCommon/helpers';

resolves the error.

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

What is the best way to retrieve a specific field from the observable data stream?

When working with observables, I often find myself using them like this: ... const id = 1337; this.service.getThing(id).subscribe( suc => doSomething(suc.name), err = doSomethingElse() ); Lately, I've been utilizing the async pipe more freque ...

Difficulty encountered when converting objects into an array of a model within Angular

Below you will find the service code that I am using: export class ProductListService { constructor(private httpClient: HttpClient) { } getProducts(): Observable<IResponse> { return this.httpClient.get<IResponse>('https://local ...

A Typescript type that verifies whether a provided key, when used in an object, resolves to an array

I have a theoretical question regarding creating an input type that checks if a specific enum key, when passed as a key to an object, resolves to an array. Allow me to illustrate this with an example: enum FormKeys { x = "x", y = "y&q ...

When utilizing a combination of generics in a Typescript mapped type, the resulting property type is not computed

In an attempt to create a versatile method that can handle a Mapped Type named QueryParamObject and partially read its properties: QueryParamObject can handle any type and returns a type where all properties are either string[] or string: export type Quer ...

Encountered an unexpected * token while importing lodash

Encountering an issue with TypeScript compilation after installing lodash library. To install lodash, run the following commands: 1) npm install --save lodash 2) npm install --save lodash Code snippet: import * as lodash from 'lodash'; class M ...

Promise from Jest not resolving

While testing my express server in Jest, I encountered an issue where all tests pass but Jest doesn't close or exit after completion. It seems like my server is closing after the test runs. To troubleshoot, I ran yarn jest --detectOpenHandles and rece ...

Combine iron-page and bind them together

Recently, I've started learning about Polymer and I want to bind together paper-tabs and iron-pages so that when a tab is clicked, the content loads dynamically. After going through the documentation, this is what I have tried: <app-toolbar> ...

The absence of color gradations in the TypeScript definition of MUI5 createTheme is worth noting

Seeking to personalize my theme colors in MUI5 using TypeScript, I am utilizing the createTheme function. This function requires a palette entry in its argument object, which TypeScript specifies should be of type PaletteOptions: https://i.stack.imgur.com ...

Avoiding multiple HTTP requests on various subscribers in RXJS/Angular

I am currently utilizing the "mainData" service, which is composed of 3 key parts: currentPage is utilized by the paginator component for page navigation and can be updated dynamically. folders holds all folders within the current directory. This observa ...

Deployment of a NextJS14 app to Vercel encountered an issue: Unexpected token '<' found in JSON at position 0

Here is the issue at hand: next: 14.1.4 next-auth: 4.24.7 node version: 20 This is the structure of my authentication folder: No errors occur when running npm run dev I've been investigating this issue for three days, but I am still stuck. I belie ...

What is the best way to assign or convert an object of one type to another specific type?

So here's the scenario: I have an object of type 'any' and I want to assign it an object of type 'myResponse' as shown below. public obj: any; public set Result() { obj = myResponse; } Now, in another function ...

There is an issue with the typings for React.createElement that is causing errors

Is it possible to implement React.createElement with TypeScript successfully? import React from "react"; type Props = { label: string; }; const Three: React.FC<Props> = (props: Props) => { return <div>{props.label}</div&g ...

Establishing MQTT Connection in Ionic 3

I am facing a challenge with implementing Publish-Subscribe methods in my Ionic 3 application. After consulting the information on this page, I attempted to link MQTT with my Ionic 3 application. Can anyone guide me on how to successfully connect MQTT wi ...

Alter the attributes of an instance in a class using a function

Attempting to explain a simple method in TypeScript. This method should allow modification of data for any object type within the data attribute. In simpler terms, we can modify, add, or remove data based on the specified data type, and TypeScript facilit ...

Accessing the value of a FormControl in HTML代码

Modifying the value of a form select element programmatically presents an issue. Even after changing the value in the form, the paragraph element "p" remains hidden. However, if you manually adjust the form's value, the visibility of the "p" element ...

Avoid retrieving information from Firestore

Hey everyone, I'm struggling to figure out why I can't retrieve data from Firestore. Even after carefully reading the documentation and double-checking the path, I still can't seem to make it work. I'm working with Ionic framework. getC ...

An issue occurred: The module failed to self-register at the specified path: '/node_modules/onnxruntime-node/bin/napi-v3/linux/x64/onnxruntime_binding.node'

Hey there, I'm trying to implement transformer js in my node js application using typescript. The code is located in a file named worker.js. const TransformersApi = Function('return import("@xenova/transformers")')(); const { CLIPVisionModel ...

Using a memory cache in development with NextJS does not seem to be effective

When exporting my pages for my simple static blog site, everything runs smoothly and quickly. However, in development mode, the generation of posts is sluggish and I'm looking to implement caching to speed up the process. I have set up a file called p ...

Retrieving Data from Repeated Component in Angular 6

Need Help with Reading Values from Repeating Control in Angular 6 I am struggling to retrieve the value of a form field in the TS file. Can someone please assist me with this? This section contains repeating blocks where you can click "add" and it will g ...

How do you go about making a prop optional in Typescript based on a generic type?

In my app, I have a specific type with optional props based on a generic type: type MyCustomType<R extends Record<string, string> | undefined, A extends string[] | undefined> = { record: R, array: A } There is a function that directly uses ...