Organize multiple Webpack entry file dependencies

Question

How to organize JS reusable components with their own dependencies in 3rd part bundles (eg vendor/ subdirectories) with webpack different entry files/configs?

Description:

I have following structure with entrypoints and components

app/
  assets/
    index.js
  package.json
  webpack.config.js

vendor/
  my-utils-bundle/
    assets/
      components/
        MyMath.js
    package.json
    webpack.config.js

In my includable within different entry files/webpack configs MyMath.js components there's node_modules/ dependency to package eg mathjs with following line:

import { pi, pow, round, sqrt } from 'mathjs'

....some code below...

PS mathjs dependency package provided in this bundle ( vendor/my-utils-bundle/package.json )

Then when i run yarn dev to compile my assets in app/assets/index.js there's following error:

"./vendor/my-utils-bundle/assets/components/MyMath.js" contains a reference to the file "mathjs".
This file can not be found, please check it for typos or update it if the file got moved.

Question:

How can i use this MyMath.js components as includable class in app/assets/index.js and maybe also in other "bundles" (eg vendor/my-other-bundle )?

Looks that I could install this mathjs dependency also in app/package.json but then it seems that on application level i should think about bundles JS dependencies that sounds not as the best solution.

Answer 1

This is an open question that has been going on pretty much since the launch of Encore. Even earlier, given that according to the best practices for bundles , third party dependencies shouldn't be distributed, and left for the app to manage.

That being said, there is at least one bundle (foxy) that attempts to solve this, by hooking into the composer commands and merge dependencies when packages are installed/updated.

From its README (emphasis mine):

Foxy focuses solely on automation of the validation, addition, updating and deleting of the dependencies in the definition file of the asset package , while restoring the project state, as well as PHP dependencies if NPM or Yarn terminates with an error.

Foxy retrieves the list of all Composer dependencies to inject the asset dependencies in the file package.json

[...]

Given that Foxy does not manipulate any asset dependencies, and let alone the version constraints, this allows NPM or Yarn to solve the asset dependencies without any intermediary