How to watch react-native node_modules changes - javascript

When I run react-native start or npm start the packager starts and prompts to be Looking for JS files in /Users/map/repos/myrepo/
I've got Hot reloading enabled. When I change a file located within /Users/map/repos/myrepo/node_modules/react-native/ seems to detect the change, however if I edit a file in a third party repository like /Users/map/repos/myrepo/node_modules/react-native-menu/ looks like watchman is not detecting the change.
I've just upgraded React Native in my project to 0.39 and I think this wasn't the default behavior before. I've set up some logging in react-packager/src/node-haste/index.js and seems react-native-menu files are included in hasteFSFiles, however change event is not triggered.
I've tried deleting node_modules and reinstalling it, Cleaning Watchman state and other without luck.

Ok, Looks like they redid React Native packager in version 0.39, although this bug is still present in v0.40. Until there is an official fix, if you want to detect changes of a library within node_modules you need to edit node_modules/react-native/packager/defaults.js and add your project name to providesNodeModules, like this:
exports.providesModuleNodeModules = [
'react-native',
'react-native-windows',
'react-native-menu',
];
The issue where this has been reported can be found here:
https://github.com/facebook/react-native/issues/11301

Another solution is to start react native packager with additional arguments
npm run start -- --providesModuleNodeModules react-native,{any_node_module}
Works with RN v0.42.0 for me

Related

Unable to fix Node Path in packaged Electron App

I'm building a simple Electron app for MacOS (using React as the frontend). The purpose of the app was to make executing certain terminal commands a lot easier (using child_process.spawn. Primarily I am interested in using the sfdx Salesforce CLI commands.
When I run the app in dev, everything works fine. However when I package the app, the PATH variable gets changed and I'm no longer able to locate the sfdx library. (*note it is still able to find git commands though).
I found a very similar issue here and a bug report in GitHub, both of which recommend the use of the fix-path package. This is where I run into another issue. According to the docs, I should import the package like this:
import fixPath from 'fix-path';
However when I do that inside of my electron.js file I get this error: SyntaxError: Cannot use import statement outside a module. I've seen other resources that use require to bring in the package:
const fixPath = require('fix-path');
But again, when I do that I get this error require() of ES Module not supported.
I tried adding "type": "module" to my package.json file, but that breaks my app as well.
I feel like there is something simple that I am missing here, but can't seem to figure out. I believe that if I could import and use the fix-path package, then this would solve my problems. But if that isn't possible, does anyone know of a way for me to fix the path in my app so that it works in prod?
Thank you in advance!
Some extra details:
The two dependencies I check for are git and sfdx. The following image shows where both of those live on my machine:
And this is the response to the same commands within the packages asar file:
I found a workaround, it looks like fix-path made a move to ESM during the last release. Because I am using CJS modules I just needed to install version 3 of fix-path by running npm install fix-path#3.0.0 --save

How to modify a npm package locally and build into create-react-app?

I can see that my node_modules/ag-grid-react/lib (the module I'm trying to build locally) have changed (I put console.log commands in main.js, the entry point of ag-grid-react), but the changes are not propagating to my create-react-app even after restarting npm start and running npm cache clean --force. What a I missing?
I believe the crux of the issue is closer to me not understanding how the create-react-app/npm package/typescript/webpack build system works behind the scenes (as opposed to this being an ag-grid issue), but I am including the whole context of my problem in case it's relevant.
Original problem: I'm using ag-grid-react, and I want to inject a button to add a new column, like the image below:
It didn't seem like any of the exposed component allows me to do this, so I have been exploring two options:
Bring ag-grid into my monorepo and fork/modify it
Inject a component with appendChild by finding the ref of the ag-header-row element and creating another react root.
(1) seems cleaner so I'm trying that. I cloned ag-grid via git subtree to my repo, and I am trying to load it in my create-react-app. Here is what I have done so far:
git sub-tree add ag-grid
npm link the local ag-grid/grid-packages/ag-grid-react to my monorepo node_modules
make a modification to the files in community-modules/react/src
run npm run build in grid-packages/ag-grid-react
run npm start in my create-react-app monorepo
I have figured out that grid-packages/ag-grid-react copies the src from community-modules/react before building, via Gulp, but I can't figure out how to load the new build. Anytime I make a modification to community-modules/react/src and run the above steps, no changes propagate to my create-react-app. It almost feels like something is being cached but I can't figure out where.

How to trigger hot reloading for React when a package in node_modules is changed?

I am building a React component library and additional documentation project. My goal is to display immediately all changes of the library straight into the documentation.
So far I have configured webpack to watch for changes in the components. After rebuilding, I take the output folder and move it in the node_modules of the documentation. This way I can simulate using my component library as an external package.
The documentation is a create-react-app project and by default it does not watch for changes in node_modules. I followed this answer and executed the eject script. I updated the ignoredFiles variable in webpackDevServer.config.js and everything is working really fine. I make a change in a component, webpack recompiles, updates the package in the node_modules of the docs and then a rebuild is triggered. However, I have to refresh the browser to see the changes. Hot reloading happens when I do a change in the source of the docs, but it will be great to trigger it when I update that specific package in the node_modules. Is there a way to achieve that?
Thank you for spending time on this!
You can setup a local dependency that points to your package.
"dependencies": {
"package-name": "file:../relative/path/to/your/package"
}
Then, when you created the dependency, rebuild the relative path to the module containing your package.json in watch mode and you are ready to go!

Bitsrc eject component if there is no update to export

I'm using Bitsrc.io to manage shared components.
Sometimes it happens that I import a remote component which adds the physical files to my project.
I then want to eject the module so that it is managed by npm again.
However I haven't made any changes so bit-cli responds with
nothing to export
On their docs site I cannot find another reference to using the --eject flag except with the export command.
Anyone bumped into this before?
Right now in order to achieve this you need to run the following commands:
bit remove id
npm install id-npm
(*) - look in the bitsrc ui as they way id looks like in bit registry is different from npm.
if you do make changes you can do bit export --eject which will do remove and npm install. This command is currently being developed in the dev branch and is probably going to be available in the next release. You can also force an export if you force a tag by using --all flag or --scope. I advice against it.

Angular2 no changing in browser when modify typescript file

I'm using angular2 with Visual Studio 2015.
I completely new at angular2 so I'm discovering it step by step, right now I have an app.component.ts, displaying in html file, and everything works but when I'm making changes like the content of template in the typescript file nothing's moving, I style have the older content I tried to rebuild the project, close the project and re open it, tried to disable the cache like said in a topic but nothing works, what am I missing ??
You need to compile the typescript to javascript in order to see the changes. Simply run npm tsc in your console and your script will compile.
In case you are using command line I would suggest to install #angular/cli package. If you use ng serve your app will automatically reload if you change any of the source files.

Categories

Resources