Newest release 6.2.0 causes issues with webpack4 aliases

Describe the bug The following setup:

storybook v6.1.20
@storybook/react v6.1.21
webpack 4.44.2
webpack-cli 4.3.1
webpack-dev-server 3.11.0

with the following .storybook/main.js:

const path = require('path');
const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-docs",
    "@storybook/addon-controls",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
    '@etchteam/storybook-addon-status/register'
  ],

  webpackFinal: async (config, { configType }) => {
    config.module.rules = [
      {
        test: /\.md$/,
        use: {
          loader: 'raw-loader'
        }
      },
      {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader',
           options: {
             presets: ['@babel/preset-env'],
             plugins: ['@babel/plugin-transform-react-jsx',
                       '@babel/plugin-proposal-class-properties' ]
           }
         }
       },
       {
         test: /\.(css|scss)$/,
         use: ['style-loader', 'css-loader', 'sass-loader'],
         include: path.resolve(__dirname, '../src')
       },
       {
         test: /\.(png|jpe?g|svg|gif|woff|eot|woff2|ttf)$/i,
         use: [ 'url-loader' ]
       }
    ];

    config.module.rules.push({
      // 2a. Load `.stories.mdx` / `.story.mdx` files as CSF and generate
      //     the docs page from the markdown
      test: /\.(stories|story)\.mdx$/,
      use: [
        {
          loader: 'babel-loader',
          // may or may not need this line depending on your app's setup
          options: {
            plugins: ['@babel/plugin-transform-react-jsx'],
          },
        },
        {
          loader: '@mdx-js/loader',
          options: {
            compilers: [createCompiler({})],
          },
        },
      ],
    });

    config.resolve.alias = {
      '@Assets': path.resolve(__dirname, '../src/assets/')
    };

    return config;
  }
}Works as I would expect when I run `yarn start`. However, when I upgrade to storybook v6.2.1 using `npx upgrade sb@latest`, it produces a series of errors similar to the following:

ModuleNotFoundError: Module not found: Error: Can't resolve './@Assets/fonts/WorkSans-Regular.ttf' in '/home/scottj/Source/foamfactory/github/aegir/src/components/04-Organs'
    at /home/scottj/Source/foamfactory/github/aegir/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compilation.js:925:10
    at /home/scottj/Source/foamfactory/github/aegir/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModuleFactory.js:401:22
    at /home/scottj/Source/foamfactory/github/aegir/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModuleFactory.js:130:21
    at /home/scottj/Source/foamfactory/github/aegir/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModuleFactory.js:224:22
    at /home/scottj/Source/foamfactory/github/aegir/node_modules/neo-async/async.js:2830:7
    at /home/scottj/Source/foamfactory/github/aegir/node_modules/neo-async/async.js:6877:13
    at /home/scottj/Source/foamfactory/github/aegir/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModuleFactory.js:214:25
    at /home/scottj/Source/foamfactory/github/aegir/node_modules/@storybook/builder-webpack4/node_modules/enhanced-resolve/lib/Resolver.js:213:14
    at /home/scottj/Source/foamfactory/github/aegir/node_modules/@storybook/builder-webpack4/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/scottj/Source/foamfactory/github/aegir/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /home/scottj/Source/foamfactory/github/aegir/node_modules/@storybook/builder-webpack4/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at /home/scottj/Source/foamfactory/github/aegir/node_modules/@storybook/builder-webpack4/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/scottj/Source/foamfactory/github/aegir/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /home/scottj/Source/foamfactory/github/aegir/node_modules/@storybook/builder-webpack4/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/scottj/Source/foamfactory/github/aegir/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at /home/scottj/Source/foamfactory/github/aegir/node_modules/@storybook/builder-webpack4/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
