Create React App error - Module not found: Error: Can't resolve

Question

I have a React front-end app created via create-react-app. All the source files are included within ./src folder. Additionally in the ./functions folder I have a backend Firebase cloud functions project with sources in ./functions/src.

There is one file in ./functions/src/types.ts that defines shared types between the front and the back end.

Everything worked fine when the only content of the file consisted of type definitions. Recently I've started adding const values and in my front-end code I've received an error Module not found: Error: Can't resolve '@gluetypes/types' - the import statement: import { val } from "@gluetypes/types"

My ./tsconfig.json is as follows:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@gluetypes/*": ["./functions/src/*"],
    }
  },
  "include": [
    "src",
    "functions/src",
  ],  
}

Additionally I have tried to import it without using an @gluetypes alias via import { val } from "../../functions/src/types" and have received more descriptive answer:

Module not found: Error: You attempted to import ../../functions/src/types which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

Answer 1

Setting it the other way around, where the "bridging" types are within the front-end web app src/ folder and importing them in /functions server side code did the trick. Upon investigating the issue more closely, it became obvious to me that it's possible to have a solution where those "bridging" types would be inside src/ web app code, but it would entail much more work of changing react-app webpack configuration.