Storybook: resolve.alias not working for custom Webpack Config

[felipegmarques]

Issue details

When using a custom webpack.config.js, with the following code:

const path = require('path');
module.exports = (storybookBaseConfig, configType) => {
  storybookBaseConfig.resolve={
    alias: {
      SomeStory$: path.resolve(__dirname, '../src/storybook/story.js'),
  }};
  return storybookBaseConfig;
}

I still get an error when I do js require('SomeStory').
The error is:

I'm running storybook with the script: storybook start -p 7007 -c .storybook

Steps to reproduce

1. Create an react-native project
2. Create a .storybook with the webpack.config.js provided above with some stories
3. Add the require for the file.

Versions

    "@storybook/react-native": "3.3.8",
    "babel-core": "6.26.0",
    "babel-plugin-module-resolver": "3.1.0",
    "babel-preset-react-native": "1.9.1",

[DanielRamosAcosta]

I'm having the same issue, but without react native... This is the exact error:

ERROR in ./app/components/Carousel/Carousel.jsx
Module not found: Error: Can't resolve '../../../components/CarouselVideo' in '/home/daniel/Documentos/Repos/Trabajo/nexoyoga/client-react/app/components/Carousel'
 @ ./app/components/Carousel/Carousel.jsx 34:21-65
 @ ./app/components/Carousel/Carousel.stories.js
 @ ./app/components .stories.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js

I don't know why it's trying to resolve at ../../../, this is my alias:

storybookBaseConfig.resolve.alias = {
  components: resolve(__dirname, '../app/components'),
  containers: resolve(__dirname, '../app/containers'),
  modules: resolve(__dirname, '../app/modules'),
  utils: resolve(__dirname, '../app/utils'),
  constants: resolve(__dirname, '../app/constants')
}

[igor-dv]

I suppose that it happens because you are losing the default alias. You need to preserve them:

storybookBaseConfig.resolve={
   ...storybookBaseConfig.resolve,
    alias: {
     ...storybookBaseConfig.resolve.alias,
      SomeStory$: path.resolve(__dirname, '../src/storybook/story.js'),
  }};

storybookBaseConfig.resolve.alias = {
  ...storybookBaseConfig.resolve.alias,
  components: resolve(__dirname, '../app/components'),
  containers: resolve(__dirname, '../app/containers'),
  modules: resolve(__dirname, '../app/modules'),
  utils: resolve(__dirname, '../app/utils'),
  constants: resolve(__dirname, '../app/constants')
}

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[joanferns00]

I'm facing the same issue when trying to resolve a custom module to work with storybook and Angular6.

const path = require("path");
module.exports = (storybookBaseConfig) => {
    storybookBaseConfig.resolve={
        ...storybookBaseConfig.resolve,
         alias: {
          ...storybookBaseConfig.resolve.alias,
          'vc-xyz-lib' : '/Users/user1/Documents/github/my-app/externals/js-xyz-sdk/dist/vc-xyz-lib'
       }};
  // Return the altered config
  return storybookBaseConfig;
};

[semoal]

I'm facing the same issue when trying to resolve a custom module to work with storybook and Angular6.

const path = require("path");
module.exports = (storybookBaseConfig) => {
    storybookBaseConfig.resolve={
        ...storybookBaseConfig.resolve,
         alias: {
          ...storybookBaseConfig.resolve.alias,
          'vc-xyz-lib' : '/Users/user1/Documents/github/my-app/externals/js-xyz-sdk/dist/vc-xyz-lib'
       }};
  // Return the altered config
  return storybookBaseConfig;
};

Same here, did you fix it? It says:
Module not found: Error: Can't resolve ...