How can i pack and include Vue3 single file component?

[asbator]

Ive made basic component just for test:

<template>
    <div>
        Hello Vue3
    </div>
</template>

<script>
export default {
    name: 'DoubleWrapper'
};
</script>

I than pack it with webpack, here is config my config:

const { VueLoaderPlugin } = require('vue-loader')
const path = require('path');

module.exports = {
    mode: 'development',
    entry: './app/DoubleWrapper.vue',
    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, '../../web/apps/inwentarz'),
    },
    module: {
        rules: [{ test: /\.vue$/, use: 'vue-loader' }],
    },
    plugins: [
        new VueLoaderPlugin()
    ]
};

Now i'm trying to import it in app module:

import DoubleWrapper from '/apps/inwentarz/app.js';

error: "The requested module '/apps/inwentarz/app.js' does not provide an export named 'default'"

import { DoubleWrapper } from '/apps/inwentarz/app.js';

error: "The requested module '/apps/inwentarz/app.js' does not provide an export named 'DoubleWrapper'"

I also tried simple file import, but if i try to use it i get error "Uncaught ReferenceError: DoubleWrapper is not defined" while defining app components.

Here is full question with more details if needed:
https://stackoverflow.com/questions/74863944/how-can-i-import-vue-component-into-application-created-in-php-file

[alexander-akait]

I think you want to create library, not applicatin, please read https://webpack.js.org/guides/author-libraries/