React is not loaded properly when Fable.React is referenced from a Class Library

[fc1943s]

Project to reproduce: https://github.com/fc1943s/fable-react-compile-error

Steps:

cd App
yarn install
yarn run webpack-dev-server

I want to keep my Custom Hooks in a separate library, but react is not loaded properly when any code from the Fable.React.HookBindings module is present in a project which is not the main one (loaded from webpack.config.js). Is this a problem in Fable.React or Fable?

Code:

Note that deleting the Hooks.useRef line automatically compiles everything with HMR. It compiles just fine when moving said line from the "Library" project to the "App" project.

Compilation errors:

[MangelMaxime]

The problem is not because you are creating a separate library but because of your project setup and how webpack works.

When webpack is searching for an npm package it will search a node_modules folder from the directory with the file requiring it. If it's not found it will look at the parent level etc.

In your case, the node_modules are hosted inside the App so it can't be found directly by webpack from Lib folder.

You have 2 solutions to solve the problem:

Move your package.json at the root of your repository.

Or explain to webpack where it can find the node_modules folder by using something like:

module.exports = {
  //...
  resolve: {
    modules: ['node_modules', path.resolve(__dirname, "node_modules")]
  }
};

Webpack documentation

[fc1943s]

Wonderful! It works. Thank you!