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.

External imports don't hot reload

See original GitHub issue

Files that are imported using @import do not get live reloaded.

React Native’s packager does not know that the file that has changed is imported in another file, so it does not know how to reload it.

One possible fix would be to add some kind of logic that keeps track of which files are imported using @import and tell the transformer to reload the correct file.

The same issue in the Stylus transformer: https://github.com/kristerkari/react-native-stylus-transformer/issues/3

Issue Analytics

  • State:open
  • Created 5 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
eyu0415commented, Jul 19, 2019

Is anything updated? I have to restart react-native-cli How can I solved this issues.

0reactions
kristerkaricommented, Mar 27, 2020

Is there any way of letting Metro know about these imported SCSS files?

Not that I know of. Of course it might be possible that there is something in Metro, but the documentation for Metro is not that great.

I understand it only looks for changes in JS files, but there should be a generated JS file that corresponds to the SCSS one, right?

The @ımports are compiled on the fly using Sass, so what Metro sees is just one .scss file since Metro has no knowledge of Sass.

Read more comments on GitHub >

github_iconTop Results From Across the Web

External imports don't hot reload · Issue #3 - GitHub
One possible fix would be to add some kind of logic that keeps track of which files are imported using @import and tell...
Read more >
Hot Reload is not working in my React App - Stack Overflow
Then Hot reload is not working. I have go to chrome and manually refreshing the page for see changes. This is my index.js...
Read more >
Getting Started · React Hot Loader - Dan gaearon
React Hot Loader is a plugin that allows React components to be live reloaded without the loss of state. It works with Webpack...
Read more >
rollup.js
Load the module code, but don't make any new objects available. import './module.js';. This is useful for polyfills, or when the primary purpose...
Read more >
Hot reload all the things!. How to use Webpack to achieve Hot…
Thanks to Webpack 2 we don't need to re-require our server.js file, but it's important that we accept the same file that's being...
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