make-frontend throws an ELIFECYCLE error

[SolviQorda]

• npm v6.4.2
• node.js v10.10.0
• stack v 1.6.5

Steps that produced the bug

1. Cloned the repo.
2. Installed postgres, followed commands in README
3. Installed yesod
4. stack build
5. make deps

(fwiw I've read the Haskell book, and been contributing to haskell OSS projects for about 4 months, but not much experience with node.)

Full console error:

$ make frontend-watch
cd frontend && npm start

> foundation-sites-template@1.0.0 start /home/solvi/Development/osprojects/moot/moot/frontend
> gulp

[10:50:58] Using gulpfile ~/Development/osprojects/moot/moot/frontend/gulpfile.js
[10:50:58] Starting 'default'...
[10:50:58] 'default' errored after 2.17 ms
[10:50:58] Error: watching scss/**/*.scss: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
    at Gulp.watch (/home/solvi/Development/osprojects/moot/moot/frontend/node_modules/gulp/index.js:28:11)
    at /home/solvi/Development/osprojects/moot/moot/frontend/gulpfile.js:37:8
    at taskWrapper (/home/solvi/Development/osprojects/moot/moot/frontend/node_modules/undertaker/lib/set-task.js:13:15)
    at bound (domain.js:396:14)
    at runBound (domain.js:409:12)
    at asyncRunner (/home/solvi/Development/osprojects/moot/moot/frontend/node_modules/async-done/index.js:55:18)
    at process._tickCallback (internal/process/next_tick.js:61:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! foundation-sites-template@1.0.0 start: `gulp`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the foundation-sites-template@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/solvi/.npm/_logs/2018-09-20T09_50_58_396Z-debug.log
Makefile:25: recipe for target 'frontend-watch' failed
make: *** [frontend-watch] Error 1

[bitemyapp]

It's not the cause of this problem, but upgrade your stack binary.

Node and NPM versions look fine. I think the Gulp version might be mismatched to the watch function? Did you install the deps and run the build before attempting this?

I'm not sure if I tested watch when I converted the gulpfile from gulp 3 to gulp 4.

[SolviQorda]

upgrade your stack binary

thanks for the heads up, have done this now 👍

Did you install the deps and run the build before attempting this?

I've done make deps and stack build - hope I'm understanding you right. Although stack build terminates with a similar error from the other issue:

WARNING: Ignoring out of range dependency (allow-newer enabled): time-1.9.1. unix requires: >=1.2 && <1.9
WARNING: Ignoring out of range dependency (allow-newer enabled): aeson-1.3.1.1. moot requires: >=0.6 && <1.3
WARNING: Ignoring out of range dependency (allow-newer enabled): time-1.9.1. directory requires: >=1.4 && <1.9
WARNING: Ignoring out of range dependency (allow-newer enabled): time-1.9.1. Cabal requires: >=1.4 && <1.9
WARNING: Ignoring out of range dependency (allow-newer enabled): time-1.9.1. http-api-data requires: >=1.4.2 && <1.9
WARNING: Ignoring out of range dependency (allow-newer enabled): time-1.9.1. aeson-compat requires: >=1.4.0.1 && <1.9
WARNING: Ignoring out of range dependency (allow-newer enabled): time-1.9.1. esqueleto requires: >=1.5.0.1 && <=1.8.0.2
WARNING: Ignoring out of range dependency (allow-newer enabled): aeson-1.3.1.1. postmark requires: >=0.6 && <1.3
WARNING: Ignoring out of range dependency (allow-newer enabled): aeson-1.3.1.1. network-api-support requires: >=0.5 && <1.3
WARNING: Ignoring out of range dependency (allow-newer enabled): http-types-0.12.1. network-api-support requires: >=0.6 && <0.10
WARNING: Ignoring out of range dependency (allow-newer enabled): time-1.9.1. uuid requires: >=1.1 && <1.9
moot-0.0.0: build (lib + exe)
Preprocessing library for moot-0.0.0..
Building library for moot-0.0.0..
[22 of 28] Compiling Helpers.Views    ( src/Helpers/Views.hs, .stack-work/dist/x86_64-linux/Cabal-2.2.0.1/build/Helpers/Views.o )

/home/solvi/Development/osprojects/moot/moot/src/Helpers/Views.hs:14:24: error:
    Variable not in scope: js_app_js :: Route Static
   |
14 |     addScript (StaticR js_app_js)
   |                        ^^^^^^^^^

/home/solvi/Development/osprojects/moot/moot/src/Helpers/Views.hs:15:28: error:
    Variable not in scope: css_app_css :: Route Static
   |
15 |     addStylesheet (StaticR css_app_css)
   |                            ^^^^^^^^^^^


--  While building custom Setup.hs for package moot-0.0.0 using:
      /home/solvi/.stack/setup-exe-cache/x86_64-linux/Cabal-simple_mPHDZzAJ_2.2.0.1_ghc-8.4.3 --builddir=.stack-work/dist/x86_64-linux/Cabal-2.2.0.1 build lib:moot exe:fixtures exe:migration exe:moot exe:truncate --ghc-options " -ddump-hi -ddump-to-file -fdiagnostics-color=always"
    Process exited with code: ExitFailure 1

[bitemyapp]

Did you install the deps and run the build before attempting this?

I've done make deps and stack build - hope I'm understanding you right. Although stack build terminates with a similar error from the other issue:

The deps and build you've neglected to perform are the frontend assets. Stuff in the static directories, such as js/app.js and css/app.css do not get build by the backend Haskell application. The backend Haskell application is actually being assiduous and making sure you don't compile it without having the necessary CSS and JS in place. You need to install the frontend deps and run the frontend build at least once before you attempt to build the backend. I'd also recommend sticking to using the Makefile rather than running stack build directly.

The default build target in the Makefile (what runs if you run make by itself): https://github.com/lorepub/moot/blob/master/Makefile#L6-L7

Doesn't install the frontend deps but it does build the frontend assets so you would've at least gotten an error message pointing more clearly to the necessity of having frontend stuff in place.

I really need to adjust the README, it isn't very good or clear on this: https://github.com/lorepub/moot#development

I apologize for that.

[SolviQorda]

Hey,

Thanks for taking the time to explain all this.

I started again from the top, and ran make once I had, and that solved the initial issue. Now when I run make backend-watch the app loads on localhost:3000. make frontend-watch throws the same error as in the first comment in this thread though - is that still an issue?

(I've run npm install gulp@next as well because of what you were saying about Gulp version.)

I apologize for that.

No worries - glad its helpful to raise the issue, and thanks for being patient with beginners :)