Как настроить веб-пакет в сборнике рассказов, чтобы позволить babel импортировать реагирующие компоненты вне папки проекта - PullRequest
Новая
       43

Как настроить веб-пакет в сборнике рассказов, чтобы позволить babel импортировать реагирующие компоненты вне папки проекта

2 голосов
/ 13 июня 2019

Я могу запустить сборник рассказов и разработать компоненты реакции в папке проекта сборника рассказов.Тем не менее, я пытаюсь переместить папку, содержащую все мои компоненты, на уровень (чтобы быть родным из папки сборника рассказов).

, чтобы вместо такой структуры, как эта 

storybook
├── components
│   ├── Foo.js
│   └── Bar.js
├── stories
│   ├── index.stories.js

У меня есть структура папок, подобная этой 

my_example_project
├── my_components
│   ├── Foo.js
│   └── Bar.js
├── my_storybook
│   ├── ...

Однако, когда я пытаюсь импортировать компонент в историю, я получаю следующую ошибку 

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>;
| };

Я пытался настроить свойWebPack для анализа папки компонентов, добавив файл webpack.config.js в папку Storybook моих storybooks, которая выглядит следующим образом 


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 на пример полного примера проекта

...