New custom webpack customization hook doesn't act the same as old version

[liorgreenb]

Describe the bug
I tried to migrate my storybook to work with the new main.js configuration, part of it was moving the webpack.config.js be the webpack property in the main.js file.

Overall, i tried to change the configuration with .svg files, which storybook uses file-loader and I want to use @svgr/webpack or svg-inline-loader.

Previously, i changed the loader rule as mentioned here:
#6188 (comment)

Using the 'webpack' function in main js:
The inputed config i got did NOT have the file loader module rule (seems to be added after customization), so it didn't work.

Using the old separate webpack.config.js:
Seems to receive the full storybook webpack config, to it did work.

To Reproduce
Try to change the configuration for svg files using

module.exports = {
    stories: ["**/*.stories.*"],
    addons: [
        '@storybook/addon-actions',
        '@storybook/addon-links',
    ],
   webpack: async config => {
  const fileLoaderRule = config.module.rules.find(rule => rule.test.test('.svg'));
  fileLoaderRule.exclude = /\.svg$/;
  config.module.rules.push({
    test: /\.svg$/,
    use: ["@svgr/webpack", "url-loader"],
  });
  return config;
};
};

Now importing a .svg file should be imported as a react component (or a string if using svg-inline-loader instead of using file-loader and reciving a url.

Expected behavior
I expected to receive the final storybook webpack configuration to allow full modification, making the svg loader changeable.

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
  Binaries:
    Node: 8.10.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.13.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 79.0.3945.117
    Firefox: 68.0.1
    Safari: 12.1.1
  npmPackages:
    @storybook/addon-actions: 5.3.0 => 5.3.0 
    @storybook/addon-knobs: 5.2.8 => 5.2.8 
    @storybook/addon-links: 5.3.0 => 5.3.0 
    @storybook/addons: 5.3.0 => 5.3.0 
    @storybook/react: 5.3.0 => 5.3.0 

[viggyfresh]

Experienced a similar issue...when looking at what Storybook logs upon startup, it seems like the webpack configuration inside main.js isn't respected? Storybook still logs "using default Webpack config" instead of "full-control mode"

[ndelangen]

@liorgreenb please change the webpack property to webpackFinal can you report if it works correctly then?

[chris-pearce]

I'm experiencing this issue with both webpack and webpackFinal property names.

[chris-pearce]

I just managed to get it working, here's my config:

webpackFinal: config => {
  // Remove SB's `/\.css$/,` rule as we replace it with our own that works on
  // CSS files with the `.module.css` extension for enabling CSS Modules.
  config.module.rules = config.module.rules.filter(f => f.test.toString() !== '/\\.css$/');

  config.module.rules.push({
    test: FILENAME_REGEX,
    sideEffects: true,
    include: path.resolve(__dirname, paths.root),
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          importLoaders: 1,
          localsConvention: 'camelCase',
          modules: { localIdentName: LocalIndentName.DEV },
        },
      },
      'postcss-loader',
    ],
  });

  return config;
},

webpack property doesn't work.

Another issue I'm now facing (on 5.3.2) is react-docgen doesn't work at all, i.e., no component description or prop types coming through.

[liorgreenb]

@ndelangen
It works well with webpackFinal, just saw the docs were updated already, thanks.

[ndraiman]

Does not work for me with webpackFinal proprty.
Fails to compile scss

// main.js
module.exports = {
    stories: ['../**/*.stories.ts'],
    addons: [
        '@storybook/addon-actions',
        '@storybook/addon-links',
        '@storybook/addon-notes',
        '@storybook/addon-knobs',
        '@storybook/addon-options'
    ],
    webpackFinal: async (config, { configType }) => {
        config.module.rules.unshift({
            test: /\.scss$/,
            loaders: ['raw-loader', 'sass-loader']
        });

        return config;
    }
};

notice the Using default Webpack setup. in the terminal output:

➜ yarn storybook
yarn run v1.21.1
$ start-storybook -p 6006
info @storybook/angular v5.3.9
info
info => Loading presets
info => Loading presets
info => Loading custom manager config.
info => Loading config/preview file in "./.storybook".
info => Adding stories defined in ".storybook/main.js".
info => Found custom tsconfig.json
info => Using default Webpack setup.
info => Using angular project 'sideproject-client' for configuring Storybook.
info => Loading angular-cli config.
info => Get angular-cli webpack config.
Starting type checking service...
Using 1 worker with 2048MB memory limit

[ndelangen]

I'd be happy to take a look @nexxado.

It'd be really helpful if you could provide a reproduction repo for me to checkout 🙇

[ndraiman]

Can't seem to replicate it in a new repo.
I guess i'll try reintroducing storybook from scratch into our project.

[arb000r]

Having issues with @svgr/webpack here too. Anyone get it working?

[stefanbruvik]

Got it working with @svgr/webpack using webpackFinal:

  webpackFinal: config => {
    config.module.rules = config.module.rules.map(rule => {
      if (rule.test.toString().indexOf("svg") !== -1) {
        rule.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;
      }
      return rule;
    });

    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"]
    });

    return config;
  }

The issue is that there is already an existing rule for svg, which is using file-loader. So, removing "svg" from that rule test, then adding a separate svg rule using @svgr/webpack fixes it.

[B3Kay]

I get an error
ERR! TypeError: Cannot read property 'toString' of undefined
at if (rule.test.toString().indexOf("svg") !== -1) {
Why is that?

[Rykus0]

Having a similar issue as B3Kay - worked until I upgraded from 6.2.x to 6.3.x - in my case failing on rule.test.test

    webpackFinal: async (config, { configType }) => {
    const rules = config.module.rules;

    // modify storybook's file-loader rule to avoid conflicts with your inline svg
    const svgLoaderRule = rules.find(rule => rule.test.test('.svg'));
    svgLoaderRule.exclude = /\.svg$/;

    rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    config.module.rules = rules;

    // Return the altered config
    return config;
  },

[Rykus0]

Problem was that the rule was not there anymore, so I needed to account for that case.

  webpackFinal: config => {
    const rules = config.module.rules;

    // modify storybook's file-loader rule to avoid conflicts with your inline svg
    const svgLoaderRule = rules.find(rule => rule.test && rule.test.test('.svg'));
    if (svgLoaderRule) {
      svgLoaderRule.exclude = /\.svg$/;
    }

    rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    config.module.rules = rules;

    // Return the altered config
    return config;
  },