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

Question

I am using Nuxt with Typescript. I create a following component:

<template>
    <div class="field">
        <label class="label" v-if="typeof label !== 'undefined'">{{ label }}</label>
        <div class="control">
            <textarea
                v-if="inputType === 'textarea'"
                class="textarea"
                @input="$emit('input', $event.target.value)"
            ></textarea>
            <input
                v-if="inputType === 'input'"
                :type="type"
                class="input"
                @input="$emit('input', $event.target.value)"
            >
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator"

@Component({})
export default class AppInput extends Vue {
    @Prop({ type: String, required: false, default: "input" })
    inputType!: string

    @Prop({ type: String, required: false })
    label!: string

    @Prop({ type: String, required: false, default: "text" })
    type!: string
}
</script>

<style>
</style>

And then in @/plugins/components.ts, I import the component as following:

import Vue from "vue"
import AppInput from "@/components/Forms/AppInput.vue"

Vue.component("AppInput", AppInput)

When I compile the project with Nuxt, it throws me export 'default' (imported as 'mod') was not found error. Please help!

Answer 1

You will need atleast an empty export default script in your vue files to not see this error. If you don't have any export default statement, it gives this error/warning.

export default {

}

Answer 2

I solved using the following tsconfig:

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "node",
        "lib": ["esnext", "esnext.asynciterable", "dom"],
        "esModuleInterop": true,
        "experimentalDecorators": true,
        "allowJs": true,
        "sourceMap": true,
        "strict": false,
        "allowSyntheticDefaultImports": true,
        "noImplicitAny": false,
        "noEmit": true,
        "baseUrl": ".",
        "resolveJsonModule": true,
        "paths": {
            "~/*": ["./*"]
        },
        "types": ["@nuxt/vue-app", "@types/node", "@types/webpack-env"]
    }
}

Answer 3

Everything were running fine and sudden it started giving error after

npm run dev

"export 'default' (imported as 'mod') was not found in '-!../node_modules/babel-loader/lib/index.js??ref--2-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./default.vue?vue&type=script&lang=js&'

I don't know this is a good solution or not but the last change, what I did were,

first div after <template> changed to <div id="my-app">

So I again reverted the div id to <div id="app"> and that error gone,

Hope it will help someone.