Vue storybook Unexpected token (3:14)

Question

I've used the following documentation to install Storybook/Vue.

In my stories folder I have an InputField.js component:

<script>
export default {
    props: {
        value: { required: true },
        attrs: {
            default: () => ({})
        },
        handlers: {
            default: null
        },
        formName: { required: true },
        name: { required: true },
        type: {
            default: 'text'
        },
        validator: {
            type: [Function],
            default: () => true
        }
    },
    data: () => ({
        hasError: false
    }),
    computed: {
        hasLabelSlot() {
            return !!this.$slots.label
        },
        isNumber() {
            return this.type === 'number'
        },
        isString() {
            return Object.keys(this.$attrs).includes('stringify')
        }
    },
    methods: {
        onInputChange(value) {
            const output = this.isNumber && !this.isString
                ? Number(value) || 0
                : value
            if (this.attrs.maxLength) {
                this.$emit('value', output.slice(0, this.attrs.maxLength))
                this.$forceUpdate()
            } else {
                this.$emit('value', output)
            }
        },
        validate({ id, form = {} }) {
            if (id === this.formName) {
                const formInput = this.name && form[this.name]
                const isValid = formInput ? this.validator(formInput) : this.validator(this.value)
                this.hasError = !isValid
                this.$emit('error', { name: this.name, hasError: this.hasError })
            }
        }
    },
    beforeMount() {
        this.$parent.$on('validate', this.validate)
    },
    beforeDestroy() {
        this.$parent.$off('validate', this.validate)
    }
}
</script>
<style lang="scss" scoped>

.input-field {
    label {
        width: 100%;
    }
    &-wrapper {
        position: relative;

        input {
            width: 100%;
        }
    }

    &-error {
        font-size: 12px;
        color: $input-field-error-color;
        padding: 10px 0;
    }
}
</style>

Which is causing this error:

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: ENOENT: no such file or directory, open '/Users/dcaine/Documents/Work/w/stories/InputField.js'

My 1-Button.stories.js looks like:

import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import InputField from './InputField';

export const Input = () => ({
  components: { InputField },
});

Any ideas what I am doing wrong?

Shouldn't `: for` be `v-for`? https://vuejs.org/v2/guide/syntax.html#Shorthands — pishpish, Mar 13 '20 at 12:47
That helped, thank you. But now there's further problems. It's saying `Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment` even though it's a vue component — a7dc, Mar 13 '20 at 13:41
Do you mean `.vue`? I've changed it to that and now getting a different error. The reason I did `.js` is from what I read here: https://storybook.js.org/docs/guides/guide-vue/ — a7dc, Mar 13 '20 at 14:06

Vue storybook Unexpected token (3:14)

0 Answers0