Ionic 4 projects that are created and synced within Dropbox folder always end up broken

Hi,

I was creating a setup of an Ionic 4 project created within a Dropbox folder and I am currently using codeanywhere.com connected to Dropbox which would allow me to code anywhere I want with just a web browser for my convenience.

It worked harmoniously at first yesterday when I have just created the project but after fully syncing the project to Dropbox, unusual issues suddenly arose and it varies depending on what kind of ionic project was created.

For example
–type=ionic-angular projects within the Dropbox folder suffer from a dependency required by [project folder]/node_modules/.bin/ionic-app-scripts
Where the processing the line require('../dist/index').run(process.argv[2]); results in it not being found but what’s unusual about this is that even on a project that I have verified to be working and outside Dropbox, this “dist” isn’t even existent when I tried finding it.

While the usual ionic projects within the Dropbox folder suffer from a dependency required by [project folder]/node_modules/.bin/ng

The debug logs below are for your reference:

[--type=ionic-angular projects]
ionic serve
> ionic-app-scripts serve --address localhost --port 8100 --livereload-port 35729 --dev-logger-port 53703 --nobrowser
[app-scripts] internal/modules/cjs/loader.js:628
[app-scripts]     throw err;
[app-scripts]     ^
[app-scripts] Error: Cannot find module '../dist/index'
[app-scripts] Require stack:
[app-scripts] - /Users/User/Forge/ionic/Dropbox/superPackForStudy/node_modules/.bin/ionic-app-scripts
[app-scripts]     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:625:15)
[app-scripts]     at Function.Module._load (internal/modules/cjs/loader.js:527:27)
[app-scripts]     at Module.require (internal/modules/cjs/loader.js:683:19)
[app-scripts]     at require (internal/modules/cjs/helpers.js:16:16)
[app-scripts]     at Object.<anonymous> (/Users/User/Forge/ionic/Dropbox/superPackForStudy/node_modules/.bin/ionic-app-scripts:19:3)
[app-scripts]     at Module._compile (internal/modules/cjs/loader.js:777:30)
[app-scripts]     at Object.Module._extensions..js (internal/modules/cjs/loader.js:788:10)
[app-scripts]     at Module.load (internal/modules/cjs/loader.js:643:32)
[app-scripts]     at Function.Module._load (internal/modules/cjs/loader.js:556:12)
[app-scripts]     at Function.Module.runMain (internal/modules/cjs/loader.js:840:10) {
[app-scripts]   code: 'MODULE_NOT_FOUND',
[app-scripts]   requireStack: [
[app-scripts]     '/Users/User/Forge/ionic/Dropbox/superPackForStudy/node_modules/.bin/ionic-app-scripts'
[app-scripts]   ]
[app-scripts] }
 
[ERROR] ionic-app-scripts has unexpectedly closed (exit code 1).
       
        The Ionic CLI will exit. Please check any output above for error details.

[ionic start projectName blank project]
ionic serve
> ng run app:serve --host=localhost --port=8100
[ng] internal/modules/cjs/loader.js:628
[ng]     throw err;
[ng]     ^
[ng] Error: Cannot find module '../lib/init'
[ng] Require stack:
[ng] - /Users/User/Forge/ionic/Dropbox/MakerBlockThemed/node_modules/.bin/ng
[ng]     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:625:15)
[ng]     at Function.Module._load (internal/modules/cjs/loader.js:527:27)
[ng]     at Module.require (internal/modules/cjs/loader.js:683:19)
[ng]     at require (internal/modules/cjs/helpers.js:16:16)
[ng]     at Object.<anonymous> (/Users/User/Forge/ionic/Dropbox/MakerBlockThemed/node_modules/.bin/ng:25:1)
[ng]     at Module._compile (internal/modules/cjs/loader.js:777:30)
[ng]     at Object.Module._extensions..js (internal/modules/cjs/loader.js:788:10)
[ng]     at Module.load (internal/modules/cjs/loader.js:643:32)
[ng]     at Function.Module._load (internal/modules/cjs/loader.js:556:12)
[ng]     at Function.Module.runMain (internal/modules/cjs/loader.js:840:10) {
[ng]   code: 'MODULE_NOT_FOUND',
[ng]   requireStack: [
[ng]     '/Users/User/Forge/ionic/Dropbox/MakerBlockThemed/node_modules/.bin/ng'
[ng]   ]
[ng] }
 
[ERROR] ng has unexpectedly closed (exit code 1).
       
        The Ionic CLI will exit. Please check any output above for error details.

I’m not exactly sure what causes these problems as all my other projects outside of Dropbox are all working just fine. Could anyone help me discover the cause and figure out a workaround?

As much as I’d like to stick with a local IDE, I haven’t really found an IDE to my liking in macOS for iOS development… Except for adobe brackets but unfortunately that thing hangs like crazy when working on ionic projects probably because it’s having difficulty processing so many items within it but yeah it’s really insufferable to develop with it thanks to the hanging. I am however, open to suggestions outside of VScode and paid IDEs as there is no budget for those.

I am not sure whether the IDE you mention is any better, but as you said, you don’t want anyone to recommend VScode :slight_smile:

I once tried as an experiment to develop an ionic app on Google Drive, so I could use two different PCs (at different times), but that did not work. Somehow node (which runs the ionic-app scripts, not your IDE) had issues with such a network drive (or the issue was with the CLI scripts), not finding specific files.

So not sure if this problem will be resolved for you and I think it was recommended against doing so??

I see so it really isn’t compatible with file sync solutions D:
Guess I’ll have to stick with using git for my use-case OTL

About you saying it was recommended against doing so, could you tell me where you read that?

In any case, thank you very much for telling me all that!

Hi cant recall where. I believe as a response on this forum

Perhaps @Tommertom is referring to the general suggestion of not putting node_modules under version control (which I think would be an equivalent concern). One argument against doing that is that some node packages (looking at you, node-sass) install different binaries on different OSes.

2 Likes

yes, great addition. Plain horror!

And because I couldn’t deselect node_modules and other generated folders from Google Drive, I had to stop this…

Hey there thank you very much for providing this insight! I apparently found out too that what’s causing problems in my Adobe brackets is this very same node_modules through this page:

Now I can finally enjoy Adobe Brackets as my code editor :confetti_ball:

Also, looking back at logs, one can clearly see that the node_modules is the one that gets broken after syncing and thankfully Dropbox now has a feature to select which folders get synced so I can exclude that cursed folder to solve the problem.

Many thanks @rapropos for guiding me to hit two birds with one stone! :smiley: