karibash/storybook-addon-swc

Storybook add-on to enable SWC builds.

storybook-addon-swc

Storybook addon that improves build time by building with swc.

🗒 Examples

• webpack4
• webpack5

🚀 Installation

$ npm install -D storybook-addon-swc @swc/core

👏 Getting Started

Edit the .storybook/main.js file and register the addon.

module.exports = {
  addons: [
    'storybook-addon-swc',
  ],
};

🔧 Configurations

Additional configuration options can be passed as needed.

module.exports = {
  addons: [
    {
      name: 'storybook-addon-swc',
      options: {
        enable: true,
        enableSwcLoader: true,
        enableSwcMinify: true,
        swcLoaderOptions: {},
        swcMinifyOptions: {},
      },
    },
  ],
};

Options

Name	Description	Type	Default Value
enable	If set to false, this add-on will be disabled.	boolean	true
enableSwcLoader	If set to false, swc-loader is disabled and babel-loader is used.	boolean	true
enableSwcMinify	If set to false, minify using swc is disabled and minify using conventional terser is used.	boolean	true
swcLoaderOptions	Options for swc loader.	object	see
swcMinifyOptions	Options for swc minify.	object	see

SWC Plugins

The SWC plugins feature is still experimental, but can be used by changing the settings as follows.

module.exports = {
  addons: [
    {
      name: 'storybook-addon-swc',
      options: {
        swcLoaderOptions: {
          jsc: {
            experimental: {
              plugins: [['plugin-name', {}]],
            },
          },
        },
      },
    },
  ],
};

🎓 Alternative

storybook-addon-turbo-build

This add-on replaces babel-loader with esbuild-loader.
It was used as a reference in the development of storybook-addon-swc.

storybook-builder-vite

This builder changes the build system of Storybook from Webpack to Vite.
Vite is very fast because it does not bundle during development.

🤝 Contributing

Contributions, issues and feature requests are welcome.

Feel free to check issues page if you want to contribute.

📝 License

Copyright © 2020 @Karibash.

This project is MIT licensed.

storybook-addon-swc's Issues

Question: Does storybook-addon-swc work when using the command npm run build-storybook?

I'm have the follow setup:

## System:
 - OS: macOS 11.7.1
 - CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
 - Memory: 390.71 MB / 16.00 GB
 - Shell: 5.8 - /bin/zsh
## Binaries:
 - Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
 - npm: 8.14.0 - ~/.nvm/versions/node/v16.13.1/bin/npm

We are using Storybook v6.5.10 and MUI v5

Our devDependencies include the following versions:
"@storybook/addon-a11y": "6.5.10",
"@storybook/addon-actions": "6.5.10",
"@storybook/addon-console": "1.2.3",
"@storybook/addon-docs": "6.5.10",
"@storybook/addon-essentials": "6.5.10",
"@storybook/addon-jest": "6.5.10",
"@storybook/addon-links": "6.5.10",
"@storybook/builder-webpack5": "6.5.10",
"@storybook/manager-webpack5": "6.5.10",
"@storybook/node-logger": "6.5.10",
"@storybook/preset-create-react-app": "4.1.2",
"@storybook/preset-scss": "1.0.3",
"@storybook/react": "6.5.10",
"@storybook/theming": "6.5.10",
"storybook-addon-swc": "^1.1.8",
"webpack": "^5.65.0"

Here are the contents of our .storybook/main.cjs

module.exports = {
  staticDirs: ['../public'],
  stories: [
    '../src/content/*.stories.mdx',
    '../src/components/**/*.stories.mdx',
    '../src/components/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    {
      name: 'storybook-addon-swc',
      options: {
        enable: true,
        enableSwcLoader: true,
        enableSwcMinify: true,
        swcLoaderOptions: {
          isModule: true,
          sourceMaps: false,
          jsc: {
            parser: {
              syntax: 'ecmascript',
              jsx: true
            },
            transform: {
              react: {
                runtime: 'automatic'
              },
            }
          },
        },
        swcMinifyOptions: {},
      },
    },
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
    '@storybook/addon-a11y',
    '@storybook/addon-jest',
    '@etchteam/storybook-addon-status',
  ],
  features: {
    modernInlineRendering: true,
    emotionAlias: false,
    buildStoriesJson: true
  },
  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
  },
};

