Storybook: Cannot find path when using alias

[codestitch]

Describe the bug
In one of my stories. I used a custom component called List Component wherein it calls a service that is located deep in one of my library folder. The service was imported via alias like this:

import { ClientService } from '@gs/shared/services'; instead of the lengthy full path.

When using List component in storybook it showed me this error:

It seems it didn't convert the slashes... The alias is declared in the root tsconfig.json.

{
  "compileOnSave": false,
  "compilerOptions": {
     "resolveJsonModule": true,
     ...
     "paths": {
      "@gs/shared/services": ["libs/shared/services/src/index.ts"],
     ....
     }
}

Is there a way to resolve this?

Thanks

To Reproduce
Steps to reproduce the behavior:

1. Create a service
2. Create an alias for that service
3. Use that service in your component importing via the alias
4. apply the component in storybook

Expected behavior
It should be able to see the path

Screenshots
If applicable, add screenshots to help explain your problem.

Code snippets

list.stories.ts

import { Client, clientInitialValue} from '@gs/shared/models';
import { ListComponent } from '../../libs/shared/components/src/lib/general/list/list.component';
export const data: Client= clientInitialValue;

storiesOf('Components | List', module)
   .addDecorator(
      moduleMetadata({
         declarations: [ListComponent],
         imports: []
      }),
   )
   .add('default', () => ({
      template:
         `
         <gs-list *ngIf="clients.length > 0" 
            class="clients-list"
            [items]="clients" 
            (onSelect)="selected($event)"
            ></gs-list>
         `,
      props: {
         clients: data,
         selected: e => {
            action('List')(e);
         },
      }
   }));

list.component.ts

import { ClientService } from '@gs/shared/services';

@Component({
   selector: 'gs-list',
   templateUrl: './list.component.html'
})
export class ListComponent implements OnInit {
    constructor(private client: ClientService) {}
    ngOnInit() {
      this.client.get();
    }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "resolveJsonModule": true,
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"],
    "baseUrl": ".",
    "paths": {
        "@gs/shared/services": ["libs/shared/services/src/index.ts"],
        ....
     },
    "module": "es2015"
  },
  "exclude": ["node_modules", "tmp"]
}

System:

• OS: Win10
• Device: Dell Laptop
• Browser: Chrome
• Framework: Angular
• Addons:
• Version: 5.0.0

Additional context
Add any other context about the problem here.

[shilman]

There's probably a way to do with a webpack alias. I don't know if we support this aspect of Typescript... @kroeder?

[kroeder]

It should work out if the box. There was an issue a while ago that forced you to have a custom webpack Config but we could get rid of it in our project a while ago.

I can take a look at this.

[kroeder]

Could you please provide a reproduction repository? There are lot of things that could cause this

[codestitch]

Hi, @kroeder ... I've uploaded my code in my repo so you can check the problem. In the story, I have library for shared components and shared services. I'm calling the ListComponent from the shared-components library, which imports a service from the shared-service library.

That's the time the error happens.

You can check the repo in here. and then npm run storybook.

Thanks.

[kroeder]

Can you please try to copy&paste my webpack.config

const path = require('path');
const webpack = require('webpack');

const libPath = path.resolve('libs');

module.exports = {
   module: {
      rules: [
         {
            test: /\.less$/,
            loaders: ["style-loader", "css-loader", "less-loader"],
            include: path.resolve(__dirname, "../")
         }
      ]
   },
   // plugins: [
   //    new webpack.NormalModuleReplacementPlugin(/@sbnx/, function (resource) {
   //       resource.request = resource.request.replace(/@sbnx/, libPath);
   //    })
   // ]
}

You added a plugin that might not be needed. @storybook/angular already has a plugin integrated that takes all paths in tsconfig.json and sets them in the internal webpack config of storybook

Your repo had no story so I added one myself and I got another error but nothing seems to complain about your tsconfig paths anymore

Can you verify that, please?

[codestitch]

@Thanks a million. @kroeder!!! it worked!.

[podzz]

For anyone wondering how to make paths work for the latest version of storybook, I ended up updating my main.js with the following (you will need to install tsconfig-paths-webpack-plugin as a dev dependency)

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

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

[dbhagen]

Thank you @podzz !