Question

我能够配置故事书来运行我的本机组件，问题是某些使用react-native-paper's主题提供程序，而当我运行webpack构建器时，它无法正确加载主题。我试图做的是为主题编写规则，但无法使其起作用。这是到目前为止我得到的：

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

感谢您的帮助

带故事书的Webpack配置

0 个答案: