我可以成功地运行storybook并在storybook项目文件夹中开发React组件。但是,我正在尝试将包含所有组件的文件夹向上移动一个级别(成为storybook文件夹的同级文件夹)。
这样,文件结构不再像这样:
我有这样一个文件夹结构:
当我尝试将一个组件导入到story中时,却出现了以下错误。
这样,文件结构不再像这样:
storybook
├── components
│ ├── Foo.js
│ └── Bar.js
├── stories
│ ├── index.stories.js
我有这样一个文件夹结构:
my_example_project
├── my_components
│ ├── Foo.js
│ └── Bar.js
├── my_storybook
│ ├── ...
当我尝试将一个组件导入到story中时,却出现了以下错误。
ERROR in ../my_components/Bar.js 4:9
Module parse failed: Unexpected token (4:9)
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
|
| const Bar = () => {
> return <div>I am a Bar</div>;
| };
我尝试通过在我的storybook .storybook文件夹中添加一个webpack.config.js
文件来配置我的webpack,以解析组件文件夹,内容如下:
const path = require('path');
// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
// Make whatever fine-grained changes you need
config.module.rules.push({
test: /\.(js|jsx)$/,
exclude: [/bower_components/, /node_modules/, /styles/],
loader: 'babel-loader',
include: path.resolve(__dirname, '../my_components/*'),
query: {
presets: ['@babel/preset-react']
}
});
// Return the altered config
return config;
};
然而,我遇到了相同的错误。我做错了什么?
这里是完整示例项目的GitHub链接