React hot reloading with multiple layer imports

I have a problem with hot reloading in my react app bootstrapped via create-react-app. First of all, hot reloading works for me every time except one strange case that I will describe below:

I use styled-components here, dunno if that matters that much:

src\components\shared\ProjectEntity\ProjectEntityName.tsx

import styled from "styled-components/macro";

const ProjectEntityName = styled.span`
  font-size: 4rem;
  color: snow;
`;
export default ProjectEntityName;

src\components\shared\ProjectEntity\index.js

export { default as ProjectEntityName } from "./ProjectEntityName";

src\containers\Task\Task\Task.styles.tsx

import { ProjectEntityName } from "components/shared/ProjectEntity";
import styled from "styled-components";

const TaskName = styled(ProjectEntityName)``;

export { TaskName };

src\containers\Task\Task\Task.tsx:

import * as S from "./Task.styles";

And I use it as: S.TaskName. So if now for example I commit out the font-size prop in ProjectEntityName - nothing happens on my site on 2nd monitor. Page reloads like with working hot reloading but with no change - and no change in dev tools. However, if I refresh - changes are here.

So now, if I make a change to TaskName directly and save the file, the page reloads and I can see the change.

I tested this both with import * as ... and a direct import - still doesn't work. Of course when I import ProjectEntityName directly in Task.tsx and make the changes to ProjectEntityName - the page reloads and I can see the changes.

And only a full F5 refresh helps - if I logout of my app, switch between components etc. - I still see no change when I go back to the page affected by TaskName.

Is there a way to somehow make hot reloading work in this scenario?

@Edit

By the way, if I use css in ProjectEntityName.tsx like this:

import { css } from "styled-components/macro";

const ProjectEntityName = css`
  font-size: 4rem;
  color: snow;
`;
export default ProjectEntityName;

and later:

const TaskName = styled.span`
  ${ProjectEntityName}
`;

then the hot reloading works (changes are being made).

@Edit2

If the ProjectEntityName would be in the same file as TaskName - the hot loading works as well (changes are being made). So this is an issue of importing/exporting.



Read more here: https://stackoverflow.com/questions/67930891/react-hot-reloading-with-multiple-layer-imports

Content Attribution

This content was originally published by dabljues at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: