Storybook with absolute paths

Question

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 1

I got this issue after using CLI and I was able to resolve it by modifying my .storybook/main.js to:

const path = require('path');

module.exports = {
  ...other settings....,

  webpackFinal: async (config) => {
    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve(__dirname, "../src"),
    ];

    return config;
  },

}

Note that I am using Typescript and ReactJS and the base URL for my Typescript file is set to src. That is my tsconfig has this:

{
...,
 "baseUrl": "./src/",
}

Answer 2

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