Module has no default export vue/ts/webpack

Question

I'm experiencing an issue while trying to compile my code written in vue js 3 composition with typescript and webpack.

[tsl] ERROR in .../index.ts(5,8) TS1192: Module 'Application.vue"' has no default export.

Here is my bootstrap file.

import {createApp} from 'vue';
import {createStore, Store} from 'vuex';
import {App} from '@vue/runtime-core';

import Application from './Application'; <= this line fails
import 'bootstrap';
import 'bootstrap/scss/bootstrap.scss';
import {Identity} from "../../interface/identity";

const store : Store<object> = createStore({
    state: {
        formData : new FormData,
        identity : <Identity>{}
    },
    mutations : {
        setFormData (state, formData: FormData) {
            state.formData = formData;
        },
        setIdentity (state, identity: Identity) {
            state.identity = identity
        }
    },
    getters : {
        getFormData : (state) : FormData => {
            return state.formData;
        },
        getIdentity : (state) : Identity => {
            return state.identity;
        }
    },
    actions : {
        setFormData(context, formData) {
            context.commit('setFormData', formData);
        },
        setIdentity(context, identity) {
            context.commit('setIdentity', identity)
        }
    }
});
const app : App = createApp(Application);

app
    .use(store)
    .mount('#app');

Which is importing Application from Application.vue file located in the same directory.

<template>
  <Navigation />
  <SearchForm :form-data="formData"/>
  <MergeRequest />
</template>

<script lang="ts">
import {defineComponent} from 'vue'

import Navigation from './Navigation.vue';
import MergeRequest from "./MergeRequest.vue";
import SearchForm from "./SearchForm.vue";

export default defineComponent({
  name: 'Application',
  components: {
    Navigation,
    MergeRequest,
    SearchForm
  },
  setup() {

    const formData : FormData = new FormData

    // code

    return {
      formData
    }
  }
})
</script>

<style scoped lang="scss">
</style>

tsconfig.json

{
  "extends": "@tsconfig/recommended/tsconfig.json",
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "jsx": "preserve",
    "moduleResolution": "Node"
  }
}

webpack.config.js

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader')
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: {
        'application/index/index' : './assets/ts/application/index/index.ts',
        'application/authentication/sign-in': './assets/ts/application/authentication/sign-in.ts',
        'application/authentication/sign-out': './assets/ts/application/authentication/sign-out.ts'
    },
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'js/dist/[name].js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.ts?$/, // typescript files
                loader: 'ts-loader',
                exclude: /node_modules/,
                options: {
                    appendTsSuffixTo: [/\.vue$/],
                },
            },
            {
                test: /\.scss?$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.(svg|woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
            },
        ]
    },
    resolve: {
        extensions: [
            '.ts', '.tsx', '.vue', '.js'
        ],
        modules: [
            'assets', 'node_modules'
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new CopyPlugin({
            patterns: [
                { from: "assets/img", to: "img" },
                { from: "assets/favicons", to: "favicons" }
            ],
        }),
    ],
    watch: process.env.NODE_ENV === 'development'
}

package.json

{
  "scripts": {
    "dev": "NODE_ENV=development webpack",
    "prod": "NODE_ENV=production webpack"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5",
    "@vue/compiler-sfc": "^3",
    "bootstrap": "^5",
    "bootstrap.native": "^4",
    "copy-webpack-plugin": "^8.1.1",
    "ts-loader": "^8",
    "typescript": "^4.3.5",
    "vue": "^3",
    "vue-loader": "^16",
    "vue-template-compiler": "^2",
    "vuex": "^4",
    "webpack": "^5",
    "webpack-cli": "^4"
  },
  "devDependencies": {
    "@tsconfig/recommended": "^1",
    "css-loader": "^5",
    "sass": "^1",
    "sass-loader": "^11",
    "vue-style-loader": "^4"
  }
}

I'm running webpack command through npm.

Any idea ? Could it be dependencies compatibility issues ?

Thanks!

Answer 1

I think you'll need to import it with the extension:
import Application from './Application.vue'
And make sure you have the shims-vue.d.ts in your project.