Template generator bug: wrong name for fsproj file

[kristianmandrup]

Description

Please provide a succinct description of your issue.

Used the following commands to create fresh fable-elmish-react project on 25/1-2019 on a MacOSX

$ dotnet new -i Fable.Template
$ dotnet new fable-elmish-react -n myproject

elmish_react_app.fsproj file generated for project named elmish-react-app.
Should have been named elmish-react-app.fsproj (I think)

Expected and actual results

✘-1 ~/repos/fable-projects/elmish-react-app 
13:20 $ cd src/
✔ ~/repos/fable-projects/elmish-react-app/src 
13:20 $ dotnet fable npm-start
Fable (1.3.3) daemon started on port 61225
CWD: /Users/kristianmandrup/repos/fable-projects/elmish-react-app
npm run start

> [email protected] start /Users/kristianmandrup/repos/fable-projects/elmish-react-app
> webpack-dev-server

Bundling for development...
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from /Users/kristianmandrup/repos/fable-projects/elmish-react-app/public
Hash: ba6c4871c562bd864e44
Version: webpack 3.8.1
Time: 507ms
        Asset    Size  Chunks                    Chunk Names
    bundle.js  355 kB       0  [emitted]  [big]  main
bundle.js.map  417 kB       0  [emitted]         main
   [0] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/elmish_react_app.fsproj 52 bytes {0} [built]
[./node_modules/ansi-html/index.js] ./node_modules/ansi-html/index.js 4.26 kB {0} [built]
[./node_modules/ansi-regex/index.js] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
[./node_modules/events/events.js] ./node_modules/events/events.js 8.33 kB {0} [built]
[./node_modules/loglevel/lib/loglevel.js] ./node_modules/loglevel/lib/loglevel.js 7.74 kB {0} [built]
[./node_modules/strip-ansi/index.js] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[./node_modules/url/url.js] ./node_modules/url/url.js 23.3 kB {0} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 7.95 kB {0} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built]
[./node_modules/webpack/hot ^\.\/log$] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.56 kB {0} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {0} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 kB {0} [built]
[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1 kB {0} [built]
    + 12 hidden modules

ERROR in multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/elmish_react_app.fsproj
Module not found: Error: Can't resolve '/Users/kristianmandrup/repos/fable-projects/elmish-react-app/src/elmish_react_app.fsproj' in '/Users/kristianmandrup/repos/fable-projects/elmish-react-app'
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/elmish_react_app.fsproj
webpack: Failed to compile.

In my VS Code editor, it warns:

ENOENT: no such file or directory, open '/Users/kristianmandrup/repos/fable-projects/elmish-react-app/src/elmish_react_app.fsproj'

Turns out the file generate is called elmish-react-app.fsproj since I named the project elmish-react-app I also have a elmish-react-app.sln in the root. Looks like a bug in the template generator.

For a quick fix, is there some place I can reconfigure the project to point to the current .fsproj file or should I rename the file to match the expectation of current config?

Related information elmish-react-app

Not sure where I can the version info for all this, but I assume I'm using all the latests as I'm starting from a fresh setup/install of my environment.

• elmish version: 1.0.0 looks like
• fable-compiler version: not sure
• fable-core version: not sure
• Operating system: MacOSX

[kristianmandrup]

I renamed the file and now I'm a bit further.

ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./sass/main.sass
Module build failed: Error: Cannot find module 'node-sass'

Trying to fix the node-sass error. Did a fresh npm install

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Is this perhaps the solution? sudo npm install --save-dev --unsafe-perm node-sass
Why I never liked SASS (since RubyRails days), seems to be tightly coupled to the OS.
I'd much prefer stylus, pure Node.js styling lib (similar to but better than SASS IMO) and looks much nicer on the eye as well (no noise)

[kristianmandrup]

Finally had to do an audit fix:

found 182 vulnerabilities (176 low, 1 moderate, 4 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details
⋊> ~/r/f/elmish-react-app npm audit fix 
...
fixed 166 of 182 vulnerabilities in 4667 scanned packages
  2 package updates for 16 vulns involved breaking changes
  (use `npm audit fix --force` to install breaking changes;

[kristianmandrup]

Now when running the build: it works!

$ dotnet fable npm-start
Fable (1.3.3) daemon started on port 61225
CWD: /Users/kristianmandrup/repos/fable-projects/elmish-react-app
npm run start

> [email protected] start /Users/kristianmandrup/repos/fable-projects/elmish-react-app
> webpack-dev-server

Bundling for development...
Project is running at http://localhost:8080/
webpack: Compiled successfully.` 

:)

[MangelMaxime]

The naming problem was at the time a bug in the dotnet template engine.

We tracked it on the https://github.com/elmish/templates repo in this issue: elmish/templates#7

According to the referenced issues it should be fixed but perhaps it's not.

There isn't much we can do about support templates name with . and -. We had a mention about this in the elmish template readme.

[kristianmandrup]

Fair enough. I'm just learning the ropes with this whole .NET, f#, fable, templates etc.
Do you have a reference to this mention in elmish template? Perhaps in a troubleshoot section?
I think the issues I've just been through would be pretty common.

[MangelMaxime]

@kerams I have included link in my previous answer.

• Issue: Discrepancy in naming (project name conflict when containing . and -) templates#7
• Mention in the README: https://github.com/elmish/templates#how-to-use-

And as the README serve as documentation in this particular case, this is why we adding ⚠️ sign in it.