question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to properly setup symlinked library without ejecting?

See original GitHub issue

I have 2 projects both created with create-react-app, both not ejected

one project, components-library is an app that only export components the other project, awesome-app is a single page app that makes use of components-library components

the scaffolding is like so:

components-library
   |
   ---- src
   |    |
   |    ---- lib
   |         |
   |         |--- components
   |         |         |
   |         |         [...]
   |         |         ---- Component.jsx
   |         ---- index.js //this import/export all the components
   --- package.json
awesome-app
   |
   ---- src
   |     |
   |     |---- index.js //this exposes the SPA
   |     ----- App.jsx //classic setup of react SPA
   --- package.json

awesome-app is npm linked with npm link ../components-library

Is there a way to get the hotreaload to properly detects changes from awesome-app in the components-library/src/lib/**/* folder?

I tried to setup chokidar to observe the changes and launch a re-build script on the components-library but if chockidars rebuilds the components-library while awesome-app is running (with npm start) awesome-app process get stuck and becomes unkillable (running from windows ubuntu subsystem bash, only way to kill the process is a complete computer reboot)

my issue looks somewhat related to this:

https://github.com/gaearon/react-hot-loader/issues/211

but i could not figure a solution yet…

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
iansucommented, Jun 30, 2021

Importing uncompiled code from other packages in a monorepo is not currently supported by Create React App.

1reaction
adeelibrcommented, Jul 1, 2019

When you symlink, it actively watches changes & should update (reload) the code.

My guess is instead of doing

awesome-app is npm linked with npm link …/components-library

Do this

Go in component-library folder in terminal & type npm link

and then go in your awesome-app folder in terminal & type npm link NAME_OF_PACKAGE

Here NAME_OF_PACKAGE is the package.name in package.json file in your component-library repo.

Maybe this will help https://stackoverflow.com/a/20888757/4921319

Read more comments on GitHub >

github_iconTop Results From Across the Web

Symlink Tutorial in Linux – How to Create and Remove a ...
As we've seen, a symlink is just another file or folder pointing to an original file or folder. To remove that relationship, you...
Read more >
How to properly symlink files in the ~/Library/Preferences
Modify some settings in the app, then quickly do find ~ -mtime -1m 2>/dev/null to see recently changed files and find the one...
Read more >
How to Create Symbolic Links: A Comprehensive Guide
Use either the unlink or rm commands to remove a symbolic link. If the command executes correctly, it displays no output.
Read more >
How to create a symbolic link without using ln? - Server Fault
Use scp or sftp to copy a statically linked version of ln. Make sure it is executable. Then use it to fix the...
Read more >
How to get it working with npm linked module? #211 - GitHub
If RHL wants some dependencies like react , you can symlink them back, ... How to properly setup symlinked library without ejecting?
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found