Сборник рассказов не может проанализировать JSX из каталогов, импортированных из любого места за корневым каталогом - PullRequest
Новая
       21

Сборник рассказов не может проанализировать JSX из каталогов, импортированных из любого места за корневым каталогом

0 голосов
/ 03 сентября 2018

У меня есть простой проект сборника рассказов, который структурирован так: 

├── .storybook
├── .babelrc
├── package.json
├── node_modules
├── stories
│   ├── index.js

и я могу запустить свою конфигурацию с start-storybook -p 6006 

// .storybook/config.js
import { configure } from '@storybook/react'

function loadStories() {
  require('../stories/index.js')
}

configure(loadStories, module)

Теперь я хочу включить некоторые компоненты, которые являются каталогом позади. Таким образом, новая файловая структура будет иметь вид: 

├── storybook
│   ├── .storybook
│   ├── .babelrc
│   ├── package.json
│   ├── node_modules
├── stories
│   ├── index.js

И мой конфиг теперь вызывает истории из одного каталога обратно: 

// ./storybook/.storybook/config.js
import { configure } from '@storybook/react'

function loadStories() {
  require('../../stories/index.js')
}

configure(loadStories, module)

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

ERROR in ../admin-components/components/Button/Button.js 40:26
Module parse failed: Unexpected token (40:26)
You may need an appropriate loader to handle this file type.
| import React from "react"
|
> const Button = (props) => <button>Click Me!!!</button>
|
| export default Button
 @ ../admin-components/components/Button/index.js 1:0-29 3:15-21
 @ ../admin-components/components/index.js
 @ ./stories/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

Нужна ли мне какая-то пользовательская конфигурация парсера в моем .babelrc или это будет конфликтовать с конфигурацией сборника рассказов по умолчанию. Возможно, есть какая-то настройка для сборника рассказов, чтобы иметь возможность обрабатывать эту структуру каталогов?

EDIT Попытался добавить дополнительную конфигурацию в конфигурацию моего веб-пакета, чтобы разрешить анализ JSX, но безрезультатно. 

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (storybookBaseConfig, configType) => {
  storybookBaseConfig.resolve.alias = {
    'prop-types$': path.join(__dirname, '../node_modules/axe-prop-types')
  };

  storybookBaseConfig.module.rules.push({
        test: /\.(js|jsx)$/,
        exclude: [/bower_components/, /node_modules/, /styles/],
        loader: 'babel-loader',
        include: path.resolve(__dirname, '../stories'),
        query: {
      presets: ['@babel/react']
    }
  });

  storybookBaseConfig.plugins.push(new CopyWebpackPlugin([{ from: '.storybook/fonts', to: 'fonts' }]))
  if (configType === 'PRODUCTION') {
    config.optimization.minimize = false;
  }

  return storybookBaseConfig;
}

получая следующую ошибку: 

ERROR in ./stories/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions.
...