Current Behavior

We have a react project and a react library with components that are imported by the react project. If we change types on used components in the react library, the hmr does not work and the dev-server crashes trying to load the changes. This only happens, if the component is placed in a library. If placed in the application directly, it works.

Expected Behavior

If type changes are applied to a component (add, adjust, delete a type) the hmr should always reload the changes, without the need of restarting the dev-server or re-import the component.

Steps to Reproduce

I created a video with the problem in my IDE from a fresh project with one react project and one react library.

I have a Button component with a prop called text. If I use the component inside my app and change the prop from text to text2, the compiler will first complain and then compile again, if I changed the prop everywhere accordingly.

If I do the same changes to the component in the react library and import it into my app, the compiler will not catch up after I changed all the props accordingly and will still present me with the error, that the prop text2 does not exist on the type.

Environment

   Node : 16.14.0
   OS   : darwin x64
   npm  : 8.3.1
   
   nx : 13.9.5
   @nrwl/angular : Not Found
   @nrwl/cypress : 13.9.5
   @nrwl/detox : Not Found
   @nrwl/devkit : 13.9.5
   @nrwl/eslint-plugin-nx : 13.9.5
   @nrwl/express : Not Found
   @nrwl/jest : 13.9.5
   @nrwl/js : 13.9.5
   @nrwl/linter : 13.9.5
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 13.9.5
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 13.9.5
   @nrwl/web : 13.9.5
   @nrwl/workspace : 13.9.5
   typescript : 4.5.5
   rxjs : 6.6.7
   ---------------------------------------
   Community plugins: