Import local typescript react package as a dependency with hot reloading

I currently have the following problem, I want to use a local react package (my-react-package) as a dependency in another react app (my-react-app), both are written in typescript.

├── my-react-app
│   └── package.json
│   └── src
└── my-react-package
    └── package.json
    └── src

I am importing my-react-package via "my-react-package": "file:../my-react-package", in my-react-app/package.json .

When using the dist build output of my-react-package it works fine, but each time I make a change in I need to build it again, which is very time-consuming for development.

That is why I have tried to use the react code in my-react-package/src directly. But when changing my-react-package/package.json from "main": "dist/index.js", to "main": "src/index.ts", importing it leads to the following error in my-react-app:

./node_modules/my-react-package/src/hooks/state/session.ts 34:31
Module parse failed: Unexpected token (34:31)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { useState, Dispatch, SetStateAction } from 'react'
| 
> export function useSessionState<_, S>(key: string, initialState: S): [S, Dispatch<SetStateAction<S>>] {
|   try {
|     const storedState = sessionStorage.getItem(key)

I assume this error is related to how webpack handles typescript dependencies. As I am using create-react-app , so I want to avoid messing with the webpack.config.js file.

I also want to avoid having my-react-package as a folder in my-react-app/src as I am planning to import my-react-package from multiple other react apps in the future.

Is there a way, my-react-package can remain as it’s own package while I get hot-reloading to work when importing it locally?

Source: ReactJs