Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Override SVG Loader in custom Webpack #6758

Closed
rwieruch opened this issue May 10, 2019 · 8 comments
Closed

Override SVG Loader in custom Webpack #6758

rwieruch opened this issue May 10, 2019 · 8 comments

Comments

@rwieruch
Copy link
Contributor

rwieruch commented May 10, 2019

Not sure whether this is explained somewhere, but I had to override the SVG loader used by Storybook to integrate SVG. In case someone stumbles upon this issue, here is what I have done in my custom Webpack config:

module.exports = ({ config }) => {
  // Don't use Storybook's default SVG Configuration
  config.module.rules = config.module.rules.map(rule => {
    if (rule.test.toString().includes('svg')) {
      const test = rule.test
        .toString()
        .replace('svg|', '')
        .replace(/\//g, '');
      return { ...rule, test: new RegExp(test) };
    } else {
      return rule;
    }
  });

  config.module.rules.push(
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader'],
    },
    {
      test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
      use: ['file-loader'],
    },
    {
      test: /stories\.(js|jsx)?$/,
      loaders: [require.resolve('@storybook/addon-storysource/loader')],
      enforce: 'pre',
    },
    // Use SVG Configuration for SVGR yourself
    {
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    },
  );

  return config;
};

In case there is another approach to this, please leave a comment. Anyway, just thought this may help someone who runs into the same thing.

@hazzo
Copy link

hazzo commented May 24, 2019

Thanks for the advice but I was having still problems because the generated regex was a string and with an extra \ and it could not load some fonts.

Here is my approach:

config.module.rules = config.module.rules.map(rule => {
    if (rule.test.toString().includes('svg')) {
      const test = rule.test.toString().replace('svg|', '').replace(/\//g, '')
      return { ...rule, test: new RegExp(test) }
    } else {
      return rule
    }
  })

It is actually working in conjunction with vue-svg-loader

@rwieruch
Copy link
Contributor Author

rwieruch commented May 24, 2019

Thanks for sharing! Updated my comment above.

One thing I forgot to mention: I had the same problem in Gatsby.js. However, there it is neatly solved with their plugin approach. There exists one plugin which just deals with the SVGR integration. Maybe it would be great to have such approach for Storybook as well. CC @shilman

@shilman
Copy link
Member

shilman commented May 25, 2019

@rwieruch we just started to release presets for this kind of thing.

here's the first one: https://www.npmjs.com/package/@storybook/preset-typescript

and here's the docs: #5333

Any interest in writing a preset-svgr?

@rwieruch
Copy link
Contributor Author

Any interest: yes. But lack of time :( I will ask around in my React community! I guess it's a good issue for developers new to open source.

@rwieruch rwieruch reopened this May 27, 2019
@github-actions
Copy link
Contributor

Automention: Hey @igor-dv @ndelangen, you've been tagged! Can you give a hand here?

@stale
Copy link

stale bot commented Jun 26, 2019

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

@stale
Copy link

stale bot commented Aug 3, 2019

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

@stale stale bot added the inactive label Aug 3, 2019
@stale
Copy link

stale bot commented Sep 2, 2019

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants