Storybook with absolute paths

In our app we use absolute paths for importing. As an example if we have a path which is relative to the src folder, we can just write import module from "components/myComponent".

The issue is that this is not working in storybook. After some digging it turns out you can take the default webpack config and extend it as needed as seen in the documentation here. My thought process based on this was to simply push my src directory on the modules array like so,

module.exports = (baseConfig, env, defaultConfig) => {
    // Extend defaultConfig as you need.
    defaultConfig.resolve.modules.push("src");

    return defaultConfig;
};

After doing this however, I end up getting the following error when trying to run storybook.

ERROR in ./node_modules/@storybook/addon-knobs/src/react/index.js Module parse failed: Unexpected token (26:9) You may need an appropriate loader to handle this file type. | const initialContent = getStory(context); | const props = { context, storyFn: getStory, channel, knobStore, initialContent }; | return ; | }; |

Really not sure where to go from here.

Answer

This looks very similar to this GitHub issue https://github.com/storybooks/storybook/issues/2704 where the suggested fix is to make the src directory absolute in your webpack config.

module.exports = {
  //...
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules']
  }
};