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

[sanjade]

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!

_{This question is available on Nuxt community (#c9028)}

[cmty[bot]]

This issue as been imported as question since it does not respect nuxt.js issue template. Only bug reports and feature requests stays open to reduce maintainers workload.
If your issue is not a question, please mention the repo admin or moderator to change its type and it will be re-opened automatically.
Your question is available at https://cmty.app/nuxt/nuxt.js/issues/c9028.

[lights0123]

This was resolved by adding

"target": "esnext",
"module": "esnext",

to the tsconfig.json.

[eakarpov]

@lights0123 Why is it necessary to use esnext?

[lights0123]

@eakarpov I believe that Nuxt expects an ES next object (i.e. export default), and typescript, by default, generates code with module.exports. You need to configure typescript to generate code using export default so Nuxt generates it correctly.

[eakarpov]

@lights0123 I suspect using esnext leads to inheritance errors...

[simllll]

Can anyone shed light on this issue? I was running into this too, but with my own vue library. What exactly is causing it?

For me the problematic lines are looking like this:
export { default as SomeFancyName } from './SomeFancyName.vue';

[CaelanStewart]

Yeah, I'm struggling to get this working.

So many variables, so little explanation - wherever you look.

[stwilz]

@simllll I'm in the same boat. I assume it's the way that webpack orders its imports and exports which means that the export file hasn't compiled when the file importing it first runs.

[simllll]

@stwilz my issue was actually due to typescript and webpack both transpiling the code to es5.
So typescript already produced es5 output, and webpack got the typescript compiled files as Input (which where already es5) and transpiled them again. One way to solve this is by not transpiling to a specific js version in typescript (e.g. target esnext) and transpile to es5 code only with webpack. Another way is just let typescript transpile to es5 and disable this feature in webpack.

Regards
Simon