Storybook: Can't resolve components path that are imported using the directory and default index.js file

[MonteKrysto]

Describe the bug
Storybook can't resolve components path that are imported from a directory with the default index.js

├── .storybook
│   ├── config.js
│   ├── addons.js
│   ├── webpack.config.js
├── app
│   ├── javascript
│   │   ├── src
│   │   │   ├── form
│   │   │   │   ├── checkbox.jsx
│   │   │   │   ├── radio.jsx
│   │   │   │   ├── form.jsx
│   │   │   │   ├── form.stories.jsx
│   │   │   │   ├── index.js
│   │   │   ├── alert
│   │   │   │   ├── alertstuff.jsx
│   │   │   │   ├── alert.jsx
│   │   │   │   ├── index.jsx
│   │   │   ├──utils
│   │   │   │   ├── utilsstuff.jsx
│   │   │   │   ├── utilsotherstuff.jsx
│   │   │   │   ├── index.jsx

form/index.js contains:

import Form from './form.jsx';
import Radio from './radio.jsx';
import Checkbox from './checkbox.jsx';

export { Checkbox, Radio, Form };

alert/index.js is the same:

import AlertStuff from './alertstuff.jsx';
import Alert from './alert.jsx';

export { AlertStuff, Alert };

utils/index.js contains:

import UtilsStuff from './utilsstuff.jsx';
import UtilsOtherStuff './utilsotherstuff.jsx';

export { UtilsStuff, UtilsOtherStuff };

form.jsx contiains:

import { AlertStuff } from 'alert';

export class Form extends Component {
    ....
}

form/form.stories.jsx looks like this:

import { storiesOf } from '@storybook/react';
import React from 'react';
import Form from './form';


storiesOf('Form', module)
    .addWithJSX('simple', () => (
        <Form 
            name={text('Name', 'Form1')}
        />
    ));

.storybook/webpack.config.js looks like this:

const path = require("path");

// Export a function. Accept the base config as the only param.
module.exports = (storybookBaseConfig, configType) => {

  storybookBaseConfig.module.rules.push({
    test: /\.sass$/,
    loaders: ["style-loader", "css-loader", "sass-loader"],
    include: path.resolve(__dirname, "../")
  });

  return storybookBaseConfig;
};

.storybook/config.js:

import { withKnobs } from '@storybook/addon-knobs/react';
import { addDecorator, configure, setAddon } from '@storybook/react';
import JSXAddon from 'storybook-addon-jsx';

addDecorator(withKnobs);
window.regeneratorRuntime = require('babel-runtime/regenerator');
setAddon(JSXAddon);
const req = require.context('../app/javascript/src', true, /.stories.jsx$/);

function loadStories() {
  require('./welcomeStory');
  req.keys().forEach(file => req(file));
}

configure(loadStories, module);

When running npm run storybook I get the following error:

ERROR in ./app/javascript/src/form/form.jsx
Module not found: Error: Can't resolve 'alert' in '/Users/xxx/Code/xxx/xxx/app/javascript/src/form'

These components load and work fine

Storybook should be able to resolve the path when Storybook uses the component

System:

• OS: [MacOS]
• Device: [Macbook Pro 2018]
• Browser: chrome,
• Framework: React
• Version: 4.0.11

[MonteKrysto]

Solved it with the following in the webpack.config.js file:

  storybookBaseConfig.resolve.modules = [
    ...(storybookBaseConfig.resolve.modules || []),
    path.resolve(__dirname, "../app/javascript/src"),
  ];

[developers-zone]

Resolved the issue with npm i @storybook/react