When I run npm run storybook everything works perfect. I go to a component's docs and click the button "show code" and I'm able to see the sample code to use the component.

When I run npm run build-storybook I have a problem. I go to a component's docs and click the button "show code" and the iframe goes blank with the following browser console message:

ReferenceError: create$5 is not defined
    at ../../node_modules/@storybook/components/dist/esm/syntaxhighlighter-b07b042a.js (709.6e99183f.iframe.bundle.js:1:39853)
    at Function.t (runtime~main.69bd329a.iframe.bundle.js:1:141)
g.error @ 644.63b74eb9.iframe.bundle.js:102

Have you ever experienced this before? Any ideas why?

Thank your time.

Storybook 8 compatibility

Hey @Karibash! I’m reaching out from the SB core team :)

Storybook 8 (our next major release) is coming soon, and it introduces some breaking changes that your addon might need to account for.

We’ve listed all the key changes in a new Storybook 8 migration guide, and we’d encourage you to check it out and see if your addon is impacted.

We also have an addons channel in our Discord community, which we’d like to use to better communicate with addon authors in the future. If you’re not part of the server, consider joining here and message me (@joevaugh4n) so that I can give you the addon creator role! If you’re already in the server, please just ping me and I’ll respond to you there.

Thanks for being a part of our addon community!

Joe

Missing webpack dep in example project package.json files

https://github.com/Karibash/storybook-addon-swc/blob/main/examples/webpack4/package.json
https://github.com/Karibash/storybook-addon-swc/blob/main/examples/webpack5/package.json

The relevant webpack version should be listed... At least for Webpack 5. Without it, you run into this issue.

Broken dependencies

Hi there. I was just trying out this plugin but it seems some dependencies are broken.
Any possible fix?

Cheers

Optional dependency should not be statically imported

Please check

storybook-addon-swc/src/transformers.ts

Line 3 in e8f97e5

import TerserPlugin from 'terser-webpack-plugin';

IMHO, as terser-webpack-plugin is a optional peer dependency you should dynamically require it only when we use terser for minification.

exports is not definied using @storybook/testing-library

Hi,

I have a storybook with some components that make use of Stortybook's play function and they stopped working after I set it up the storybook-addon-swc in the project.

When I open the storybook in the browser, the following error message is being displayed

When I disable the enableSwcLoader setting, the Storybook works again.

Why does it happen? is an expected behavior?

Is it possible to do something to keep using enableSwcMinify enabled? The storybook build happens faster when we use it

---

Here is my configuration:

const path = require('path');
const { StorybookFrontLoaderPlugin } = require('./storybookFrontLoaderPlugin');

module.exports = {
  stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/addon-interactions',
    'storybook-addon-next-router',

    // this will give error
    'storybook-addon-swc',

    // this will work
    // {
    //   name: 'storybook-addon-swc',
    //   options: {
    //     enableSwcLoader: false,
    //   },
    // },
  ],
  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
  },
  staticDirs: ['../public'],
};

Here is a example story:

// MyComponent.stories.tsx
import { ComponentStory } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';

export default {
  title: 'MyComponent',
};

const Component = () => {
  return <input type="text" placeholder="Search..." />;
};

const Template: ComponentStory<typeof Component> = () => {
  return <Component />;
};

export const Main = Template.bind({});

Main.play = async ({ canvasElement }) => {
  const canvas = within(canvasElement);

  const input = canvas.getByPlaceholderText('Search...');

  await userEvent.type(input, 'Foo bar', {
    delay: 100,
  });
};

[Help Wanted] Config SWC compiler with PostCSS, Tailwind and custom alias

Hi,

First of all thanks for your work!,

I have configurated Storybook to use it with PostCSS, Tailwind, custom alias and webpack 5, but now I want to move to SWC. I am tried to configurate it removing Webpack 5 and adding the SWC plugin, but I am reciving a error with PostCSS. Could you help me?

