Getting error on build after adding Feliz.Plotly package

[atlemann]

Description

Trying to use Feliz.Plotly, but getting error message when building

Steps to reproduce

1. Create a SAFE template app
2. Add Feliz.Plotly to src/Client
3. Add required plotly.js and react-plotly.js libraries using yarn add
4. Add ife-loader: yarn add --dev ife-loader
5. Add ife-loader in webpack.config.js (not exactly sure where in the rules list it should be added)
6. Run dotnet fake build --target run

Expected behavior

Build to succeed

Additional context

Error in console:

[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {vendors~app~style} [built]
[./src/Client/Client.fsproj] 345 bytes {app} [built] [failed] [1 error]
[./src/Client/style.scss] 1.36 KiB {style} [built]
    + 96 hidden modules

ERROR in ./src/Client/Client.fsproj
Module build failed (from ./node_modules/fable-loader/index.js):
Error: File does not exist: /home/aru/src/FSmartDash2/.fable/Feliz.Plotly.1.1.0/Props/*.fs
    at Loader.command.then.data (/home/aru/src/FSmartDash2/node_modules/fable-loader/index.js:98:22)
    at process._tickCallback (internal/process/next_tick.js:68:7)
 @ multi ./src/Client/Client.fsproj app[0]

Files seem to be there:

[Zaid-Ajaj]

Hi @atlemann can you try updaing Fable compiler to latest version? run npm upgrade fable-compiler in the directory where you have package.json

[atlemann]

yarn upgrade fable-compiler did the trick! Thanks! I've commented out the ife-loader part and it still worked so I guess it's not needed even though the docs says it does. I must admit I have no clue what I'm doing when it comes to JavaScript and webpack etc. so sorry for my ignorance.

[Shmew]

I'm glad you mentioned that @atlemann, I set that up at the beginning of this project and never thought about it after. Looking at their documentation it turns out it's a requirement to build plotly.js itself, not consume the bundle... 😅 So I'll get the docs suggesting that removed.