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?

Improve this question
3
  • did you solve the problem? I am also facing it Commented Nov 14, 2018 at 8: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? Commented Nov 15, 2018 at 6:16
  • 1
    Possible duplicate of The create-react-app imports restriction outside of src directory Commented Aug 8, 2019 at 12:17

2 Answers 2

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

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

Improve this answer

3 Comments

I'm not sure if that would allow the TypeScript in a soft-linked package to be compiled in my front-end package...
I have used Lerna in a personal project (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.
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.