4

I installed node modules with 

npm install

After that I changed few lines in one of the modules. The lines in red rectangle are where the changes has been made.

enter image description here

Notice that find command line tool detects only one file with that name.

Then started my react app:

npm run start

Opening the Chrome's DevTools I expected to see those changes in the modified file, but instead the file was not affecte by any change. I mean the file looks the same way like how it initially used to be.

enter image description here

I cleared all browser's cache, deleted node_modules/.cache

rm -fr node_modules/.cache

I restarted the browser, even my PC. The name of the library which source I try to change is leaflet. I have installed another modules that 'peer-depend' on that library. There are no global npm installations of leaflet on my PC:

>:~/Coding/test/react-leaflet-marker$ npm list -g --depth=0
/home/cloud-of-sounds/.nvm/versions/node/v10.13.0/lib
├── @storybook/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

I can't get my head around that problem. Can you help me how to make my browser load these changes?

Improve this question
6
  • 1
    Does your npm run start rebuild the app too?
    – Jayce444
    Commented Dec 18, 2019 at 22:47
  • I'm not sure. How to check that? That's what I have in my package.json: "scripts": { "start": "react-scripts start" }
    – 0xC0DEGURU
    Commented Dec 18, 2019 at 22:51
  • 2
    Not sure if react-scripts rebuilds when you run start. You can change the node module file, then run react-scripts build, then run react-scripts start see if it's updated then
    – Jayce444
    Commented Dec 18, 2019 at 23:11
  • 1
    You're not changing the right file (leaflet/dist/leaflet-src.js vs leaflet/src/layer/marker/Icon.Default.js), and you are being fooled about which files are being loaded because of sourcemaps. Leaflet does not rebuild when you expect.
    – IvanSanchez
    Commented Dec 18, 2019 at 23:40
  • Thank you, @IvanSanchez! After I cloned leaflet project from github I made those changes again in leaflet/src/layer/marker/Icon.Default.js. Next I run npm install and npm run rollup and voila! Chrome debuger now display correctly the code's modification.
    – 0xC0DEGURU
    Commented Dec 20, 2019 at 22:43

1 Answer 1

Reset to default
0

Thank you, @IvanSanchez! I replaced the folder in node_modules with the latest leaflet I cloned from github. I made those changes in leaflet/src/layer/marker/Icon.Default.js again. Next I run 

npm install

and 

npm run rollup

and voila! Chrome debuger now displays correctly the code's modifications.

CONCLUSION: In a npm package src/ folder contains development's stage code rather than dist/ which contains production's stage code! It looks like that running npm run rollup builds the code in src/ and outputs it in dist/.

Improve this answer
2
  • It looks like rollup isn't a standard npm script, could you confirm which package it's from?
    – AncientSwordRage
    Commented Jul 23, 2021 at 16:56
  • 1
    This script particulary is a part of leaflet node module. Check inside leaflet package.json: file "scripts": { ... "rollup": "rollup -c build/rollup-config.js", ... }
    – 0xC0DEGURU
    Commented Aug 7, 2021 at 19:12

Not the answer you're looking for? Browse other questions tagged or ask your own question.