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.

Mister

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

Diskson

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/",
}

Elli

Should one also include 'node_modules' the way it was done in the approved answer? – Meningitis

He doesn't need to as he's spreading Storybook modules in there, which already has node_modules – Undershoot

Note: if you have "baseUrl": ".",, then you'd resolve using "../" instead – Paestum

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

Bricole

Doesn't work for webpack 5+ – Abiosis

I ended up ditching storybook altogether and just used next13 as a storybook to show my components. Too many issues with storybook time after time for me personally – Bricole

This article talks about this solution getfishtank.com/blog/fix-typescript-path-mapping-in-storybook – Invar

Answer 4

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!

Torto

Answer 5

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;
  },
};

Buzzer

this had worked to resolve it for me, with ts modules – Uttica

This works! I wonder why installing @storybook/nextjs didn't solve the problem? – Retiform