When working with NPM workspaces, Typescript encounters compilation errors, but in the remainder of the monorepository, Typescript compiles without any

Our project has been restructured into a mono repository using NPM Workspaces, with the following structure:

 |-- apps          
   |-- native         <-- Does not belong to Workspace
   |-- web            <-- Does not belong to Workspace
 |-- common        
   |-- models         <-- Workspace
   |-- connectors     <-- Workspace
   |-- store          <-- Workspace
   |-- types          <-- Workspace
   |-- utils          <-- Workspace
 -- package-lock.json
 -- package.json

The native and web apps utilize code from the common folder, without sharing code between them.

root package.json
-----------------
{
  "name": "@secret/client",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "workspaces": [
    "./common/*"
  ]
}

Encountered Issue

During the compilation of TypeScript files, only the TypeScript files in the common folder are failing to compile, throwing Parsing error: Unexpected token errors. However, TypeScript files in native and web are compiling without errors. https://i.sstatic.net/tbp5r.png

Webpack module.rules

 ... Displaying webpack module rules content ...

ESLintWebpackPlugin

 ... Displaying ESLintWebpackPlugin content ...

ForkTsCheckerWebpackPlugin

 ... Displaying ForkTsCheckerWebpackPlugin content ...

Example: common/connectors/package.json

 ... Displaying package.json content for connectors ...

Looking for Solutions

typescriptnpmwebpackeslintmonorepo

Answer №1

Problem resolved successfully

An issue was identified in the ForkTsCheckerWebpackPlugin utilized by create-react-app (CRA). By updating it to the most recent version (6.2.10) and implementing this CRA override, the problem can be addressed:

// Update to newer version of ForkTSCheckerWebpackPlugin for type checking
// files within the monorepo.
const forkTsCheckerWebpackPlugin = config.plugins.findIndex(
  (p) => p.reportFiles
);
if (forkTsCheckerWebpackPlugin !== -1) {
  config.plugins.splice(
    forkTsCheckerWebpackPlugin,
    1,
    new ForkTSCheckerWebpackPlugin({
      issue: {
        // The exclusion rules are taken from CRA.
        exclude: [
          {
            file: "**/src/**/__tests__/**",
          },
          {
            file: "**/src/**/?(*.)(spec|test).*",
          },
          {
            file: "**/src/setupProxy.*",
          },
          {
            file: "**/src/setupTests.*",
          },
        ],
      },
    })
  );
}

Thanks to @NiGhTTraX for the solution https://github.com/NiGhTTraX/ts-monorepo/issues/74

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

Angular 2 Routing 3.0: Paying Attention to Letter Case

let routesList: Routes = [ { path: 'x', component: xComponent }, { path: 'y', component: yComponent }, { path: 'zComponent', component: zComponent } ]; When entering "x" in the URL, it navigates to the component page. Ho ...

angulartypescript

What are the steps to resolve the npm error code 254 within Azure DevOps?

Attempting to integrate my cypress tests into Azure DevOps using nodejs and a .yml file has resulted in the following Error: Npm failed with return code: 254 What does this error indicate and how can it be resolved? The full Log is provided below: Star ...

npmazure-devopsyamlnpm-installcypress

The quantity of documents queried does not align with the number of data counts retrieved from Firestore

Facing an issue with calculating the Firestore read count as it keeps increasing rapidly even with only around 15 user documents. The count surges by 100 with each page reload and sometimes increases on its own without any action from me. Could this be due ...

angulartypescriptfirebasegoogle-cloud-firestore

Webpack fails to load or resolve dependencies for npm packages imported via git

Recently, I started using gulp-starter and encountered an issue while including a private npm package called "Pigeon" from a GIT repository. Despite successfully installing the package with all its dependencies in the node_modules directory, I faced diffic ...

node.jsnpmgulpwebpack

xcode is unable to locate the 'boost/config/user.hpp' file

Recently, I encountered an issue after upgrading my React-native version to 0.46 and React to 16.0.0 alpha12 in Xcode 9. When I re-run my project, Xcode displayed an error stating that the ''boost/config/user.hpp' file not found'. In an ...

iosxcodeboostreact-nativenpm

Divide a string using multiple delimiters just one time

