Newest release 6.2.0 causes issues with webpack4 aliases #14423

jwir3 · 2021-03-31T22:13:14Z

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

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

shilman · 2021-03-31T22:46:57Z

Was this working in a previous version of Storybook? If so, which one?

Also, do you have a repro repo you can share?

jwir3 · 2021-03-31T23:30:26Z

Hi Michael: Yes, it is currently working in storybook v 6.1.21. I can prepare a link so you can download the repo, but I'm away from my computer at the moment, so it'll be tomorrow. Thanks for the quick response. ~Scott

…

On Wed, Mar 31, 2021, 5:47 PM Michael Shilman ***@***.***> wrote: Was this working in a previous version of Storybook? If so, which one? Also, do you have a repro repo you can share? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#14423 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHTN4R7NLWVX7ABX4AFQTTTGOQ67ANCNFSM42FVHJAQ> .

shilman · 2021-03-31T23:38:51Z

thanks @jwir3 🙏 would love to get this figured out!

jwir3 · 2021-04-01T14:39:46Z

@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!

shilman · 2021-04-05T04:43:28Z

Another repro here from @stephiescastle 🙏 #3339 (comment)

shilman · 2021-04-06T11:18:02Z

@jwir3 we looked at your repro but we saw a lot of different babel versions and thought your problems might be related to that. Then we looked at @stephiescastle's repro and found a bug in the file-loader settings (NOT aliases) and fixed that in v6.2.3. Can you try upgrading and see if that might fix your issue as well?

npx sb upgrade

jwir3 · 2021-04-06T13:44:48Z

Sure. I'm not sure what I should do to fix the babel issues you mentioned, do you have suggestions? ~Scott

…

On Tue, Apr 6, 2021, 6:20 AM Michael Shilman ***@***.***> wrote: @jwir3 <https://github.com/jwir3> we looked at your repro but we saw a lot of different babel versions and thought your problems might be related to that. Then we looked at @stephiescastle <https://github.com/stephiescastle>'s repro and found a bug in the file-loader settings (NOT aliases) and fixed that in v6.2.3. Can you try upgrading and see if that might fix your issue as well? npx sb upgrade — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#14423 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHTN4VNP6UMFARYT6BOGVLTHLU6PANCNFSM42FVHJAQ> .

ndelangen · 2021-04-07T08:13:45Z

Hello scott (@jwir3) I'm not sure what's going on within sass-loader that the alias doesn't seem to working right.. I was able to get storybook to work on your repro here: FoamFactory/aegir-dupe#1

I hope this helps you somewhat..

jwir3 · 2021-04-11T16:06:03Z

@jwir3 we looked at your repro but we saw a lot of different babel versions and thought your problems might be related to that. Then we looked at @stephiescastle's repro and found a bug in the file-loader settings (NOT aliases) and fixed that in v6.2.3. Can you try upgrading and see if that might fix your issue as well?
npx sb upgrade

Hi @shilman:

Unfortunately, it doesn't look as though this helped. I'm getting the same errors after upgrading using npx sb@latest upgrade with the aforementioned repository I posted. It's possible that the babel versions are causing the problems, so I will look into that over the next few days.

@ndelangen I'm going to try your suggestion, but I suspect that this won't work in tandem with the yarn build settings for webpack that we have (I could be wrong about this, though, I haven't tried it yet). We were unable to use a relative file path without the alias because, when building the library to be used in another project, webpack tries to utilize relative paths relative to the file doing the importing of the scss file, rather than relative to the .scss file itself.

jwir3 · 2021-04-11T16:09:39Z

@ndelangen Yeah, unfortunately, with the changes you made, when I run yarn build, I now get the following:

ERROR in ./src/components/04-Organs/Ingredients.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/04-Organs/Ingredients.scss)
Module not found: Error: Can't resolve '../fonts/WorkSans-Regular.ttf' in '/home/scottj/Source/aegir-dupe/src/components/04-Organs'
 @ ./src/components/04-Organs/Ingredients.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/04-Organs/Ingredients.scss) 11:36-76
 @ ./src/components/04-Organs/Ingredients.scss
 @ ./src/components/04-Organs/Ingredients.js
 @ ./src/index.js

This was the reason we used the aliases in the .scss files. I am open to any suggestions, though... I'm by no means a webpack expert, so I don't quite know what the solution to something like this would be.

I do appreciate the suggestions, though! Thank you for looking in to this.

ndelangen · 2021-04-12T15:58:36Z

Seems like the imports in scss are broken honestly:
https://github.com/ndelangen/aegir-dupe/blob/master/src/components/04-Organs/Ingredients.scss#L3

imports

https://github.com/ndelangen/aegir-dupe/blob/master/src/assets/styles/typography.scss#L23

which imports

https://github.com/ndelangen/aegir-dupe/tree/master/src/assets/fonts/...

but the relative import from typography.scss is resolved relative to Ingredients.scss.. this makes no sense to do at all.

Surely this is a bug in the webpack / loader setup; I can't imagine that's intended behavior.
My suggestion would be to maybe try upgrading the sass|style|css loaders?

jwir3 · 2021-04-19T20:27:40Z

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.

shilman added configuration babel / webpack needs reproduction question / support labels Mar 31, 2021

shilman added this to the 6.2 stabilization milestone Mar 31, 2021

shilman added bug P0 and removed question / support labels Mar 31, 2021

shilman removed the needs reproduction label Apr 1, 2021

shilman mentioned this issue Apr 1, 2021

Resolve alias in webpack config #3339

Closed

shilman modified the milestones: 6.2 stabilization, 6.3 webpack Apr 15, 2021

jwir3 closed this as completed Apr 19, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Newest release 6.2.0 causes issues with webpack4 aliases #14423

Newest release 6.2.0 causes issues with webpack4 aliases #14423

jwir3 commented Mar 31, 2021 •

edited by sync-by-unito bot

shilman commented Mar 31, 2021

jwir3 commented Mar 31, 2021 via email

shilman commented Mar 31, 2021

jwir3 commented Apr 1, 2021

shilman commented Apr 5, 2021 •

edited

shilman commented Apr 6, 2021

jwir3 commented Apr 6, 2021 via email

ndelangen commented Apr 7, 2021

jwir3 commented Apr 11, 2021

jwir3 commented Apr 11, 2021

ndelangen commented Apr 12, 2021

jwir3 commented Apr 19, 2021

Newest release 6.2.0 causes issues with webpack4 aliases #14423

Newest release 6.2.0 causes issues with webpack4 aliases #14423

Comments

jwir3 commented Mar 31, 2021 • edited by sync-by-unito bot

shilman commented Mar 31, 2021

jwir3 commented Mar 31, 2021 via email

shilman commented Mar 31, 2021

jwir3 commented Apr 1, 2021

shilman commented Apr 5, 2021 • edited

shilman commented Apr 6, 2021

jwir3 commented Apr 6, 2021 via email

ndelangen commented Apr 7, 2021

jwir3 commented Apr 11, 2021

jwir3 commented Apr 11, 2021

ndelangen commented Apr 12, 2021

jwir3 commented Apr 19, 2021

jwir3 commented Mar 31, 2021 •

edited by sync-by-unito bot

shilman commented Apr 5, 2021 •

edited