How to organize JS reusable components with their own dependencies in 3rd part bundles (e.g. 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 e.g. mathjs with following line:
import { pi, pow, round, sqrt } from 'mathjs'
....some code below...
P.S. 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” (e.g. 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.