Here is my OLD configuration:

const path = require('path');
const aliasConfig = require('../tsconfig.json');
const pathsNext = aliasConfig.compilerOptions.paths || {};

function getPaths(paths) {
  const pathsSB = {};
  const keys = Object.keys(paths);

  keys.forEach(function (key) {
    const alias = key.replace('/*', '');
    const pathNext = `../${paths[key][0].replace('*', '')}`;

    pathsSB[alias] = path.resolve(__dirname, pathNext);
  });

  return pathsSB;
}

module.exports = {
  webpackFinal: async (config, { configType }) => {
    config.resolve.modules = [path.resolve(__dirname, '..'), 'node_modules'];
    config.resolve.alias = {
      ...config.resolve.alias,
      ...getPaths(pathsNext),
    };
    return config;
  },
  stories: [
    '../components/**/*.stories.mdx',
    '../components/**/*.stories.@(js|jsx|ts|tsx)',
    '../stories/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    {
      /**
       * Fix Storybook issue with PostCSS@8
       * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
       *
       * Fix Storybook issue with CSS Module and PostCSS
       * @see https://github.com/storybookjs/addon-postcss/issues/29
       */
      name: '@storybook/addon-postcss',
      options: {
        styleLoaderOptions: {},
        cssLoaderOptions: {
          modules: true,
          sourceMap: true,
          importLoaders: 1,
        },
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  staticDirs: ['../public', '../assets', '../stories/assets'],
  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
  },
};

Here is my NEW configuration, removed core with Webpack 5 and added SWC plugin:

const path = require('path');
const aliasConfig = require('../tsconfig.json');
const pathsNext = aliasConfig.compilerOptions.paths || {};

function getPaths(paths) {
  const pathsSB = {};
  const keys = Object.keys(paths);

  keys.forEach(function (key) {
    const alias = key.replace('/*', '');
    const pathNext = `../${paths[key][0].replace('*', '')}`;

    pathsSB[alias] = path.resolve(__dirname, pathNext);
  });

  return pathsSB;
}

module.exports = {
  webpackFinal: async (config, { configType }) => {
    config.resolve.modules = [path.resolve(__dirname, '..'), 'node_modules'];
    config.resolve.alias = {
      ...config.resolve.alias,
      ...getPaths(pathsNext),
    };
    return config;
  },
  stories: [
    '../components/**/*.stories.mdx',
    '../components/**/*.stories.@(js|jsx|ts|tsx)',
    '../stories/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    {
      /**
       * Fix Storybook issue with PostCSS@8
       * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
       *
       * Fix Storybook issue with CSS Module and PostCSS
       * @see https://github.com/storybookjs/addon-postcss/issues/29
       */
      name: '@storybook/addon-postcss',
      options: {
        styleLoaderOptions: {},
        cssLoaderOptions: {
          modules: true,
          sourceMap: true,
          importLoaders: 1,
        },
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
    'storybook-addon-swc',
  ],
  staticDirs: ['../public', '../assets', '../stories/assets'],
  framework: '@storybook/react',
};

As I said before I tried to change the builder to SWC, removing core and added the SWC plugin. In the error message I see that Storybook said I am using Webpack 4, maybe I have a bad config. Here is the error:

yarn run v1.22.17
$ start-storybook -p 6006
info @storybook/react v6.4.13
info 
info => Loading presets
info => Serving static files from ././public at /
info => Serving static files from ././assets at /
info => Serving static files from ././stories/assets at /
info => Loading custom manager config
info => Using PostCSS preset with [email protected]
info => Using default Webpack4 setup
info => Loading custom manager config
14% building 34/36 modules 2 active .../project-name/node_modules/@storybook/builder-webpack4/node_modules/webpack/buildin/module.js
info => Using cached manager
webpack built preview 086ae59b40b8b63edbce in 5673ms
✖ ｢wdm｣: Hash: 086ae59b40b8b63edbce
Version: webpack 4.46.0
Time: 5673ms
Built at: 22/03/2022 12:02:17
                    Asset      Size  Chunks                          Chunk Names
       0.iframe.bundle.js   225 KiB       0  [emitted]               
   0.iframe.bundle.js.map   215 KiB       0  [emitted] [dev]         
       1.iframe.bundle.js   186 KiB       1  [emitted]               
   1.iframe.bundle.js.map  88.4 KiB       1  [emitted] [dev]         
       2.iframe.bundle.js  68.5 KiB       2  [emitted]               
   2.iframe.bundle.js.map  53.4 KiB       2  [emitted] [dev]         
       3.iframe.bundle.js  9.14 KiB       3  [emitted]               
   3.iframe.bundle.js.map  6.47 KiB       3  [emitted] [dev]         
       4.iframe.bundle.js  62.1 KiB       4  [emitted]               
   4.iframe.bundle.js.map  48.5 KiB       4  [emitted] [dev]         
       5.iframe.bundle.js   372 KiB       5  [emitted]        [big]  
   5.iframe.bundle.js.map   412 KiB       5  [emitted] [dev]         
       6.iframe.bundle.js  15.7 KiB       6  [emitted]               
   6.iframe.bundle.js.map  16.6 KiB       6  [emitted] [dev]         
              iframe.html  11.7 KiB          [emitted]               
    main.iframe.bundle.js  7.84 MiB    main  [emitted]        [big]  main
main.iframe.bundle.js.map  6.53 MiB    main  [emitted] [dev]         main
Entrypoint main [big] = main.iframe.bundle.js main.iframe.bundle.js.map
[0] multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js 208 bytes {main} [built]
[./.storybook/preview.js-generated-config-entry.js] 3.63 KiB {main} [built]
[./generated-stories-entry.js] 674 bytes {main} [built]
[./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js] 2.99 KiB {main} [built]
[./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js] 3 KiB {main} [built]
[./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js] 3 KiB {main} [built]
[./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js] 3 KiB {main} [built]
[./node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js] 3.04 KiB {main} [built]
[./node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js] 3.04 KiB {main} [built]
[./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js] 3 KiB {main} [built]
[./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js] 3 KiB {main} [built]
[./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js] 3 KiB {main} [built]
[./node_modules/@storybook/core-client/dist/esm/globals/globals.js] 105 bytes {main} [built]
[./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js] 97 bytes {main} [built]
[./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js] 2.99 KiB {main} [built]
    + 1695 hidden modules

ERROR in ./styles/storybook.css (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./styles/storybook.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/Users/user-name/Sites/project-name/node_modules/postcss-loader/dist/index.js:40:24)
 @ ./styles/storybook.css (./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./styles/storybook.css) 2:26-136 53:4-74:5 56:18-128
 @ ./.storybook/preview.js
 @ ./.storybook/preview.js-generated-config-entry.js
 @ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.27 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/dist/cjs/templates/index.ejs] 2.04 KiB {HtmlWebpackPlugin_0} [built]
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/Users/user-name/Sites/project-name/node_modules/postcss-loader/dist/index.js:40:24)
    at /Users/user-name/Sites/project-name/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/user-name/Sites/project-name/node_modules/@storybook/builder-webpack4/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/user-name/Sites/project-name/node_modules/@storybook/builder-webpack4/node_modules/loader-runner/lib/LoaderRunner.js:233:18

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