Having trouble splitting a string with various delimiters just once? It can be tricky! For instance: test/date-2020-02-10Xinfo My goal is to create an array like this: [test,Date,2020-02-10,info] I've experimented with different approaches, such ...

regextypescript

Understanding the correct way to map two arrays with boolean values is essential for effective data

My situation involves two lists: accounts and accountsWithSelectedField. I initially mapped accountsWithSelectedField like this: this.accountsWithSelectedField = this.accounts.map(s => ({...s, selected: false})); Subsequently, upon receiving a list of ...

angulartypescriptmapping

Encountering issues during the installation of packages using npm

Each time I attempt to install a package using npm, an error is thrown displaying the following message. View image here ...

npmnpm-install

Guide on effectively converting a table of tuples to an array of objects utility function (similar to zip) while preventing the merging of all values in typescript version 5.2.2

Almost there, but stuck on the final TS2322: Type TcolTuple[i] is not assignable to type string | number | symbol compiler error. Here's a nifty utility function called rowsToObjects() that many developers have probably come up with at some point, ...

typescripttypescript-genericstypingkeyof

"Maximizing efficiency: Utilizing Lerna in a mono repository to dockerize multiple Node

I've run into some issues with my mono-repository and Docker project setup. My plan is to utilize Lerna for managing the mono-repository, and Docker for handling project builds. Previously everything was running smoothly, but after incorporating Ler ...

node.jsreactjsdockernpmlerna

Error: Vue page disappears mysteriously post-build

Recently, I encountered an issue with a routing problem in my web application. Initially, the route was set as: http://localhost:8080/user/reset Everything worked fine during development. However, after building the project and placing it in the loca ...

npmvue.jsvuejs2vue-router

making changes to the JS node dependency package results in a syntax error during compilation process, particularly within the npm/Vue.js environment

After creating a Js library and encountering stability issues and a few bugs that need fixing, the dilemma of developing a library arises when HMR does not work with dependencies. Here's a possible solution: To start, create a new Vue project using ...

javascriptnpmwebpackdependencies

Turning a Static Website Dynamic with Faceapp.js

After installing node_modules and adding faceapp.js as a dependency, I attempted to use it but unfortunately encountered some issues. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

javascriptjqueryimagenpm

What is the best way to implement an asynchronous function using a for loop and APIs in Typescript?

Struggling with ensuring my function returns data only after completing all API calls and the for loop. getListingsImages(sessionID, mlsSearchCriteria){ this.http.get(this.laconiaBaseURL + "mls/search/" + sessionID + "?" +querySt ...

angulartypescriptasynchronous

Having trouble with deploying Node.js to Heroku? Feel like your 'git push her

After successfully running my app locally, I encountered an issue when trying to deploy it to Heroku. The deployment process just hangs indefinitely and only displays one public file on the website with an error message stating: "https://analogy-alley.hero ...

javascriptnode.jsherokuwebpackbundle

Encountered an issue while trying to install npm grunt-libsass

Attempting to set up grunt-libsass by running this command: npm install grunt-libsass --save-dev Resulting in the following error message: npm WARN engine <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7710050219035a1b1e1504 ...

gruntjsnpmlibsass

Creating a Typescript interface for a anonymous function being passed into a React component

I have been exploring the use of Typescript in conjunction with React functional components, particularly when utilizing a Bootstrap modal component. I encountered some confusion regarding how to properly define the Typescript interface for the component w ...

javascriptreactjstypescriptinterfacereact-functional-component

Can you uncover the secrets of static generator functions through espionage?

My current project involves an utility function that exposes a generator: export class Utility { // This utility function provides a generator that streams 2^n binary combinations for n variables public static *binaryCombinationGenerator(numVars: ...

javascripttypescriptjasminesequence-generators

There was an issue during the code deployment process with the command "npm run build" resulting in an error with exit status 2

My Code Build is encountering an error that reads as follows: The phase context status code shows COMMAND_EXECUTION_ERROR Message: Error while executing command: npm run build. The reason for this error is exit status 2. If anyone knows how to resolve th ...

npmbuild

typescript: textual depiction of a generic type T

I have a requirement to develop a method that is capable of handling generic data types, and I need to incorporate the type information into the method Our API requires passing the entity name as a parameter: http://server/api/fetch/Entity/123 It's ...

typescripttypescript-generics