Estoy usando Vue con Webpack (sin Vue CLI) y me encontré con un problema. Estoy construyendo una biblioteca de Design System, en la que me gustaría tener fragmentos asíncronos para que se vuelvan pequeños.

Cuando importo como siempre el componente en el index.ts de la lib

 //index.ts import RedBox from '@/components/RedBox.vue'; export { RedBox };

todo funciona perfectamente.

Pero cuando trato de hacer

 const RedBox = () => import('@/components/RedBox.vue'); export { RedBox };

yo obtengo

El archivo está realmente allí en el paquete.

Aquí está la configuración de mi paquete web

 /* eslint-disable @typescript-eslint/no-var-requires */ const path = require('path'); const { VueLoaderPlugin } = require('vue-loader'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = (env) => { const plugins = [ new VueLoaderPlugin(), new CleanWebpackPlugin(), new MiniCssExtractPlugin({ filename: 'assets/css/[name].css', chunkFilename: 'assets/css/[name].css', }), ]; if (env.ANALYZE_BUNDLE) { plugins.push(new BundleAnalyzerPlugin()); } return { entry: './src/index.ts', mode: 'production', devtool: 'source-map', output: { path: path.resolve(__dirname, 'dist'), filename: 'design-system.js', library: { name: 'design-system', type: 'umd', }, }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', }, { test: /\.ts?$/, loader: 'ts-loader', exclude: /node_modules/, options: { transpileOnly: true, }, }, { test: /\.(sa|sc|c)ss$/, use: [ { loader: MiniCssExtractPlugin.loader, options: {}, }, 'css-loader', 'postcss-loader', { loader: 'sass-loader', options: {}, }, ], }, { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource', }, ], }, plugins, resolve: { alias: { '@': path.resolve(__dirname, 'src'), }, extensions: [ '.vue', '.ts', '.js', '.css', '.ttf', '.otf', ], }, externals: { vue: 'Vue', }, }; };