We are in the process of migrating multiple websites, each with its own project, to Vue.js. As we transfer files over and bundle them using Webpack, we have encountered a need to consolidate similar components and core JavaScript files into a shared library for efficiency.
To address this, we extracted various `.vue` files into a separate folder alongside the websites and organized them into a basic npm module with its own `package.json`. We included this shared module in our main projects by specifying a file path in the `package.json`, like so: `"vue-shared": "file:../CommonJavascript/Vue"`. However, when attempting to build the bundle using Webpack, we encountered an error:
ERROR in ../CommonJavascript/Vue/index.js Module build failed (from ./node_modules/eslint-loader/index.js): Error: Failed to load plugin react: Cannot find module 'eslint-plugin-react'
This issue puzzled us as we do not use React anywhere in our codebase, and everything compiled successfully prior to moving the files. Our shared module currently only has a dependency on Moment.js and contains just four `.vue` files along with a basic wrapper to package them together:
import button from 'Button.vue'
import loading from 'Loading.vue'
import modal from 'Modal.vue'
import progressBar from 'ProgressBar.vue'
export default {
button,
loading,
modal,
progressBar,
}
Upon adding the babel transform runtime package to investigate if it would resolve the initial error, we encountered a new one:
ERROR in ../CommonJavascript/Vue/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): ReferenceError: Unknown plugin "transform-runtime" specified in "base" at 0, attempted to resolve relative to "C:\Projects\Tmo\Code\CommonJavascript\Vue"
This second error seems more logical since the transform is utilized in our main project but not required in the shared module. Despite this, we are unsure why the inclusion in the primary project should cause build issues with the shared module.
It appears there may be confusion in how npm resolves dependencies, causing unexpected behavior. Additionally, the mystery dependency on `eslint-plugin-react` raises further questions about our approach. Is relocating `.vue` files to a separate entity, bundling them as a module, and importing them into the primary project the correct method? If not, what would be the optimal way to handle shared dependencies in this scenario?