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

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

Answer 2

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 3

Similar to @Sahin D.'s answer above but it looks like it's been updated since.

// .storybook/main.js

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  webpackFinal: async (config) => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        extensions: config.resolve.extensions,
      }),
    ];
    return config;
  },
};

Source: https://storybook.js.org/docs/react/configure/webpack#typescript-module-resolution

Answer 4

I've tried other solutions, but they didn't help. So I used a webpack plugin for my case to solve this issue out.

After following the instructions here: https://storybook.js.org/docs/riot/configure/webpack#extending-storybooks-webpack-config

I'm using the TypeScript version, and I have changed the webpackFinal field as the following:

// main.ts
import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
import type { Configuration } from 'webpack';

export default {
  // ... other fields
  webpackFinal: async (config: Configuration) => {
    if (!config.resolve) {
      config.resolve = {};
    }

    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin(),
    ];

    return config;
  },
};

Answer 5

And also you can resolve your paths in storybook in this way:

 //.storybook/main.js const path = require("path"); module.exports = { "webpackFinal": async (config) => { config.resolve.alias['res'] = path.resolve(__dirname, '../src/res'), config.resolve.alias['components'] = path.resolve(__dirname, '../src/components') return config } }

For example, my absolute addresses are "components/common/Button" and "res/Images" which will resolve on the storybook's build. Maybe it's not the best answer, but I hope it would be helpful!