Resolve alias in webpack config #3339

allangrds · 2018-04-01T23:11:35Z

Tools version

webpack: 4.2.0,
storybook/cli: 3.3.15,
storybook/react: 3.3.15,

Problem

Even using alias at webpack.config.js inside the .storybook folder, and in my root project folder, it seems storybook doesn't apply the aliases, resulting in a conflict of paths. If I want to run storybook, I need to update my static files paths to ../../../, and if I want to run a webserver, I need to update my static files paths to ../.

My code

.storybook/webpack.config.js

const path = require('path');
const includePath = path.resolve(__dirname, '..');

module.exports = {
  resolve: {
    alias: {
      atoms: path.resolve(__dirname, 'src/client/atoms/'),
      client: path.resolve(__dirname, 'src/client/'),
      fonts: path.resolve(__dirname, 'src/fonts/'),
      helpers: path.resolve(__dirname, 'src/helpers/'),
      images: path.resolve(__dirname, 'src/images/'),
      stories: path.resolve(__dirname, 'src/stories/'),
      styles: path.resolve(__dirname, 'src/styles/'),
      tests: path.resolve(__dirname, 'src/tests/'),
    },
    extensions: ['.js', '.jsx', '.css', '.png', '.jpg', '.gif', '.jpeg'],
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              modules: 1,
              localIdentName: '[path]-[name]-[local]',
            },
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              ident: 'postcss',
              plugins: () => [
                require('postcss-import'),
                require('postcss-cssnext')({
                  features: {
                    customProperties: false,
                  },
                }),
              ],
            },
          },
        ],
      },
      {
        test: /\.(woff|jpg|png|gif|jpeg)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 65000,
          },
        },
      },
    ],
  },
};

fonts.css

@font-face {
  font-family: "Roboto";
  src: url("../../../fonts/Roboto-Regular.woff");
  font-weight: normal;
}

button.js

const getImage = () => {
    const imageTypes = {
      positive: {
        src: require('../../../images/icons/up.png'), //eslint-disable-line
        alt: 'Positivo',
      },
      negative: {
        src: require('../../../images/icons/down.png'), //eslint-disable-line
        alt: 'Negativo3',
      },
      neutral: {
        src: 'neutral.jpg',
        alt: 'Neutro',
      },
    }

    return imageTypes[type]
  }

Extra explication

Command "start": "webpack-dev-server --mode development --open"
All paths ../../../ will only works if changed to ../.

Command "storybook": "start-storybook -p 9001",
All paths ../../../ will works.

Who to contact

@allangrds

The text was updated successfully, but these errors were encountered:

Hypnosphi · 2018-04-01T23:36:25Z

__dirname in node is the directory of current module, in this case it's your .storybook directory. So it probably should be atoms: path.resolve(__dirname, '../src/client/atoms/') etc

allangrds · 2018-04-02T00:56:37Z

Hi @Hypnosphi! Thanks for answering me.
So, even after changing to code posted by you, I still have the problem with the path for my css file and js - importing a image.

I need to use the same path when run command to storybook or webserver.

Hypnosphi · 2018-04-02T09:47:25Z

But the whole point of adding resolve.alias is to avoid relative paths. You should be able to require('images/icons/down.png') etc

Hypnosphi · 2018-04-02T09:49:32Z

Anyway, it's weird that you have to change the path, assuming that your files stay in same location. Can you share some minimal reproduction part of your project on GitHub so that I could debug it myself?

allangrds · 2018-04-02T14:57:31Z

myProject/src
├── client
│   ├── App.css
│   ├── App.js
│   ├── atoms
│   │   ├── Button
│   │   │   ├── index.css
│   │   │   └── index.js
├── fonts
│   ├── Roboto-Regular.woff
├── helpers
│   ├── http.js
│   └── request.js
├── images
│   └── icons
│       ├── down.png
│       └── up.png
├── index.html
├── index.js
├── stories
│   ├── Button
│   │   ├── index.js
│   │   └── style.css
└── styles
    ├── generic
    │   ├── normalize.css
    │   └── others.css
    ├── index.css
    └── settings
        ├── colors.css
        └── fonts.css

myProject/.storybook
├── config.js
└── webpack.config.js

Hypnosphi · 2018-04-02T16:00:18Z

Sorry, I meant in a repo. I can't debug just by folder structure

allangrds · 2018-04-03T12:15:57Z

I solved my problem, following the code:

.storybook/webpack.config.js

const path = require('path');
const paths = require('./paths.js')
const includePath = path.resolve(__dirname, '..');

