Storybook: Accept resolve alias in custom webpack config

Created on 4 Apr 2016  路  5Comments  路  Source: storybookjs/storybook

React native web project requires aliasing it to react-native to keep it like React native.

Most helpful comment

@arunoda ,
I'm having some trouble resolving an alias. storybook version: 1.28.1

./storybook/webpack.config.js resolve block:

  resolve: {
    alias: {
      foo: path.resolve(__dirname, 'bar.js')
    },
    extensions: ['', '.js']
  }

import foo from 'foo'; just doesn't seem to get resolved (undefined). I've verified the file path gets resolved. What am I doing wrong?

All 5 comments

Now we've enabled this. Use version 1.5.0.
See: #64 for more information.

@arunoda ,
I'm having some trouble resolving an alias. storybook version: 1.28.1

./storybook/webpack.config.js resolve block:

  resolve: {
    alias: {
      foo: path.resolve(__dirname, 'bar.js')
    },
    extensions: ['', '.js']
  }

import foo from 'foo'; just doesn't seem to get resolved (undefined). I've verified the file path gets resolved. What am I doing wrong?

@hliyan have you resolved it? I'm having the same problem on linux. It does however work on mac without problems.

@dziamid We had a bug in the latest storybook release. We patched and released a new version. Could you try the latest version (v2.15.1)

I'm using react-native-web and I want to share stories between web and native, so I have 2 separate configurations for storybook but 1 stories folder.

In stories I need to import storiesOf but import it from either @storybook/react or @storybook/react-native

So I put this in _react-native_ storybook webpack config:

const defaultConfig = require('@storybook/react-native/dist/server/config/webpack.config')
  .default

module.exports = Object.assign(defaultConfig, {
  resolve: Object.assign(defaultConfig.resolve || {}, {
    alias: Object.assign(
      (defaultConfig.resolve && defaultConfig.resolve.alias) || {},
      {
        '@storybook/react': '@storybook/react-native',
      },
    ),
  }),
})

and I'm using import { storiesOf } from '@storybook/react' everywhere in stories

But it still outputs the error, Can't find variable: document which means alias is not working

Was this page helpful?
0 / 5 - 0 ratings