Vue export 'default' (imported as 'mod') was not found

Question

yarn dev returns this error.

WARNING in ./Js/App.vue?vue&type=script&lang=ts& 1:166-169
"export 'default' (imported as 'mod') was not found in '-!../node_modules/ts-loader/index.js!../node_modules/vue-loader/lib
/index.js??vue-loader-options!./App.vue?vue&type=script&lang=ts&'
 @ ./Js/App.vue
 @ ./Js/dashboard.ts
 @ multi ./Js/dashboard.ts ./Sass/dashboard.scss

i'm using vue with typescript.

this is my ts-config.json

{
"compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack"],
    "paths": {
        "@/*": ["Js/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
},
"include": ["Js/**/*.ts", "Js/**/*.vue", "Js/tests/**/*.ts"],
"exclude": ["node_modules"]}

this is my main.ts

import Vue from "vue";
import App from "./App.vue";

new Vue({
    render: h => h(App)
}).$mount("#dashboard");

this my app.vue

<template>
    <div id="app">
        <h1>hello world</h1>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({
    name: "App"
})
export class App extends Vue {}
</script>

if i run without ts code in app.vue no problem. with ts code in app.vue terminal shows this error and not running my app.

Answer 1

i fixed this problem. my project runs inside laravel.

i missed this line options: { appendTsSuffixTo: [/\.vue$/] } in my webpack.mix.js

this is my mix config.

mix
  .js(__dirname + '/js/folder.ts', 'js/folder.js')
  .sass(__dirname + '/sass/folder.scss', 'css/folder.css')
  .webpackConfig({
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          options: { appendTsSuffixTo: [/\.vue$/] },
          exclude: /node_modules/,
        },
      ],
    },
    resolve: {
      extensions: ['*', '.js', '.jsx', '.vue', '.ts', '.tsx'],
    },
  });