Storybook: Cant add aliases in storybook config

Created on 13 Aug 2020 · 17Comments · Source: storybookjs/storybook

Cant add aliases to storybook 6^
main.js

const path = require("path");

module.exports = {
  webpackFinal: async (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      "~/": path.resolve(__dirname, "../src/"),
    };
    config.resolve.extensions.push(".ts", ".tsx");
    return config;
  },
};

{
  "compilerOptions": {
    "allowJs": false,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "rootDirs": ["src", "stories"],
    "outDir": "./dist",
    "strict": true,
    "skipLibCheck": true,
    "target": "es6",
    "typeRoots": ["./node_modules/@types"],
    "paths": {
      "~/": ["./src/"]
    }
  },
  "exclude": ["./node_modules", "./dist"],
  "include": ["src", "stories"]
}

error
ERROR in ./stories/develop.stories.tsx Module not found: Error: Can't resolve '~/' in '/Users/user/dev/storybook-starter/stories' @ ./stories/develop.stories.tsx 54:0-31 57:13-22 72:25-34 @ ./stories sync nonrecursive ^\.\/(?:(?!\.)(?=.)[^/]*?\.stories\.(ts|tsx))$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

files
Screenshot 2020-08-13 at 18 33 57

What i am doing wrong?

P2 babel / webpack has workaround question / support

Source

toastyboost

👍10

Most helpful comment

If someone could create a reproduction repo, that'd be super helpful fixing this bug.

if this doesn't work

const path = require("path");

module.exports = {
  webpackFinal: async (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      "~/": path.resolve(__dirname, "../src/"),
    };
    config.resolve.extensions.push(".ts", ".tsx");
    return config;
  },
};

then that's a bug.

ndelangen on 17 Aug 2020

👍13 🚀1

All 17 comments

Without thinking too far, I think updating config object might not work as expected.
A simple workaround for you @toastyboost

webpackFinal: async (config) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve?.alias,
          ...aliases,
        },
      },
    };
  },

In addition with 0 config typescript, you no longer need config.resolve.extensions.push(".ts", ".tsx");

tooppaaa on 14 Aug 2020

I'm running into this as well and I assume this will break a lot of Storybook devs experience.

    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve('../')
    ]

This is what I had before that allowed to resolve to my root path properly, but for whatever reason this doesn't help in my upgrade.

reywright on 14 Aug 2020

👍1

If someone could create a reproduction repo, that'd be super helpful fixing this bug.

if this doesn't work

const path = require("path");

module.exports = {
  webpackFinal: async (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      "~/": path.resolve(__dirname, "../src/"),
    };
    config.resolve.extensions.push(".ts", ".tsx");
    return config;
  },
};

then that's a bug.

ndelangen on 17 Aug 2020

👍13 🚀1

I just came across this after having some issues having upgraded storybook to 6.

Turned out my problem was an incorrect resolve function for whatever reason.

My main.js is in .storybook and I am using this function:

function resolve(dir) {
  return path.join(__dirname, dir)
}

Example:

alias: {
  '@': resolve('../src'),
},

Otherwise the same setup described by @ndelangen above and it is working.

gavmck on 3 Sep 2020

👍2

this was working fine for me with Storybook 5.x, but is now broken in 6.x

the exact scenario described by @ndelangen is not working for me, so i'm inclined to believe that this is a bug

i also still see info => Using default Webpack setup. in the console, even though i am providing custom config like so:

const webpackConfig = require('../.webpack/client.js');

module.exports = {
  webpackFinal: (config) => ({
    ...config,
    resolve: {
      ...config.resolve,
      ...webpackConfig.resolve,
      alias: {
        ...config.resolve.alias,
        ...webpackConfig.resolve.aliases,
      },
    },
  }),
  //other config properties
}

chrisbutler on 17 Sep 2020

👍2 🎉1

I'm also running into this issue, having tried the solution here https://github.com/storybookjs/storybook/issues/11989#issuecomment-674833064.

@ndelangen Check out this repro repository – https://github.com/mattrothenberg/sb6-resolve-alias-error

You should be able to clone, run yarn && yarn storybook and see that the tilde ("~") alias doesn't resolve for the Button component.

mattrothenberg on 23 Sep 2020

👍5 ❤3

I think the problem may be trailing slashes. Try using ~ and ../src/ exactly. It seems to work for me in all the variants below (Storybook 6.0.21 and 6.0.27).

