Styled-components and apollo can't live together

[ziimakc]

I get strange warning and not sure why:

Github small repo to reproduce (run npm i, npm run dev).

Update: After i moved all shared between frontend and backend functions to shared root folder - problem gone.

Warning: Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. You can only call Hooks at the top level of your React function. For more information, see fb.me/rules-of-hooks
    in MyApp (at _document.tsx:12)
    in Context.Provider
    in Context.Provider
    in StyleSheetManager
    in Unknown
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in AppContainer
The component MainLayout__Wrapper with the id of "MainLayout__Wrapper-sc-13q3s8p-0" has been created dynamically.
You may see this warning because you've called styled inside another component.
To resolve this only create new StyledComponents outside of any render method and function component.

In tsconfig.json i have paths:

"paths": {
      "@frontend": [
        "./frontend"
      ],
      "@backend": [
        "./backend"
      ]
    },

In backend graphql mutation function i load function from frontend. If i load it like @frontend i get, not if i use ../../frontend/functions/joi.

// no error - import { isValid } from "../../frontend/functions/joi";
// error - import { isValid } from "@frontend";
import { isValid } from "@frontend";

export const userCreate = async (): Promise<boolean> => {
  isValid();

  return true;
};

In frontend index.ts file i re-export isValid joi function and MainLayout react component. If i delete MainLayout component export warning goes away too.

export * from "./functions/joi";

// no error if i delete this import
export * from "./layout/MainLayout";