search

nrwl / nx

Smart Monorepos · Fast CI
https://nx.dev
MIT License
23.48k stars 2.34k forks source link

Support SVGR also within Storybook #2859

Closed trumbitta closed 4 years ago

trumbitta commented 4 years ago

Expected Behavior

Webpack conf generated by the Storybook schematics should have the same conf for SVGR the main webpack conf has.

Current Behavior

Nx-generated Storybook conf doesn't support SVGR out of the box.

Context

Please provide any relevant information about your setup:

And this is how I managed to make it work:

    // Workaround for https://github.com/nrwl/nx/issues/2320
    const path = require('path');
    config.resolve.alias['@myscope/icons'] = path.resolve(__dirname, '../../icons/src/lib/');

    // Disable default handling of SVGs
    const svgRuleIndex = config.module.rules.findIndex(rule => {
      const { test } = rule;

      return test.toString().startsWith('/\\.(svg|ico');
    });
    config.module.rules[svgRuleIndex].test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;

    // Add same SVGR configuration as main Nx
    // See: https://github.com/jaysoo/nx/blob/20885513ae4fe4f03a64bb738d4816d8ed7c77c6/packages/react/plugins/webpack.ts
    config.module.rules.push(
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        loader: 'url-loader',
        options: {
          limit: 10000, // 10kB
          name: '[name].[hash:7].[ext]',
        },
      },
      {
        test: /\.svg$/,
        oneOf: [
          // If coming from JS/TS file, then transform into React component using SVGR.
          {
            issuer: {
              test: /\.[jt]sx?$/,
            },
            use: [
              '@svgr/webpack?-svgo,+titleProp,+ref![path]',
              {
                loader: 'url-loader',
                options: {
                  limit: 10000, // 10kB
                  name: '[name].[hash:7].[ext]',
                },
              },
            ],
          },
          // Fallback to plain URL loader.
          {
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 10000, // 10kB
                  name: '[name].[hash:7].[ext]',
                },
              },
            ],
          },
        ],
      },
    );
mandarini commented 4 years ago

Hi there @trumbitta ! Thanks for filing an issue!

Please take a look at issue #3255 . I think that your issue might be related to that, and it will possibly be fixed after the Nx upgrade to Storybook 6, which is still in the works.

Please let me know if this helps, or if you need any further assistance at the moment!

mandarini commented 4 years ago

Hi @trumbitta ! I believe your issue should be solved in the next release, fixed by PR #3611 .

If you take a look at the new webpack.config.js template, we are adding svgr support out of the box now.

I will close this issue now, but let me know if your issue persists!

trumbitta commented 4 years ago

@mandarini oh nice! Thank you! These days I'm working on a different part of the monorepo, but I will update it shortly after the next release!

trumbitta commented 4 years ago

Hi @mandarini !

I'm updating my monorepo to Nx 10.3 and StoryBook to v6 and I found this config in the autogenerated webpack.config.js :D

I'm reporting that in order to make it work with MDX, which I switched my stories to after writing this workaround, I had to modify this part:

issuer: {
  test: /\.[jt]sx?$/,
},

to:

issuer: {
  test: /\.[jtm][sd]x?$/,
},

Since the original workaround comes from the SVGR config for webpack that Nx used back when I submitted this issue, maybe ya'll want to check also that and see if you want to support MDX out of the box :)

trumbitta commented 4 years ago

I also had to add this rollup.config.js to make my components lib build into a publishable library:

/* eslint-disable @typescript-eslint/no-var-requires */
module.exports = (config) => {
  const svgr = require('@svgr/rollup').default;
  const url = require('@rollup/plugin-url');

  return {
    ...config,
    plugins: [
      ...config.plugins,
      url(),
      svgr({
        svgo: false,
        ref: true,
        titleProp: true,
      }),
    ],
  };
};
github-actions[bot] commented 1 year ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.