resolve './@Assets/fonts/WorkSans-Regular.ttf' in '/home/scottj/Source/foamfactory/github/aegir/src/components/04-Organs'
  using description file: /home/scottj/Source/foamfactory/github/aegir/package.json (relative path: ./src/components/04-Organs)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /home/scottj/Source/foamfactory/github/aegir/package.json (relative path: ./src/components/04-Organs/@Assets/fonts/WorkSans-Regular.ttf)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/scottj/Source/foamfactory/github/aegir/src/components/04-Organs/@Assets/fonts/WorkSans-Regular.ttf doesn't exist
      .web.mjs
        Field 'browser' doesn't contain a valid alias configuration
        /home/scottj/Source/foamfactory/github/aegir/src/components/04-Organs/@Assets/fonts/WorkSans-Regular.ttf.web.mjs doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /home/scottj/Source/foamfactory/github/aegir/src/components/04-Organs/@Assets/fonts/WorkSans-Regular.ttf.mjs doesn't exist
      .web.js
        Field 'browser' doesn't contain a valid alias configuration
        /home/scottj/Source/foamfactory/github/aegir/src/components/04-Organs/@Assets/fonts/WorkSans-Regular.ttf.web.js doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/scottj/Source/foamfactory/github/aegir/src/components/04-Organs/@Assets/fonts/WorkSans-Regular.ttf.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /home/scottj/Source/foamfactory/github/aegir/src/components/04-Organs/@Assets/fonts/WorkSans-Regular.ttf.json doesn't exist
      .web.jsx
        Field 'browser' doesn't contain a valid alias configuration
        /home/scottj/Source/foamfactory/github/aegir/src/components/04-Organs/@Assets/fonts/WorkSans-Regular.ttf.web.jsx doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        /home/scottj/Source/foamfactory/github/aegir/src/components/04-Organs/@Assets/fonts/WorkSans-Regular.ttf.jsx doesn't exist
      as directory
        /home/scottj/Source/foamfactory/github/aegir/src/components/04-Organs/@Assets/fonts/WorkSans-Regular.ttf doesn't exist

It looks as though it can no longer resolve @Assets. I have verified that my webpack is still using webpack v4, so I don’t believe this is an issue with a webpack upgrade. My suspicion is that this is a backwards compatibility issue as, I believe storybook expects me to be using webpack v5 (which may not allow for this syntax for aliases). However, I’m not 100% sure about this because I’m not a webpack expert. 😃

┆Issue is synchronized with this Asana task by Unito

[jwir3]

@shilman You should be able to access my repository here: https://github.com/FoamFactory/aegir-dupe

Sorry I didn’t have a chance to prune it down to just the basics of reproducing this issue, but I’ll give you a description of the repository. It’s a storybook instance, with a number of components, but it also builds as a standalone npm library so it can be imported into a react application.

To build/run the storybook instance, run yarn install followed by yarn start. To build the library, run yarn install, followed by yarn build.

The library building is the reason we have to set aliases for some of our assets. Namely, the webpack configuration files create the alias @Assets, which resolves to src/assets. It seems as though the complaint from storybook is that it can’t find the fonts that I’m using, namely Work Sans. I think, though, that this is just a symptom of the fact that the @Assets alias isn’t getting resolved properly by webpack, and the Work Sans instance is just the first instance of that @Assets path that’s trying to be resolved.

One more note - this is setup, as is, to work with storybook v 6.1.21. Thus, it should build and run without a hitch as-is. If you want to test storybook v6.2.1, I recommend using the upgrade method that’s specified by storybook - that is npx upgrade sb@latest, and then try to install/run.

Thanks for helping me look into this!

[jwir3]

I found the issue. As suspected, it was an issue with my configuration. When importing, I was using @import '@Assets/<path> instead of @import '~@Assets/<path>. I’m not quite sure why this only happened with the newer version of storybook, but my suspicion is that webpack had a bug that was since upgraded, resulting in a kind of “quirks mode” for this situation, and I was relying on this quirk.

Thanks to everyone for the suggestions.