System

Environment Info:

  System:
    OS: macOS 12.3
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v17.3.1/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 99.0.4844.83
    Firefox: 98.0.1
    Safari: 15.4
  npmPackages:
    @storybook/addon-actions: ^6.4.13 => 6.4.13 
    @storybook/addon-docs: ^6.4.13 => 6.4.18 
    @storybook/addon-essentials: ^6.4.13 => 6.4.13 
    @storybook/addon-links: ^6.4.13 => 6.4.13 
    @storybook/addon-postcss: ^2.0.0 => 2.0.0 
    @storybook/builder-webpack5: ^6.4.13 => 6.4.13 
    @storybook/manager-webpack5: ^6.4.13 => 6.4.13 
    @storybook/react: ^6.4.13 => 6.4.13 
    storybook-addon-swc: ^1.1.1 => 1.1.1

Production build breaks with CSF 3.0 automatic title generation

Reproduction

• Remove title from examples/common/template/Button.stories.tsx
• Run codegen and yarn build:swc in examples/webpack5 directory

Possible solution

Currently replaceMinimizer doesn't respect the original config.optimization.
Add ...config.optimization in optimization field may fix this issue.

storybook-addon-swc/src/transformers.ts

Lines 66 to 80 in 154060c

	export const replaceMinimizer = (options: JsMinifyOptions): (config: Configuration) => Configuration => {
	const TerserPlugin = require('terser-webpack-plugin');
	return (config: Configuration) => ({
	...config,
	optimization: {
	minimizer: 0 < config.optimization?.minimizer?.length
	? [new TerserPlugin({
	minify: TerserPlugin.swcMinify,
	// eslint-disable-next-line @typescript-eslint/no-explicit-any
	terserOptions: options as any,
	})]
	: [],
	},
	});
	};

