4

I have a folder which contains two projects, /frontend and /backend, where /frontend is a project using create-react-app-typescript.

Now, I want to share some code between both projects (most notably: type definitions for the API responses). These are currently located in /lib.

However, when I try to import code from within /lib inside a React component, create-react-app tells me that

Module not found: You attempted to import ../../../lib/endpoints/example 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/.

I'd prefer not to move shared code inside /frontend/src. However, having it located in node_modules appears to result in the TypeScript code that's in there not being compiled. Since I'm trying to preserve hot reloading in development, compiling it before starting it wouldn't solve that.

Is there a way to configure create-react-app to also compile a specific directory, such as /frontend/node_modules/lib?

Vincent
  • 4,876
  • 3
  • 44
  • 55
  • did you solve the problem? I am also facing it – Shaddix Nov 14 '18 at 08:51
  • @Shaddix I'm currently still dealing with it as described in the question: I moved it into `/frontend/src`, and in the back-end, I have a file that re-exports it: `export * from '../frontend/src/shared';`. Not pretty, but it works. In another project, importing from `../../lib` seems to work now. I can't find anything that I did to solve that - perhaps it's due to using Create React App? – Vincent Nov 15 '18 at 06:16
  • 1
    Possible duplicate of [The create-react-app imports restriction outside of src directory](https://stackoverflow.com/questions/44114436/the-create-react-app-imports-restriction-outside-of-src-directory) – Lukas Bach Aug 08 '19 at 12:17

2 Answers2

2

I structured my project like this

enter image description here

Then executed following commands to link lib folder in frontend and backend sub-folders

cd frontend
npm link ../lib
cd ../backend
npm link ../lib

Now any source code I add inside lib, are immediately available in backend and frontend

Arnab
  • 154
  • 2
  • 6
  • 2
    that's nice, and it's the same as @Vincent described. The issue is if `lib` is in Typescript and we need transpilation for it to work from node_modules/lib folder – Shaddix Nov 14 '18 at 08:49
  • This was an absolutely critical and simple find for me. After 4 hours of toiling away at a simple structure and how to organize the code, this did it. Thanks! – Mike Feb 13 '19 at 03:52
0

What you are trying to achieve is creating a monorepo. There are tools made specifically for that, notably Lerna. Lerna can be used to create multiple NPM-packages within one repository, and softlink them within each other so that e.g. one frontend-package can access a common-package in a different directory (but within the same repository) by creating a softlink from the node_modules directory of the frontend-package.

Lukas Bach
  • 3,559
  • 2
  • 27
  • 31
  • I'm not sure if that would allow the TypeScript in a soft-linked package to be compiled in my front-end package... – Vincent Aug 09 '19 at 14:20
  • I have used Lerna in a personal project (https://github.com/lukasbach/devsession) where I did soft-link a common package (/packages/common/) with a cra-frontend-package (/packages/frontend/) with typescript, and it did work with Lerna. – Lukas Bach Aug 11 '19 at 13:12
  • Interesting, thanks. It's working satisfactorily for me now in my current setup, but will be sure to check that out next time I'm running into this. – Vincent Aug 12 '19 at 15:26