Я использовал следующую документацию для установки Сборник рассказов / 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 },
});
Есть идеи, что я делаю неправильно?