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

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

├── .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)

但现在看来，storybook无法解析该文件，尽管唯一的变化是该故事已被移回文件。我得到以下错误：

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

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.

获取以下错误：

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

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.

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

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

从'@storybook/react'导入{configure}
函数loadStories（）{
const req=require.context（`../src`，true，/\.stories\.jsx？$/）
req.keys（）.forEach（文件名=>req（文件名））
}
配置（加载故事、模块）

故事示例：

从“./index”导入图标
从“React”导入React
从'@storybook/react'导入{storiesOf}
storiesOf（`Icons`，模块）
.add（`Bell`，（）=>(
))
.add（`Settings`，（）=>(
))
.add（`User`，（）=>(
))
将此添加到storybook/.storybook/webpack.config.js

const path=require（'path'）；
module.exports=异步（{config，mode}）=>{
config.module.rules.push({
测试：/\.js？$/,，
包括：path.resolve（_dirname，“../../stories”），
使用：[
{
加载器：“巴别塔加载器”，
选项：{
cacheDirectory:'./node_modules/.cache/storybook'，
预设：[
['./node_modules/@babel/preset env/lib/index.js'，
{
ShippedPropositions:true，useBuiltIns:'usage'，corejs:'3'
}
],
“./node_modules/@babel/preset react/lib/index.js”，
“./node_modules/@babel/preset flow/lib/index.js”，
],
插件：[]，
},
},
],
});
config.resolve.modules=[
…config.resolve.modules，
resolve（process.cwd（），'node_modules'），
]
//返回修改后的配置
返回配置；
};

你不需要拥有。babelrc

说明：
在这个链接中，您可以看到默认配置，我只是在那里复制了一些配置。它将为您的js/jsx处理合适的加载程序

至于config.resolve.modules，您需要告诉网页您的节点\u modules文件夹不在故事中的根目录中，这样当您在故事书文件夹外使用模块时，它将看到模块

希望这有帮助。
这是因为预设名为
@babel/preset react
。除此之外-您的方法应该可以正常工作，因为我正在使用一个非常类似的设置来处理babel在
src
文件夹之外的模块。您可以在哪里解决这个问题？我建议运行
Thread storybook--debug webpack
（或
npm run storybook--debug webpack
），因为这将有助于了解如何设置。