Горячая перезагрузка сборника рассказов вызывает ошибку хуков - PullRequest
Новая
       2

Горячая перезагрузка сборника рассказов вызывает ошибку хуков

2 голосов
/ 06 октября 2019

Я получаю следующую ошибку при перезагрузке моей сборника рассказов. Он отлично работает при первой загрузке: 

TypeError: Cannot read property 'hooks' of undefined
at StoryStore.cleanHooks (http://localhost:9009/vendors~main.0e777466815571a0333e.bundle.js:6197:22)
at renderMain (http://localhost:9009/vendors~main.0e777466815571a0333e.bundle.js:8181:22)
at StoryStore.renderUI (http://localhost:9009/vendors~main.0e777466815571a0333e.bundle.js:8296:9)
at StoryStore.emit (http://localhost:9009/vendors~main.0e777466815571a0333e.bundle.js:6474:35)
at http://localhost:9009/vendors~main.0e777466815571a0333e.bundle.js:5943:16

Я пользуюсь провайдером Redx, хотя я не уверен, что это связано. Это код, и истории выглядят так, независимо от того: 

// provider.tsx
const Provider: React.FC = ({ children }) => (
    <ThemeProvider theme={theme}>
        <Provider store={store}>
            <Router>
                {children}
            </Router>
        </Provider>
    </ThemeProvider>
)

export default Provider


// decorators.tsx
export const withProvider = (storyFn: any) => <Provider>
    {storyFn()}
</Provider>


// 2-TodoCard.stories.tsx
const complete = () => <TodoCard todo={completeTodo} />  // the TodoCard is just a React.FC
const incomplete = () => <TodoCard todo={incompleteTodo} />

storiesOf('TodoCard', module)
    .addDecorator(withProvider)
    .add('complete', complete)
    .add('incomplete', incomplete)

webpack.config.js (внутри .storybook / - обычное приложение использует стандартный веб-пакет create-response-app): 

module.exports = ({ config }) => {
    config.module.rules.push({
        test: /\.(ts|tsx)$/,
        use: [
            {
                loader: require.resolve('awesome-typescript-loader'),
            },
            // Optional
            {
                loader: require.resolve('react-docgen-typescript-loader'),
            },
        ],
    });
    config.resolve.extensions.push('.ts', '.tsx');
    // config.entry = config.entry.filter(singleEntry => !singleEntry.includes('/webpack-hot-middleware/'));  // hot reloading causing a hooks bug
    return config;
};

Ответы [ 2 ]

0 голосов
/ 14 октября 2019

Оказывается, ошибка возникла из-за того, что я использовал два разных формата написания историй, когда я должен был использовать один или другой.

Чтобы процитировать пользователя Hypnosphi,

@ wgpsutherland Похоже, вы смешиваете формат истории компонента и сюжеты API в ваших историях: 

export default {
    title: 'Button',
};

storiesOf('Button', module)
    .add('gray', () => <Button color='gray' fluid size='large' type='submit'>Add</Button>)
    .add('blue', () => <Button color='blue' fluid size='large' type='submit'>Add</Button>)

У вас естьвыбрать один. Так что это должно быть либо 

export default {
    title: 'Button',
};

export const gray = () => <Button color='gray' fluid size='large' type='submit'>Add</Button>
export const blue = () => <Button color='blue' fluid size='large' type='submit'>Add</Button>

, либо 

storiesOf('Button', module)
    .add('gray', () => <Button color='gray' fluid size='large' type='submit'>Add</Button>)
    .add('blue', () => <Button color='blue' fluid size='large' type='submit'>Add</Button>)

Полный текст статьи о github можно посмотреть здесь: https://github.com/storybookjs/storybook/issues/8306

0 голосов
/ 11 октября 2019

Это произошло, когда я отредактировал файл .storybook / config.js и не перезапустил сервер сборника рассказов. Как только я остановил его и перезапустил, эта ошибка исчезла.

...