How to use babel options (.babelrc) for rollup without affecting webpack's babel-loader?

[kintz09]

TL;DR;
A .babelrc config file gets used by babel in Rollup and Webpack. How can one configure a babel plugin in a TSDX project if the babel plugin options need to be different for webpack than rollup?

I'm using TSDX to create a React Typescript component library with Storybook and I'm struggling to add support for SVG's without breaking webpack or rollup. I have a whole write up on the issues faced adding support for SVG to my project in a different discussion, which I will link to here once posted.

The SVGR plugin for rollup did get basic svg imports working, but not as a ReactComponent preventing me from passing any props. Debugging and research led me to find the babel plugin named babel-lugin-named-asset-import which appears to be how the CRA team allows SVG files to be imported as React Components.

I read through the CRA webpack config and saw how they were utilizing the babel plugin with the SVGR plugin to create this SVG component workflow.

I implemented this in my TSDX using a .babelrc config file. Here's the contents of .babelrc:

{
  "plugins": [
    [
      "babel-plugin-named-asset-import",
      {
        "loaderMap": {
          "svg": {
            "ReactComponent": "@svgr/rollup"
          }
        }
      }
    ]
  ]
}

This resolved the rollup compiler error I was receiving. However, I noticed an interested new problem with Storybook and webpack. The SVGR plugin used in the babel config, @svgr/rollup, is specific to rollup, but the .babelrc config gets read and used by both rollup and webpack. As is, I get compiler errors in storybook's webpack process. For babel in webpack, I would need to use the @svgr/webpack plugin.

Anyone have any ideas as to how I can configure a babel plugin in a TSDX project only affecting either Rollup or Webpack?

[kintz09]

Well I ended up getting my SVG files working without this babel plugin. But for anyone else who may be looking into the .babelrc config file affecting both storybook and rollup, I realized that storybook has documentation on multiple ways to modify babel. Modifying storybook's webpack config in the main.js file would only affect storybook as well as creating a .babelrc file in the .storybook directory.

Granted, I didn't find this a solution to my original problem, as whatever I added to the .babelrc file was used by webpack and created many problems. While I could define my own .babelrc file specifically for storybook, I'd need to know the current configuration or storybook will not use the same babel config as whatever comes with storybook.

[aladdin-add]

a workaround is to use .babelrc.js, so you can use process env:

if(process.env.ROLLUP_BUILD){
  module.exports = {// config for rollup}
} else {
  module.exoprts = {// config for webpack or others}
}

this way, you can define the ROLLUP_BUILD in your build scripts:

ROLLUP_BUILD=true rollup