Vue сборник рассказов Неожиданный токен (3:14) - PullRequest
0 голосов
/ 13 марта 2020

Я использовал следующую документацию для установки Сборник рассказов / Vue.

В моей папке stories есть компонент InputField.js:

<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>

Что вызывает эту ошибку:

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'

Мой 1-Button.stories.js выглядит так:

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

import InputField from './InputField';

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

Есть идеи, что я делаю неправильно?

...