I am facing an issue with my TypeScript library of Vue components that gets compiled into a single JS file using Webpack. The problem arises when the TypeScript project consuming this library also depends on Vue. Upon running the application, I noticed that two instances of Vue are being loaded - one from the library bundle (/node_modules/my-lib/dist/index.js) and the other from the project's node_modules (/node_modules/vue/dist/vue.esm.js).
Here is the webpack.config.js for the library:
const path = require('path');
module.exports = {
entry: './src/index.ts',
output: {
filename: 'index.js',
publicPath: '/dist/',
path: path.resolve(__dirname, 'dist'),
library: "fsaa-util",
libraryTarget: 'umd',
umdNamedDefine: true
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
allowTsInNodeModules: true,
appendTsSuffixTo: [/\.vue$/]
}
}
]
},
resolve: {
extensions: ['.ts', '.tsx', '.vue', '.wasm', '.mjs', '.js', '.json', 'css'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
},
modules: ["src", "node_modules"]
},
};
And here is the webpack.config.js for the consumer project:
const path = require('path');
module.exports = {
entry: './src/index.ts',
output: {
filename: 'index.js',
publicPath: '/dist/',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
allowTsInNodeModules: true,
appendTsSuffixTo: [/\.vue$/],
compiler: 'ttypescript'
}
}
]
},
resolve: {
extensions: ['.ts', '.tsx', '.vue', '.wasm', '.mjs', '.js', '.json', 'css'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
},
modules: ["src", "node_modules"]
}
};
The way Vue is imported in both the library and consumer project is as follows:
import Vue from "vue";
I have also attempted to use the following configuration in the webpack.config.js of the library:
externals: {
vue: 'vue',
},
However, this results in both vue.runtime.esm.js and vue.esm.js being loaded instead.