故事书:对象不是Twig组件上的函数

Question

我正在尝试使用故事书将组件导入到组件故事中。

这个组件是用树枝写的。故事书模板使用js。我正在调整组件以使用控件，而不是故事书中不再使用的旋钮。

我得到一个错误"；对象不是函数"-而没有多少其他帮助。有人知道我做错了什么吗？我知道Twig渲染与其他组件一起正常工作。

我的故事

// Your Twig component
import { createInput } from '../components/input.twig';
import Faker from 'faker'
// Generate data with Faker
const fullName = Faker.name.findName()
const fullNameEg = Faker.name.findName()
export default {
title: 'Elements/Input',
argTypes: {
label: { control: 'text' },
value: { control: 'text' },
placeholder: { control: 'text' },
error: { control: 'text' },
isDisabled: { control: 'boolean' },
isRequired: { control: 'boolean' },
},
};
const Template = ({ label, ...args }) => {
// You can either use a function to create DOM elements or use a plain html string!
// return `<div>${label}</div>`;
return createInput({ label, ...args });
};
export const Filled = Template.bind({});
Filled.args = {
label: 'First name',
value: fullName,
error: '',
placeholder: `Eg: ${fullNameEg}`,
isDisabled: false,
isRequired: false,
};
export const Empty = Template.bind({});
Empty.args = {
label: 'First name',
value: '',
error: '',
placeholder: `Eg: ${fullNameEg}`,
isDisabled: false,
isRequired: false,
};
export const Disabled = Template.bind({});
Disabled.args = {
label: 'First name',
value: fullName,
error: '',
placeholder: `Eg: ${fullNameEg}`,
isDisabled: true,
isRequired: false,
};
export const Required = Template.bind({});
Required.args = {
label: 'First name',
value: fullName,
error: '',
placeholder: `Eg: ${fullNameEg}`,
isDisabled: false,
isRequired: true,
};
export const Error = Template.bind({});
Error.args = {
label: 'First name',
value: fullName,
error: 'Sorry, that’s a poor name. Try another.',
placeholder: `Eg: ${fullNameEg}`,
isDisabled: false,
isRequired: false,
};

我的组件

{#
Accessible input demo
Usage example:
{% include "components/input" with {
label: "Enter your greeting",
value: "Hi there Crafter",
error: "",
isDisabled: false,
isRequired: false,
placeholder: "Eg: Go get crafty!",
} %}
#}
<div class="input {{ error ? 'input-has-error' }}{{ isDisabled|default ? ' input-is-disabled' }}">
<label for="input-field" class="input-label">
{{ label|default }}
{% if isRequired|default %}
<span class="input-required">
*</span>
{% endif %}
</label>
<input id="input-field" class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker" value="{{ value }}" type="text" {{ placeholder|default ? ' placeholder="' ~ placeholder ~ '"' }} {{ error|default|length > 0 ? ' aria-invalid="true"' }} {{ error|default ? ' aria-describedby="input-error-message"' }} {{ isDisabled|default ? ' disabled' }} {{ isRequired|default ? ' required' }}/>
{% if error|default %}
<div id="input-error-message" class="input-error-message">{{ error }}</div>
{% endif %}
</div>

我正在改编的原创故事

// Learn more about the knobs addon:
// https://github.com/storybooks/storybook/blob/master/addons/knobs/README.md
import { text, boolean, number } from '@storybook/addon-knobs'
// Faker creates random data for your components
// https://github.com/marak/Faker.js/#api-methods
import Faker from 'faker'
// Your Twig component
import component from '../components/input.twig'
const container = children => {
// Font-size slider for component resizing
// (Use ems in your component styles)
const scale = number('scale', 1, {
range: true,
min: 1,
max: 2.5,
step: 0.25,
})
return `<div style="font-size:${scale}em">${children}</div>`
}
// Generate data with Faker
// https://github.com/marak/Faker.js/#api-methods
const fullName = Faker.name.findName()
const fullNameEg = Faker.name.findName()
// Set the component name
export default { title: 'Input' }
export const filled = () =>
container(
component({
label: text('label', 'Full name'),
value: text('value', fullName),
error: text('error', ''),
isDisabled: boolean('isDisabled', false),
isRequired: boolean('isRequired', false),
placeholder: text('placeholder', `Eg: ${fullNameEg}`),
})
)
export const empty = () =>
container(
component({
label: text('label', 'Full name'),
value: text('value', ''),
error: text('error', ''),
isDisabled: boolean('isDisabled', false),
isRequired: boolean('isRequired', false),
placeholder: text('placeholder', `Eg: ${fullNameEg}`),
})
)
export const disabled = () =>
container(
component({
label: text('label', 'Full name'),
value: text('value', fullName),
error: text('error', ''),
isDisabled: boolean('isDisabled', true),
isRequired: boolean('isRequired', false),
placeholder: text('placeholder', `Eg: ${fullNameEg}`),
})
)
export const required = () =>
container(
component({
label: text('label', 'Full name'),
value: text('value', fullName),
error: text('error', ''),
isDisabled: boolean('isDisabled', false),
isRequired: boolean('isRequired', true),
placeholder: text('placeholder', `Eg: ${fullNameEg}`),
})
)
export const error = () =>
container(
component({
label: text('label', 'Full name'),
value: text('value', fullName),
error: text('error', 'Sorry, that’s a poor name. Try another.'),
isDisabled: boolean('isDisabled', false),
isRequired: boolean('isRequired', false),
placeholder: text('placeholder', `Eg: ${fullNameEg}`),
})
)

Answer 1

最新版本的sass-loader还不受支持，因此您需要安装一个旧版本：

npm i -D sass-loader@10.1.1

有关工作示例，请参阅工艺故事书的开头部分→