Конфигурация Webpack с сборником рассказов
Мне удалось настроить сборник рассказов для запуска собственных реагирующих компонентов, проблема в том, что некоторые из них используют react-native-paper's
поставщик тем, и когда я запускаю конструктор веб-пакетов, он не загружает тему правильно. Я пытался написать правило для темы, но я не смог заставить его работать. Вот что у меня так далеко:
IN .storybook/webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = ({ config }) => {
config.module.rules.push({
test: /\.(gif|jpe?g|png|svg)$/,
use: {
loader: 'url-loader',
options: { name: '[name].[ext]' }
}
});
config.resolve.extensions = ['.web.js', '.js', '.json', '.web.jsx', '.jsx'];
config.resolve.alias = {
'react-native': 'react-native-web'
};
return config;
};
IN storybook/stories
import React from 'react';
import { Text } from 'react-native';
import { storiesOf } from '../helpers/storiesOf';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
const theme = {
...DefaultTheme,
roundness: 2,
colors: {
...DefaultTheme.colors,
primary: '#3498db',
accent: '#f1c40f',
background: '#212121'
}
};
// eslint-disable-next-line import/extensions
import Button from './Button';
import CenterView from './CenterView';
import Loading from '../../src/components/Loading';
import Welcome from './Welcome';
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
storiesOf('Button', module)
.addDecorator(getStory => (
<PaperProvider theme={theme}>
<CenterView>{getStory()}</CenterView>
</PaperProvider>
))
.add('with text', () => <Loading />)
.add('with some emoji', () => (
<Button onPress={action('clicked-emoji')}>
<Text> </Text>
</Button>
));
Это ошибка, которую я получаю
ERROR in ./node_modules/react-native-paper/src/index.js 4:12
Module parse failed: Unexpected token (4:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| import * as Colors from './styles/colors';
> import type { Theme as _Theme } from './types';
|
| export type Theme = _Theme;
@ ./storybook/stories/index.js 1:1585-1656 1:1683-1695 1:1733-1745 1:2444-2457
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true
Любая помощь приветствуется