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

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/.

Why you encountered this error

The error is a special restriction added by developers of create-react-app and there is no direct way around it. You can find more about this topic here.

Note

Generally speaking you should not have "shared types" between front and backend contained in one of the projects and have the other project require it, rather you should publish your types on NPM and add them as a dev dependency to your project.

Try making this change in the file tsconfig.json. Add slash(/) between @ and gluetypes.

From

"@gluetypes/*": ["./functions/src/*"]

To

"@/gluetypes/*": ["./functions/src/*"]

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.