Use the new Framework API?

Hey @Karibash!
I'm one of the Storybook maintainers. I focus primarily on documentation and community outreach. I'm opening up this issue and letting you know that the Storybook API for building addons is currently being updated to factor in the changes introduced by the upcoming 7.0 release. If you're interested in making the required changes to help the community from benefiting from using your addon, we've prepared an abridged guide for the required changes here, and if you have any questions or issues, please reach out to us in the #prerelease channel in our Discord Server.

Hope you have a great day!

Stay safe

Breaking change in recent version

Hello! I've recently tried to upgrade from version 1.1.1 to 1.1.7 and the build were failing with error Error: failed to handle: not implemented: automatic polyfill for scripts:

I noticed that isModule were changed to isModule: 'unknown' in this commit ed714ba. Changing it back to the default value isModule: true fixes it.

I don't know why it doesn't work with isModule: 'unknown' but letting you know about this issue and how it can be fixed if someone encounters it.

Info:

• Storybook 6.4.19
• React 17.0.2
• TypeScript 4.6.2
• @swc/core 1.2.170

Swc config:

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": false,
      "dynamicImport": false
    },
    "loose": true
  },
  "env": {
    "targets": "> 0.5%, last 2 versions, Firefox ESR, not dead, not ie <= 11"
  }
}

Addon results in webpack RuleSetCompiler.error when used with @nx/webpack

Hi @Karibash,

Not sure if I have to report it here or at NX, but I recently updated to a new NX webpack version (@nx/webpack) and there seems to occur an error with the storybook-addon-swc. You can find the error below and I also have made a basic reproduction repo here: https://github.com/R-J-dev/storybook-swc-example. When patching your addon by simply setting the babel rule options to undefined, it started to work again.

May I ask why the babel options are currently preserved and not being set to undefined and/or replaced by the SWC options? If the babel options aren't needed, I am happy to create a PR to set the options to undefined.

Thanks in advance and I hope to hear what your point of view is on this.

The error is: Error: Compiling RuleSet failed: A Rule must not have a 'options' property when it has a 'use' property (at ruleSet[1].rules[11].options: [object Object])

[email protected] requires package extensions with Yarn 3

Updating to [email protected] requires the following packageExtensions with [email protected] and PnP enabled.

packageExtensions:
  storybook-addon-swc@^1.2:
    dependencies:
      terser-webpack-plugin: ^5.2.5
  terser-webpack-plugin@^5.2.5:
    dependencies:
      "@swc/core": '*' # there might be a better version to pin to?

terser-webpack-plugin should be specified in a way that yarn pulls it in.

Example usage with swc plugins

I'd like to use SWC with the official styled-components plug-in in Storybook.

How might I do this?

Error when used with emotion-swc-plugin

I am getting the following error when trying to build storybook with SWC and the emotion-swc-plugin

Here's the error

Missing export __transform_plugin_process_impl', crates/swc/src/plugin.rs:222:14
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
thread '<unnamed>' panicked at 'failed to invoke plugin: failed to invoke plugin on 'Some("filepath/.storybook/preview.js-generated-config-entry.js")'

Here's a reproduction repo:

https://github.com/alekangelov/emotion-swc-storybook-bug