Fable: Module not found: Error: Can't resolve '.fable/fable-core.2.0.0/Types' when all files at the same level

[OnurGumus]

Description

I have the following folder structure

Repro code

When I run fable with
yarn install
dotnet restore
dotnet fable webpack-dev-server
It fails with below error:

Can't resolve '.fable/fable-core.2.0.0/Types'

I attach the source code and sample output is below:

PS C:\Users\Onur.Gumus\Desktop\package> yarn install
yarn install v1.10.1
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
Done in 53.88s.
PS C:\Users\Onur.Gumus\Desktop\package> dotnet restore
  Restoring packages for C:\Users\Onur.Gumus\Desktop\package\SmartGate.Configuration.Client.fsproj...
  Restore completed in 233.15 ms for C:\Users\Onur.Gumus\Desktop\package\SmartGate.Configuration.Client.fsproj.
  Generating MSBuild file C:\Users\Onur.Gumus\Desktop\package\obj\SmartGate.Configuration.Client.fsproj.nuget.g.props.
  Generating MSBuild file C:\Users\Onur.Gumus\Desktop\package\obj\SmartGate.Configuration.Client.fsproj.nuget.g.targets.
  Restore completed in 718.45 ms for C:\Users\Onur.Gumus\Desktop\package\SmartGate.Configuration.Client.fsproj.
PS C:\Users\Onur.Gumus\Desktop\package> dotnet fable webpack-dev-server
Fable (2.0.0) daemon started on port 63646
CWD: C:\Users\Onur.Gumus\Desktop\package
cmd /C "C:\Users\Onur.Gumus\Desktop\package\node_modules/.bin/webpack-dev-server.cmd"
i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from ./public
CWD: C:\Users\Onur.Gumus\Desktop\package
cmd /C "dotnet" restore SmartGate.Configuration.Client.fsproj
  Restore completed in 49 ms for C:\Users\Onur.Gumus\Desktop\package\SmartGate.Configuration.Client.fsproj.
  Restore completed in 79.97 ms for C:\Users\Onur.Gumus\Desktop\package\SmartGate.Configuration.Client.fsproj.

Parsing ./package/SmartGate.Configuration.Client.fsproj...
fable: Compiled SmartGate.Configuration.Client.fsproj
fable: Compiled Library.fs
fable: Compiled .fable\Fable.Elmish.React.2.0.0\react.fs
fable: Compiled .fable\Fable.Elmish.React.2.0.0\common.fs
fable: Compiled .fable\Fable.Elmish.2.0.0\program.fs
fable: Compiled .fable\Fable.Elmish.2.0.0\prelude.fs
fable: Compiled .fable\Fable.Elmish.2.0.0\cmd.fs
× ｢wdm｣: Hash: 56ff393166c8a216e1a6
Version: webpack 4.20.2
Time: 38068ms
Built at: 2018-10-11 18:33:17
 1 asset
Entrypoint main = bundle.js
 [5] multi (webpack)-dev-server/client?http://localhost:8080 ./SmartGate.Configuration.Client.fsproj 40 bytes {0} [built]
 [6] (webpack)-dev-server/client?http://localhost:8080 7.78 KiB {0} [built]
 [7] ./node_modules/url/url.js 22.8 KiB {0} [built]
[10] ./node_modules/url/util.js 314 bytes {0} [built]
[11] ./node_modules/querystring-es3/index.js 127 bytes {0} [built]
[14] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[16] ./node_modules/loglevel/lib/loglevel.js 7.68 KiB {0} [built]
[17] (webpack)-dev-server/client/socket.js 1.05 KiB {0} [built]
[19] (webpack)-dev-server/client/overlay.js 3.58 KiB {0} [built]
[21] ./node_modules/html-entities/index.js 231 bytes {0} [built]
[24] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {0} [built]
[25] (webpack)/hot/log.js 1.11 KiB {0} [optional] [built]
[26] (webpack)/hot/emitter.js 77 bytes {0} [built]
[27] ./node_modules/events/events.js 8.13 KiB {0} [built]
[32] ./SmartGate.Configuration.Client.fsproj + 22 modules 287 KiB {0} [built]
     | ./.fable/fable-core.2.0.0/List.js 29.1 KiB [built]
     | ./SmartGate.Configuration.Client.fsproj 29 bytes [built]
     | ./.fable/Fable.Elmish.React.2.0.0/react.fs 1.88 KiB [built]
     | ./.fable/Fable.Elmish.2.0.0/program.fs 4.7 KiB [built]
     | ./.fable/Fable.Elmish.2.0.0/prelude.fs 133 bytes [built]
     | ./.fable/Fable.Elmish.React.2.0.0/common.fs 2.32 KiB [built]
     | ./.fable/fable-core.2.0.0/Types.js 7.54 KiB [built]
     | ./Library.fs 1.46 KiB [built]
     | ./.fable/fable-core.2.0.0/AsyncBuilder.js 3.98 KiB [built]
     | ./.fable/Fable.Elmish.2.0.0/cmd.fs 2.32 KiB [built]
     | ./.fable/fable-core.2.0.0/MailboxProcessor.js 2.53 KiB [built]
     | ./.fable/fable-core.2.0.0/Util.js 21.3 KiB [built]
     | ./.fable/fable-core.2.0.0/Option.js 2.87 KiB [built]
     | ./.fable/fable-core.2.0.0/Seq.js 19.5 KiB [built]
     | ./.fable/fable-core.2.0.0/Async.js 3.6 KiB [built]
     |     + 8 hidden modules
    + 18 hidden modules

