javascript - Storybook 无法从从根目录后面的任何位置导入的目录中解析 JSX

Question

我有一个简单的故事书项目，其结构如下:

├── .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 中是否需要一些自定义解析器配置，或者这是否会与默认的故事书配置发生冲突。也许故事书有一些设置能够处理这个目录结构？

编辑已尝试向我的 webpack 配置添加更多配置以允许解析 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.

Answer 1

为什么不把每个故事都放在声明组件的同一个文件夹中❔

然后在 storybook config.js 文件中包含它们:

import {configure} from '@storybook/react'

function loadStories() {
  const req = require.context(`../src`, true, /\.stories\.jsx?$/)
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)

故事示例:

import Icon from './index'
import React from 'react'
import {storiesOf} from '@storybook/react'

storiesOf(`Icons`, module)
  .add(`Bell`, () => (
    <Icon src="bell"/>
  ))
  .add(`Settings`, () => (
    <Icon src="settings"/>
  ))
  .add(`User`, () => (
    <Icon src="user"/>
  ))