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

[visualjeff]

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.

[visualjeff]

I think we need to use craco so we can tweak the webpack.config file associated with CRA.