ERROR in ./Library.fs
Module not found: Error: Can't resolve '.fable/fable-core.2.0.0/Types' in 'C:\Users\Onur.Gumus\Desktop\package'
 @ ./Library.fs 1:0-63 6:19-26 7:2-7 8:3-8
 @ ./SmartGate.Configuration.Client.fsproj
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./SmartGate.Configuration.Client.fsproj

ERROR in ./Library.fs
Module not found: Error: Can't resolve '.fable/fable-core.2.0.0/Util' in 'C:\Users\Onur.Gumus\Desktop\package'
 @ ./Library.fs 3:0-61 24:45-58
 @ ./SmartGate.Configuration.Client.fsproj
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./SmartGate.Configuration.Client.fsproj
i ｢wdm｣: Failed to compile.

package.zip

[alfonsogarciacaro]

Thanks for the report @OnurGumus, I will try to reproduce it :+1:

[inosik]

This is a little bit simpler:

  <ItemGroup>
    <PackageReference Include="Fable.Core" Version="2.0.0" />
    <DotNetCliToolReference Include="dotnet-fable" Version="2.0.0" />
  </ItemGroup>

module App

let pint32 = System.Int32.Parse

Same error:

ERROR in ./Library.fs
Module not found: Error: Can't resolve '.fable/fable-core.2.0.0/Int32' in 'G:\projects\experiments\fable\1599-repro'
 @ ./Library.fs 1:0-54 3:9-14
 @ ./SmartGate.Configuration.Client.fsproj
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./SmartGate.Configuration.Client.fsproj

This definitely is a problem with Webpack, because Rollup bundles this just fine.

[inosik]

Same error with this JS code:

import { parse } from '.fable/fable-core.2.0.0/Int32';

var x = parse('0');

This change fixes it:

-import { parse } from '.fable/fable-core.2.0.0/Int32';
+import { parse } from './.fable/fable-core.2.0.0/Int32';

[alfonsogarciacaro]

Ah, I got it! Thanks a lot for your investigation @inosik! Fable is not adding ./ in front because .fable already starts with a period. I will fix this :+1:

[alfonsogarciacaro]

@OnurGumus dotnet-fable 2.0.4 should have a fix for this, thanks again for reporting and @inosik for the hints!

[OnurGumus]

Viva Alfonso!

[OnurGumus]

@alfonsogarciacaro I have tested this and it works fine. I hope I am not too demanding but I have another scenario that still doesn't work. Perhaps I am doing something wrong. In this scenario I have src folder my project and webpack.config file is there, where as my node_modules and .fable and packages.json is at upper folder as in below screenshots:

Why do I want this, I think webpack.config should be together with the project (assume we have multiple clients) where as packages.json and .fable can be solution wide. And this setup fails with below error:

ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src
Module not found: Error: Can't resolve './src' in 'C:UsersOnur.GumusDesktoppackage'
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src main[1]
i ｢wdm｣: Failed to compile.

Not sure if this is a regression or an existing issue. I can open a separate issue if you want.

[alfonsogarciacaro]

@OnurGumus This is entirely possible, the only thing to remember is Fable 2 will set the current working directory to where package.json is. This is necessary to locate JS packages in node_modules (there were many issues because of this in Fable 1).

So if you want to put webpack.config.js in a different directory you need two things:

• Locate the file when starting Fable, e.g.: dotnet fable webpack-dev-server -- --config src/webpack.config.js
• The paths in wepback.config.js must be either relative to the repo root or properly resolved with path.join(__dirname, myPath)

You can check this guide by @MangelMaxime for more info. You can also check the SAFE-Bookstore sample which has a similar structure.

[OnurGumus]

Thanks your suggestion worked for me!