Yarn workspaces encounter an unexpected token error when exporting enums

I am currently working on a typescript project with the following structure:

root/
  packges/
    client/ <-- Built with CRA
    server/
    domain/
      src/models
      package.json
      tsconfig.json
      webpack.config.js

When trying to import a model such as

@project/domain/src/models/some-model.ts
into the client project, it seems to be accepted by the linter. However, upon running the app, an error occurs:

../domain/src/models/some-model.ts 12:7
[1] Module parse failed: Unexpected token (12:7)
[1] File was processed with these loaders:
[1]  * ../../node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
[1] You may need an additional loader to handle the result of these loaders.
[1] > export enum SomeEnum {
[1] |   VALUE1,
[1] |   VALUE2

My assumption is that the error arises because the domain 'app' itself is not executed, only referenced, causing its webpack configuration to be ignored. How can I address this issue and make it work correctly?

Here is a snippet from the webpack.config.js file:

module.exports = {
  module: {
    rules: [{ test: /\.ts$/, use: 'ts-loader', exclude: '/node_modules/' }]
  }
}

And this is the content of the tsconfig.json file:

{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    ...
  },
  "include": ["src"]

Additionally, I have a couple of other questions:

  1. I do not plan to include shared code, other than models, in the domain directory. Is it mandatory for the domain to have a src folder? Can it be minimal or does it need to be a fully functional sub-project?
  2. Do I need to use node references in the package.json file when utilizing yarn workspaces?

Answer №1

Instead of coding at 5am, I changed my search terms and successfully found the solution on Google. The issue was caused by CRA not allowing code outside the src directory. The workaround is to eject, use react-app-rewired, or opt for craco, which is what I chose. As for my other questions:

  1. I relocated the models folder to the root of the domain directory/package. I can't say if this is recommended practice, but seeing the import path without src gives me peace of mind.
  2. Nope

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 items be categorized by their color, size, and design?

[{ boxNoFrom: 1, boxs: [{…}], color: "ESPRESSO", size: "2X", style: "ZIP UP" { boxNoFrom: 13, boxs: [{…}], color: "ESPRESSO", size: "2X", style: "ZIP UP" }, { boxNoFrom: ...

Converting React useState to a JSON object data type

I imported a JSON data file using the following code: import data from "../data.json"; The contents of the file are as follows: [ { "name": "Emery", }, { "name": "Astrid", }, { " ...

What is the method for defining a function within a TypeScript namespace?

Suppose there is a namespace specified in the file global.d.ts containing a function like this: declare namespace MY_NAMESPACE { function doSomething(): void } What would be the appropriate way to define and describe this function? ...

Why is my Angular app displaying outdated data from Firebase when navigating between pages?

Currently, I am dealing with an Angular 9 application that is hosted on Firebase and utilizes Firestore for its data storage. There is a perplexing issue that I haven't been able to figure out completely despite simplifying the app extensively. I will ...

To validate any object, ensure that it contains a specific key before retrieving the corresponding value in typescript

When looking at a random object, my goal is to verify that it follows a certain structure. obj = {WHERE:{antherObject},OPTIONS{anotherObject}} Once I confirm the object has the key using hasProperty(key), how can I retrieve the value of the key? I thoug ...

Guide on creating a project for developing an npm package

Within my git root project, I am utilizing a git subproject called UIComponents. For instance, my main project is named MyApp and the subproject is UIComponents. Currently, I have cloned the UIComponents repository inside my project folder and added UIComp ...

The module 'file-name.png' and its corresponding type declarations are not found in typescript react

I'm attempting to import a png file into my TypeScript React project using the following syntax: import logo from 'assets/Logo.svg'; However, I am encountering this TS error: Cannot find module 'assets/Logo.svg' or its corresp ...

Encountered an issue in validating module multer

I encountered an error while running my react-native project on an Android device. I have attempted various solutions including removing node_modules, clearing npm cache, using yarn and npm for installation, but the issue still persists. What could be ca ...

Using TypeScript for Immutable.js Record.set Type Validation

Currently, I'm utilizing Immutable.js alongside TypeScript for the development of a Redux application. In essence, the structure of my State object is as follows: const defaultState = { booleanValue: true, numberValue: 0, } const StateRecord = ...

Unable to connect to 'highlight' as it is not a recognized attribute of 'code'

I have been experimenting with ngx-highlightjs and encountered an issue while trying to implement it in one of my module files. Due to having multiple modules, I am importing the HighlightModule only in the specific module where highlighting functionality ...

"Using TypeScript: How to effectively wait for the completion of the array.sort

Need to implement a loading screen in Angular until an array is sorted. Solution provided below: this.isSorting = true; this.array = this.array.sort((a,b) => a.totlaTime - b.totalTime); this.isSorting = false; The issue faced is when isSorting is set t ...

Angular Observable returning null results

After spending some time on this issue, I am still puzzled as to why I am consistently receiving an empty observable. Service: import { Injectable } from '@angular/core'; import { WebApiService } from './web-api-service'; import { Beha ...

Utilizing Sequelize to establish associations between tables based on non-primary key columns

Here is the code snippet: User.hasMany(UserMail, {foreignKey:'to_user_id', sourceKey:'id'}); User.hasMany(UserMail, {foreignKey:'from_user_id', sourceKey:'id'}); UserMail.belongsTo(User, {foreignKey: 'from_use ...

Ensuring complete type safety by passing an object literal as a function parameter to a TypeScript type with rigorous type validation

I have a script written in JavaScript that I am currently converting to TypeScript. The code I am working with includes the following: const shapes = []; shapes.push({ name: 'Circle', radius: 12 }); shapes.push({ name: 'Rectangle', wid ...

You can't observe the behavior of simulated functions in a class with a manually created mock

Kindly note that I have set up a comprehensive Github repository where you can download and explore the content yourself here I am currently working on mocking a non-default exported class within a module using a manual mock placed in the folder __mocks__ ...

Unclear value of button when being passed

In my Welcome.html file, I am attempting to send the value of a button to a function that simply logs that value. This function is located in a functions class that has been imported into my welcome.ts file. <ion-content padding id="page1"> <h1 ...

Problem with MongoDB - increasing number of connections

I have encountered an issue with my current approach to connecting to MongoDB. The method I am using is outlined below: import { Db, MongoClient } from "mongodb"; let cachedConnection: { client: MongoClient; db: Db } | null = null; export asyn ...

I'm puzzled by how my observable seems to be activating on its own without

Sorry if this is a silly question. I am looking at the following code snippet: ngOnInit(): void { let data$ = new Observable((observer: Observer<string>) => { observer.next('message 1'); }); data$.subscribe( ...

Encountering errors 'LeftSegment' not found and 'infer' not found within the react-router directory in the node_modules folder

Currently, I am in the process of updating my application from react-router v3 to v6. At the moment, I have successfully installed react-router-dom v6.2.1 as well as react-router v6.2. Additionally, since I am using Typescript, I have also installed @types ...

forEach was unable to determine the appropriate data types

define function a(param: number): number; define function b(param: string): string; define function c(param: boolean): boolean; type GeneralHooks<H extends (...args: any[]) => any> = [H, Parameters<H>] const obj = { a: [a, [1]] as Gene ...