Shortest:

webpackFinal: async (config) => {
  config.resolve.alias['~'] = path.resolve(__dirname, '../src/');
  return config;
},

Short:

webpackFinal: async (config) => {
  config.resolve.alias = {
    ...config.resolve?.alias,
    '~': path.resolve(__dirname, '../src/'),
  };
  return config;
},

Longer:

webpackFinal: async (config) => ({
  ...config,
  resolve: {
    ...config.resolve,
    alias: {
      ...config.resolve?.alias,
      '~': path.resolve(__dirname, '../src/'),
    },
  },
}),

JanJakes on 23 Oct 2020

❤2 👍2 🚀1

Above solution works for me except when I add an additional folder layer. @images fails for me
```
webpackFinal: async config => {
config.resolve.alias['@components'] = path.resolve(__dirname, '../components')
config.resolve.alias['@images'] = path.resolve(__dirname, '../assets/images')
return config
},

jkincheloe33 on 27 Oct 2020

Here is a workaround for using aliases from tsconfig (*.mdx stories are supported as well):

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

module.exports = {
    stories: [
        '../src/**/*.stories.@(ts|tsx|mdx)'
    ],
    addons: [
        '@storybook/addon-essentials'
    ],

    webpackFinal: async (config) => {
        [].push.apply(config.resolve.plugins, [
            new TsconfigPathsPlugin({extensions: config.resolve.extensions})
        ]);

        return config;
    }
};

I guess this should be added to Storybook docs.

monolithed on 14 Nov 2020

👍1

cc @jonniebigodes

shilman on 14 Nov 2020

@monolithed posted a nice solution, but i wish this was cleaner with my prettier formating it looks like this

  webpackFinal: async (config) => {
    ;[].push.apply(config.resolve.plugins, [
      new TsconfigPathsPlugin({ extensions: config.resolve.extensions }),
    ])

    return config
  },

Apart from that for TypeScript users this is how i have it setup:
in tsconfig.ts

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

and in ./.storybook/main.js

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

module.exports = {
  stories: ['../**/src/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal: async (config) => {
    ;[].push.apply(config.resolve.plugins, [
      new TsconfigPathsPlugin({ extensions: config.resolve.extensions }),
    ])

    return config
  },
}

Update: looks like this is a cleaner version

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

MariuzM on 14 Nov 2020

I've been doing some testing with this and there seems to be somewhat of an issue. I've setup a repo here to triage this. So far from my testing i saw a couple of things:

What was introduced in this comment works well in development mode (running yarn storybook). But as soon as i issue a production build with yarn build-storybook i'm faced with the following error:

$ build-storybook -s public --no-dll
info @storybook/react v6.0.28
info 
info clean outputDir..
info => Copying static files from: public
info => Copying prebuild dll's..
info => Building manager..
info => Loading manager config..
info => Loading presets
info => Compiling manager..
info => manager built (8.32 s)
info => Building preview..
info => Loading preview config..
info => Loading presets
info => Loading config/preview file in "./.storybook".
info => Loading config/preview file in "./.storybook".
info => Adding stories defined in ".storybook/main.js".
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack setup.
info => Compiling preview..
ERR! => Failed to build the preview
ERR! /Users/myFolder/example/src/pages/MyPage.stories.tsx
ERR! TypeScript error in /Users/myFolder/example/src/pages/MyPage.stories.tsx(6,54):
ERR! Cannot find module '@components/MyOtherComponent' or its corresponding type declarations.  TS2307
ERR! 
ERR!     4 | import {MyPage,MyPageProps} from "./MyPage";
ERR!     5 | 
ERR!   > 6 | import {MyOtherComponent,MyOtherComponentProps} from '@components/MyOtherComponent'
ERR!       |                                                      ^
ERR!     7 | 
ERR!     8 | import Image2 from '@images/image_2.jpg'
ERR!     9 | import Image3 from '@images/image_3.jpg'
ERR! /Users/myFolder/example/src/pages/MyPage.tsx
ERR! TypeScript error in /Users/myFolder/example/src/pages/MyPage.tsx(3,32):
ERR! Cannot find module '@components/MyOtherComponent' or its corresponding type declarations.  TS2307
ERR! 
ERR!     1 | import React from "react";
ERR!     2 | 
ERR!   > 3 | import {MyOtherComponent} from "@components/MyOtherComponent";
ERR!       |                                ^
ERR!     4 | 
ERR!     5 | export interface MyPageProps {
ERR!     6 |   /**
ERR! asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
ERR! This can impact web performance.
ERR! Assets: 
ERR!   static/media/image_3.003791f5.jpg (275 KiB)
ERR!   vendors~main.1a5d3ddbfe354d6a78b4.bundle.js (3.54 MiB)
ERR! entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
ERR! Entrypoints:
ERR!   main (3.58 MiB)
ERR!       runtime~main.1a5d3ddbfe354d6a78b4.bundle.js
ERR!       vendors~main.1a5d3ddbfe354d6a78b4.bundle.js
ERR!       static/css/main.0b660ce0.chunk.css
ERR!       main.1a5d3ddbfe354d6a78b4.bundle.js
ERR! 
ERR! webpack performance recommendations: 
ERR! You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
ERR! For more info visit https://webpack.js.org/guides/code-splitting/
node:internal/process/promises:218
          triggerUncaughtException(err, true /* fromPromise */);
          ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "[object Object]".] {
  code: 'ERR_UNHANDLED_REJECTION'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I factored in the comments above with the tsconfig-paths-webpack-plugin usage and included a branch in the repo to do additional testing. Based on the configuration provided i'm faced with the following issue once i run yarn storybook:

info @storybook/react v6.0.28
info 
info => Loading static files from: /Users/myUser/myFolder/example/public .
info => Loading presets
info => Loading presets
info => Loading config/preview file in "./.storybook".
info => Loading config/preview file in "./.storybook".
info => Adding stories defined in ".storybook/main.js".
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack setup.
webpack built d661ea12d96509bc01c5 in 17766ms
✖ ｢wdm｣: Hash: d661ea12d96509bc01c5
Version: webpack 4.44.2
Time: 17766ms
Built at: 18/11/2020 17:38:57
                                          Asset      Size        Chunks                                Chunk Names
                            asset-manifest.json  1.18 KiB                [emitted]                     
                                    iframe.html  2.92 KiB                [emitted]                     
            main.d661ea12d96509bc01c5.bundle.js   133 KiB          main  [emitted] [immutable]         main
        main.d661ea12d96509bc01c5.bundle.js.map  52.9 KiB          main  [emitted] [dev]               main
    runtime~main.d661ea12d96509bc01c5.bundle.js  35.1 KiB  runtime~main  [emitted] [immutable]         runtime~main
runtime~main.d661ea12d96509bc01c5.bundle.js.map  36.3 KiB  runtime~main  [emitted] [dev]               runtime~main
        static/media/code-brackets.2e1112d7.svg  1.42 KiB                [emitted] [immutable]         
               static/media/colors.a4bd0486.svg  8.31 KiB                [emitted] [immutable]         
             static/media/comments.a3859089.svg  1.49 KiB                [emitted] [immutable]         
            static/media/direction.b770f9af.svg  1.25 KiB                [emitted] [immutable]         
                 static/media/flow.edad2ac1.svg  1.36 KiB                [emitted] [immutable]         
               static/media/plugin.d494b228.svg  2.12 KiB                [emitted] [immutable]         
                 static/media/repo.6d496322.svg   1.6 KiB                [emitted] [immutable]         
             static/media/stackalt.dba9fbb3.svg  2.49 KiB                [emitted] [immutable]         
    vendors~main.d661ea12d96509bc01c5.bundle.js  7.98 MiB  vendors~main  [emitted] [immutable]  [big]  vendors~main
vendors~main.d661ea12d96509bc01c5.bundle.js.map  8.03 MiB  vendors~main  [emitted] [dev]               vendors~main
Entrypoint main [big] = runtime~main.d661ea12d96509bc01c5.bundle.js runtime~main.d661ea12d96509bc01c5.bundle.js.map vendors~main.d661ea12d96509bc01c5.bundle.js vendors~main.d661ea12d96509bc01c5.bundle.js.map main.d661ea12d96509bc01c5.bundle.js main.d661ea12d96509bc01c5.bundle.js.map
[0] multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/react-scripts/node_modules/react-dev-utils/webpackHotDevClient.js 184 bytes {main} [built]
[./.storybook/generated-stories-entry.js] 2.88 KiB {main} [built]
[./.storybook/preview.js-generated-config-entry.js] 5.04 KiB {main} [built]
[./.storybook/storybook-init-framework-entry.js] 2.51 KiB {main} [built]
[./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js] 500 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js] 2.44 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js] 2.45 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js] 2.45 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js] 2.45 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js] 2.45 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js] 2.44 KiB {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/react-scripts/node_modules/react-dev-utils/webpackHotDevClient.js] 8.01 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined] (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined 7.68 KiB {vendors~main} [built]
    + 1773 hidden modules

ERROR in ./src/components/ComponentAlias.stories.mdx
Module not found: Error: Can't resolve '@components/MyOtherComponent' in '/Users/myUser/myFolder/example/src/components'
 @ ./src/components/ComponentAlias.stories.mdx 11:0-64 12:52-68 29:15-31 56:13-29
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.mdx)$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/react-scripts/node_modules/react-dev-utils/webpackHotDevClient.js

ERROR in ./src/pages/MyPage.stories.tsx
Module not found: Error: Can't resolve '@components/MyOtherComponent' in '/Users/myUser/myFolder/example/src/pages'
 @ ./src/pages/MyPage.stories.tsx 52:0-64 77:62-78
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/react-scripts/node_modules/react-dev-utils/webpackHotDevClient.js

ERROR in ./src/pages/MyPage.tsx
Module not found: Error: Can't resolve '@components/MyOtherComponent' in '/Users/myUser/myFolder/example/src/pages'
 @ ./src/pages/MyPage.tsx 7:0-64 49:37-53
 @ ./src/pages/MyPage.stories.tsx
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/react-scripts/node_modules/react-dev-utils/webpackHotDevClient.js

ERROR in ./src/pages/MyPage.stories.tsx
Module not found: Error: Can't resolve '@images/image_2.jpg' in '/Users/myUser/myFolder/example/src/pages'
 @ ./src/pages/MyPage.stories.tsx 53:0-41 73:10-16
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/react-scripts/node_modules/react-dev-utils/webpackHotDevClient.js

ERROR in ./src/pages/MyPage.stories.tsx
Module not found: Error: Can't resolve '@images/image_3.jpg' in '/Users/myUser/myFolder/example/src/pages'
 @ ./src/pages/MyPage.stories.tsx 54:0-41 74:10-16
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/react-scripts/node_modules/react-dev-utils/webpackHotDevClient.js
Child HtmlWebpackCompiler:
                          Asset     Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.4 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2.19 KiB {HtmlWebpackPlugin_0} [built]

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

If anyone could share the repo, or take a look at the one i've mentioned we would have a better understanding of what's going on and i could document this accurately.

Stay safe

jonniebigodes on 18 Nov 2020

❤1

Storybook version 6.1
I also faced with alias problems, but fixed that using approach below.

TypeScript
Storybook use different paths to tsconfig, for TsconfigPathsPlugin he uses _tsconfig.app.json_
For redefine config, just add to _main.js_ next code

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
.....
webpackFinal: async (config, { configType }) => {
    config.resolve.plugins.push(new TsconfigPathsPlugin({
      configFile: './.storybook/tsconfig.json',
    }));

    return config;
  }

SCSS

webpackFinal: async (config) => {
    config.resolve.alias['@someAlias'] = path.resolve(__dirname, '../path')
    return config;
  }

Also, there are two configs of webpack: managerWebpack and webpackFinal

vkotlyar3 on 20 Nov 2020

❤2

@vkotlyar3 thank you~

falsy on 24 Nov 2020

@vkotlyar3 that might work, but and if you allow me a couple of questions:

is the code that you posted is based off angular?
or if not and you're using React you moved over the file and adjusted accordingly?

The reasoning behind this is that when a Storybook user initializes Storybook with Angular he gets the following:
angular-storybook

And with React this:

react-ts-storybook

And to avoid introducing confusion when documenting it's best to get a clearer picture.

jonniebigodes on 5 Dec 2020

@vkotlyar3 that might work, but and if you allow me a couple of questions:

is the code that you posted is based off angular?

or if not and you're using React you moved over the file and adjusted accordingly?

Yes, @jonniebigodes, my way works for Angular set up

vkotlyar3 on 5 Dec 2020

that's what i thought. But in this case as we're dealing with versioned documentation and what works for one, might not work for others. But this is a good start angular is covered. All that is missing is a way to handle the other frameworks.

jonniebigodes on 5 Dec 2020

👍1

Was this page helpful?

0 / 5 - 0 ratings