module.exports = {
  resolve: {
    alias: {
      atoms: path.resolve(__dirname, '../src/client/atoms/'),
      client: path.resolve(__dirname, '../src/client/'),
      fonts: path.resolve(__dirname, '../src/fonts/'),
      helpers: path.resolve(__dirname, '../src/helpers/'),
      images: path.resolve(__dirname, '../src/images/'),
      molecules: path.resolve(__dirname, '../src/client/molecules/'),
      stories: path.resolve(__dirname, '../src/stories/'),
      styles: path.resolve(__dirname, '../src/styles/'),
      tests: path.resolve(__dirname, '../src/tests/'),
    },
    extensions: ['.js', '.jsx', '.css', '.png', '.jpg', '.gif', '.jpeg'],
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              modules: 1,
              localIdentName: '[path]-[name]-[local]',
            },
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              ident: 'postcss',
              plugins: () => [
                require('postcss-import'),
                require('postcss-cssnext')({
                  features: {
                    customProperties: false,
                  },
                }),
              ],
            },
          },
        ],
        include: paths.appSrc,
      },
      {
        test: /\.(jpg|png|gif|jpeg)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 65000,
          },
        },
      },
      {
        test: /\.woff$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]',
            outputPath: 'fonts',
            publicPath: '../fonts',
          },
        },
      },
    ],
  },
};

path.js

const path = require('path')
const fs = require('fs')
const url = require('url')

const appDirectory = fs.realpathSync(process.cwd())
const resolveApp = relativePath => path.resolve(appDirectory, relativePath)

const envPublicUrl = process.env.PUBLIC_URL

function ensureSlash (path, needsSlash) {
  const hasSlash = path.endsWith('/')

  if (hasSlash && !needsSlash) {
    return path.substr(path, path.length - 1)
  }

  if (!hasSlash && needsSlash) {
    return `${path}/`
  }

  return path
}

const getPublicUrl = appPackageJson =>
  envPublicUrl || require(appPackageJson).homepage

function getServedPath (appPackageJson) {
  const publicUrl = getPublicUrl(appPackageJson)

  const servedUrl =
    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/')
  return ensureSlash(servedUrl, true)
}

module.exports = {
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
  appBuild: resolveApp('public/'),
  appIndexJs: resolveApp('src/index.js'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  yarnLockFile: resolveApp('yarn.lock'),
  appNodeModules: resolveApp('node_modules'),
  publicUrl: getPublicUrl(resolveApp('package.json')),
  servedPath: getServedPath(resolveApp('package.json')),
}

I put a file with all my paths, and use in storybook webpack config file.

nnennajohn · 2018-04-17T05:54:39Z

@allangrds You are awesome!!! Thank you! Searched all day for this. :)

jdevries3133 · 2021-03-31T17:59:13Z

For anyone finding themselves here more recently, storybook no longer has a .storybook/webpack.config.js file. Instead, if you want to hook into the Webpack configuration to add your own file path alias or otherwise, you can do it as described in their documentation here

For example, I was able to bring all my project aliases into storybook quite easily like this:

// .storybook/main.js

const myProjectConfig = require("../webpack.config");

module.exports = {
  webpackFinal: (config) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: myProjectConfig.resolve.alias,
      },
    };
  },
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
};

shilman · 2021-03-31T22:59:44Z

@jdevries3133 did this break in 6.2? We're definitely recommending the .storybook/main.js configuration, but I thought we were still supporting the .storybook/webpack.config.js configuration until 7.0. It's possible that we broke it as part of the webpack5 refactor, in which case that's a pretty serious bug. Please let me know!

jdevries3133 · 2021-04-01T12:22:28Z

@shilman The .storybook/webpack.config.js file isn't there. I didn't try adding it... it seems like extending your managed configuration was a more sensible pattern anyway.

I'm on version 6.2.1.

stephiescastle · 2021-04-01T15:24:06Z

@shilman Not sure if this is related, but previously I was able to resolve aliases in an image source. With the 6.2.1 update, this breaks, and I get <img src="[object Module]" />.

I configured my aliases in main.js:

webpackFinal: async (config, { configType }) => {
   config.resolve.alias['@'] = path.dirname(path.resolve(__dirname))
}

<img src="@/images/my-image.svg" />

Turns into:

<img src="[object Module]" />

The alias is working otherwise (able to import components using the same alias). And this was working in storybook as recently as v6.1.21

shilman · 2021-04-01T15:42:39Z

@stephiescastle do you happen to have a repro repo we can look at? we're also looking at an alias-related issue in #14423 with different symptoms

stephiescastle · 2021-04-01T15:47:14Z

@shilman thanks for the response, I'll set one up and get back to you.

stephiescastle · 2021-04-01T16:33:07Z

@shilman repro repo here:
https://github.com/stephiescastle/repro-storybook-alias

The main branch is storybook 6.2.1 with the broken image src alias.

Branch https://github.com/stephiescastle/repro-storybook-alias/tree/test/storybook-6.1.21 downgrades storybook to 6.1.21 and the image src alias works.

npm i
npm run storybook

shamilovtim · 2021-04-01T21:29:07Z

For anyone finding themselves here more recently, storybook no longer has a .storybook/webpack.config.js file. Instead, if you want to hook into the Webpack configuration to add your own file path alias or otherwise, you can do it as described in their documentation here

For example, I was able to bring all my project aliases into storybook quite easily like this:
// .storybook/main.js

const myProjectConfig = require("../webpack.config");

module.exports = {
  webpackFinal: (config) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: myProjectConfig.resolve.alias,
      },
    };
  },
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
};

I think its still their own webpack config? It's just served from main.js. Not really much different from what you were already describing.

shilman · 2021-04-05T14:09:15Z

@stephiescastle thanks so much for the awesome repro. turns out it's not an alias issue but an issue with the default webpack file-loader settings! fix will be merged & released shortly.

shilman · 2021-04-05T14:39:20Z

Hurrah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.3 containing PR #14480 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

stephiescastle · 2021-04-06T01:22:59Z

@shilman awesome! v6.2.3 fixes the issue for me :)

Hypnosphi added the configuration babel / webpack label Apr 1, 2018

Hypnosphi added the question / support label Apr 1, 2018

allangrds changed the title ~~Resolve alias in webpack confiG~~ Resolve alias in webpack config Apr 2, 2018

allangrds closed this as completed Apr 3, 2018

oluoluoxenfree mentioned this issue Sep 5, 2019

Using webpack aliases in simorgh bbc/simorgh#3542

Closed

3 tasks

This was referenced Apr 5, 2021

Newest release 6.2.0 causes issues with webpack4 aliases #14423

Closed

Core: Fix file-loader options for ESM compat #14480

Merged

nick-stebbings mentioned this issue Jun 10, 2022

Storybook module resolution HabFract/frontend#12

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Resolve alias in webpack config #3339

Resolve alias in webpack config #3339

allangrds commented Apr 1, 2018 •

edited

Hypnosphi commented Apr 1, 2018 •

edited

allangrds commented Apr 2, 2018

Hypnosphi commented Apr 2, 2018 •

edited

Hypnosphi commented Apr 2, 2018

allangrds commented Apr 2, 2018

Hypnosphi commented Apr 2, 2018

allangrds commented Apr 3, 2018

nnennajohn commented Apr 17, 2018

jdevries3133 commented Mar 31, 2021

shilman commented Mar 31, 2021 •

edited

jdevries3133 commented Apr 1, 2021 •

edited

stephiescastle commented Apr 1, 2021 •

edited

shilman commented Apr 1, 2021

stephiescastle commented Apr 1, 2021

stephiescastle commented Apr 1, 2021

shamilovtim commented Apr 1, 2021

shilman commented Apr 5, 2021

shilman commented Apr 5, 2021

stephiescastle commented Apr 6, 2021

Resolve alias in webpack config #3339

Resolve alias in webpack config #3339

Comments

allangrds commented Apr 1, 2018 • edited

Tools version

Problem

My code

Extra explication

Who to contact

Hypnosphi commented Apr 1, 2018 • edited

allangrds commented Apr 2, 2018

Hypnosphi commented Apr 2, 2018 • edited

Hypnosphi commented Apr 2, 2018

allangrds commented Apr 2, 2018

Hypnosphi commented Apr 2, 2018

allangrds commented Apr 3, 2018

nnennajohn commented Apr 17, 2018

jdevries3133 commented Mar 31, 2021

shilman commented Mar 31, 2021 • edited

jdevries3133 commented Apr 1, 2021 • edited

stephiescastle commented Apr 1, 2021 • edited

shilman commented Apr 1, 2021

stephiescastle commented Apr 1, 2021

stephiescastle commented Apr 1, 2021

shamilovtim commented Apr 1, 2021

shilman commented Apr 5, 2021

shilman commented Apr 5, 2021

stephiescastle commented Apr 6, 2021

allangrds commented Apr 1, 2018 •

edited

Hypnosphi commented Apr 1, 2018 •

edited

Hypnosphi commented Apr 2, 2018 •

edited

shilman commented Mar 31, 2021 •

edited

jdevries3133 commented Apr 1, 2021 •

edited

stephiescastle commented Apr 1, 2021 •

edited