Storybook 8 does not use Babel compiler?

[flex-hyuntae]

Summary

When i use Storybook 7 and run storybook dev
logs are like this

info => Starting manager..
WARN No story files found for the specified pattern: src/**/*.stories.mdx
info => Starting preview..

info Using Babel compiler
info Addon-docs: using MDX2
info => Using implicit CSS loaders

but update Storybook 8 using yarn dlx storybook@latest upgrade this command
after run storybook dev logs are like this

info => Starting manager..
WARN No story files found for the specified pattern: src/**/*.mdx
info => Starting preview..

info Addon-docs: using MDX3
info => Using implicit CSS loaders
info => Using default Webpack5 setup

Also i check webpack --debug-webpack
webpack config module Storybook 7 is

  module: {
    unknownContextCritical: false,
    rules: [
      {
        test: /\.stories\.([tj])sx?$|(stories|story)\.mdx$/,
        enforce: 'post',
        use: [
          {
            loader: 'MyPath/.yarn/__virtual__/@storybook-builder-webpack5-virtual-266504c8af/0/cache/@storybook-builder-webpack5-npm-7.6.17-42b524fb4e-a24947a781.zip/node_modules/@storybook/builder-webpack5/dist/loaders/export-order-loader.js'
          }
        ]
      },
      { test: /\.m?js$/, type: 'javascript/auto' },
      { test: /\.m?js$/, resolve: { fullySpecified: false } },
      {
        test: /\.(mjs|tsx?|jsx?)$/,
        use: [
          {
            loader: 'MyPath/.yarn/__virtual__/babel-loader-virtual-9b97005645/0/cache/babel-loader-npm-9.1.2-a76340cb80-18d089fd37.zip/node_modules/babel-loader/lib/index.js',
            options: {
              cacheDirectory: 'MyPath/packages-design-system/fx/node_modules/.cache/storybook/babel',
              presets: [
                [
                  'MyPath/.yarn/__virtual__/@babel-preset-react-virtual-96ac3a4f39/0/cache/@babel-preset-react-npm-7.22.15-ae0b4bfc82-f9296e4534.zip/node_modules/@babel/preset-react/lib/index.js',
                  { runtime: 'automatic' }
                ]
              ],
              plugins: [
                'MyPath/.yarn/cache/babel-plugin-add-react-displayname-npm-0.0.5-219daea2cd-5aa2dfa89d.zip/node_modules/babel-plugin-add-react-displayname/index.js'
              ]
            }
          }
        ],
        include: [ 'MyPath' ],
        exclude: [
          /node_modules/,
          'MyPath/packages-design-system/fx/storybook-stories.js',
          'MyPath/packages-design-system/fx/storybook-config-entry.js'
        ]
      },
      { test: /\.md$/, type: 'asset/source' },
      {
        test: /(stories|story)\.mdx$/,
        use: [
          {
            loader: 'MyPath/.yarn/cache/@storybook-mdx2-csf-npm-1.1.0-d25c034cbd-acc368a8c8.zip/node_modules/@storybook/mdx2-csf/loader.js',
            options: {
              skipCsf: false,
              mdxCompileOptions: {
                providerImportSource: 'MyPath/.yarn/__virtual__/@storybook-addon-docs-virtual-cdcce7c17c/0/cache/@storybook-addon-docs-npm-7.6.17-cc6ec519c1-c4e1442b83.zip/node_modules/@storybook/addon-docs/dist/shims/mdx-react-shim',
                remarkPlugins: [ [Function: slug], [Function: externalLinks] ]
              },
              jsxOptions: {}
            }
          }
        ]
      },
      {
        test: /\.mdx$/,
        exclude: /(stories|story)\.mdx$/,
        use: [
          {
            loader: 'MyPath/.yarn/cache/@storybook-mdx2-csf-npm-1.1.0-d25c034cbd-acc368a8c8.zip/node_modules/@storybook/mdx2-csf/loader.js',
            options: {
              skipCsf: true,
              mdxCompileOptions: {
                providerImportSource: 'MyPath/.yarn/__virtual__/@storybook-addon-docs-virtual-cdcce7c17c/0/cache/@storybook-addon-docs-npm-7.6.17-cc6ec519c1-c4e1442b83.zip/node_modules/@storybook/addon-docs/dist/shims/mdx-react-shim',
                remarkPlugins: [ [Function: slug], [Function: externalLinks] ]
              },
              jsxOptions: {}
            }
          }
        ]
      },
      {
        test: [ /\.stories\.(jsx?$|tsx?$)/ ],
        use: [
          {
            loader: 'MyPath/.yarn/cache/@storybook-source-loader-npm-7.6.17-26d3c6d9a3-39010b8a78.zip/node_modules/@storybook/source-loader/dist/index.js',
            options: undefined
          }
        ]
      },
      {
        test: /\.css$/,
        sideEffects: true,
        use: [
          'MyPath/.yarn/__virtual__/style-loader-virtual-10e8ef4f64/0/cache/style-loader-npm-3.3.1-4bbb6ec77f-8807445469.zip/node_modules/style-loader/dist/cjs.js',
          {
            loader: 'MyPath/.yarn/__virtual__/css-loader-virtual-0c1f1be247/0/cache/css-loader-npm-6.7.1-b93a2de0d4-9442fe5915.zip/node_modules/css-loader/dist/cjs.js',
            options: { importLoaders: 1 }
          }
        ]
      },
      {
        test: /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
        type: 'asset/resource',
        generator: { filename: 'static/media/[path][name][ext]' }
      },
      {
        test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
        type: 'asset',
        parser: { dataUrlCondition: { maxSize: 10000 } },
        generator: { filename: 'static/media/[path][name][ext]' }
      },
      { resourceQuery: /raw/, type: 'asset/source' },
      { test: /\.m?js$/, type: 'javascript/auto' },
      { test: /\.m?js$/, resolve: { fullySpecified: false } },
      {
        test: /\.(cjs|mjs|jsx?)$/,
        loader: 'MyPath/.yarn/__virtual__/@storybook-preset-react-webpack-virtual-272d27dc65/0/cache/@storybook-preset-react-webpack-npm-7.6.17-9b6e147f29-48abc57353.zip/node_modules/@storybook/preset-react-webpack/dist/loaders/react-docgen-loader.js',
        options: {
          babelOptions: {
            cacheDirectory: 'MyPath/packages-design-system/fx/node_modules/.cache/storybook/babel',
            presets: [
              [
                'MyPath/.yarn/__virtual__/@babel-preset-react-virtual-96ac3a4f39/0/cache/@babel-preset-react-npm-7.22.15-ae0b4bfc82-f9296e4534.zip/node_modules/@babel/preset-react/lib/index.js',
                { runtime: 'automatic' }
              ]
            ],
            plugins: [
              'MyPath/.yarn/cache/babel-plugin-add-react-displayname-npm-0.0.5-219daea2cd-5aa2dfa89d.zip/node_modules/babel-plugin-add-react-displayname/index.js'
            ]
          },
          debug: false
        },
        exclude: /(\.(stories|story)\.(js|jsx|ts|tsx))|(node_modules)/
      }
    ]
  },

but Storybook 8 is

  module: {
    unknownContextCritical: false,
    rules: [
      {
        test: /\.stories\.([tj])sx?$|(stories|story)\.mdx$/,
        exclude: /node_modules/,
        enforce: 'post',
        use: [
          {
            loader: 'MyPath/.yarn/__virtual__/@storybook-builder-webpack5-virtual-502a6ca487/0/cache/@storybook-builder-webpack5-npm-8.0.8-1caeb1811e-8c3a307dfe.zip/node_modules/@storybook/builder-webpack5/dist/loaders/export-order-loader.js'
          }
        ]
      },
      { test: /\.m?js$/, type: 'javascript/auto' },
      { test: /\.m?js$/, resolve: { fullySpecified: false } },
      { test: /\.md$/, type: 'asset/source' },
      {
        test: /\.mdx$/,
        exclude: /(stories|story)\.mdx$/,
        use: [
          {
            loader: 'MyPath/.yarn/cache/@storybook-addon-docs-npm-8.0.8-8b1f00af09-4f35790d06.zip/node_modules/@storybook/addon-docs/dist/mdx-loader.js',
            options: {
              mdxCompileOptions: {
                providerImportSource: 'MyPath/.yarn/cache/@storybook-addon-docs-npm-8.0.8-8b1f00af09-4f35790d06.zip/node_modules/@storybook/addon-docs/dist/shims/mdx-react-shim',
                rehypePlugins: [
                  [Function: rehypeSlug],
                  [Function: rehypeExternalLinks]
                ]
              }
            }
          }
        ]
      },
      {
        test: /\.css$/,
        sideEffects: true,
        use: [
          'MyPath/.yarn/__virtual__/style-loader-virtual-e556d7d805/0/cache/style-loader-npm-3.3.1-4bbb6ec77f-8807445469.zip/node_modules/style-loader/dist/cjs.js',
          {
            loader: 'MyPath/.yarn/__virtual__/css-loader-virtual-aea18ae109/0/cache/css-loader-npm-6.7.1-b93a2de0d4-9442fe5915.zip/node_modules/css-loader/dist/cjs.js',
            options: { importLoaders: 1 }
          }
        ]
      },
      {
        test: /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
        type: 'asset/resource',
        generator: { filename: 'static/media/[path][name][ext]' }
      },
      {
        test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
        type: 'asset',
        parser: { dataUrlCondition: { maxSize: 10000 } },
        generator: { filename: 'static/media/[path][name][ext]' }
      },
      { resourceQuery: /raw/, type: 'asset/source' },
      { test: /\.m?js$/, type: 'javascript/auto' },
      { test: /\.m?js$/, resolve: { fullySpecified: false } },
      {
        test: /\.(cjs|mjs|tsx?|jsx?)$/,
        enforce: 'pre',
        loader: 'MyPath/.yarn/__virtual__/@storybook-preset-react-webpack-virtual-b715ce875c/0/cache/@storybook-preset-react-webpack-npm-8.0.8-b0017da857-5f628ab156.zip/node_modules/@storybook/preset-react-webpack/dist/loaders/react-docgen-loader.js',
        options: { debug: false },
        exclude: /(\.(stories|story)\.(js|jsx|ts|tsx))|(node_modules)/
      },
      {
        test: /\.((c|m)?(j|t)sx?)$/,
        use: [
          {
            loader: 'MyPath/.yarn/__virtual__/babel-loader-virtual-c266415be1/0/cache/babel-loader-npm-9.1.3-cbf4da21df-7086e67827.zip/node_modules/babel-loader/lib/index.js',
            options: {
              cacheDirectory: 'MyPath/packages-design-system/fx/node_modules/.cache/storybook/default/babel'
            }
          }
        ],
        include: [ 'MyPath' ],
        exclude: [
          /node_modules/,
          /storybook-config-entry\.js$/,
          /storybook-stories\.js$/
        ]
      }
    ]
  },

my babel config is

  presets: [
    [
      '@babel/preset-react',
      {
        runtime: 'automatic',
      },
    ],
    [
      '@babel/preset-env',
      {
        modules: ['esm', 'umd'].includes(process.env.BABEL_ENV)
          ? false
          : 'commonjs',
      },
    ],
    ['@babel/preset-typescript'],
  ],
  ignore: ['**/*.spec.ts', '**/*.spec.tsx', '**/*.test.ts', '**/*.test.tsx'],

I think When i use Storybook 8 Babel compiler not working
because module in webpack config has not babel preset, plugins (but Storybook 7 has)

and my storybook result also has error like
ReferenceError: ${ComponentName} is not defined

Do you have any solution for me?

Additional information

No response

Create a reproduction

No response

[valentinpalkovic]

We have removed babel from the webpack5 builder. Please read the migration docs: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removed-babelcore-and-babel-loader-from-storybookbuilder-webpack5

You have to install the appropriate compiler addon (swc or babel)

[flex-hyuntae]

but when i show webpack config in log
Storybook 7 has babel-loader presets and plugins

      {
        test: /\.(mjs|tsx?|jsx?)$/,
        use: [
          {
            loader: 'MyPath/.yarn/__virtual__/babel-loader-virtual-9b97005645/0/cache/babel-loader-npm-9.1.2-a76340cb80-18d089fd37.zip/node_modules/babel-loader/lib/index.js',
            options: {
              cacheDirectory: 'MyPath/packages-design-system/fx/node_modules/.cache/storybook/babel',
              presets: [
                [
                  'MyPath/.yarn/__virtual__/@babel-preset-react-virtual-96ac3a4f39/0/cache/@babel-preset-react-npm-7.22.15-ae0b4bfc82-f9296e4534.zip/node_modules/@babel/preset-react/lib/index.js',
                  { runtime: 'automatic' }
                ]
              ],
              plugins: [
                'MyPath/.yarn/cache/babel-plugin-add-react-displayname-npm-0.0.5-219daea2cd-5aa2dfa89d.zip/node_modules/babel-plugin-add-react-displayname/index.js'
              ]
            }
          }
        ],
        include: [ 'MyPath' ],
        exclude: [
          /node_modules/,
          'MyPath/packages-design-system/fx/storybook-stories.js',
          'MyPath/packages-design-system/fx/storybook-config-entry.js'
        ]
      },

but Storybook 8 has not

      {
        test: /\.((c|m)?(j|t)sx?)$/,
        use: [
          {
            loader: 'MyPath/.yarn/__virtual__/babel-loader-virtual-c266415be1/0/cache/babel-loader-npm-9.1.3-cbf4da21df-7086e67827.zip/node_modules/babel-loader/lib/index.js',
            options: {
              cacheDirectory: 'MyPath/packages-design-system/fx/node_modules/.cache/storybook/default/babel'
            }
          }
        ],
        include: [ 'MyPath' ],
        exclude: [
          /node_modules/,
          /storybook-config-entry\.js$/,
          /storybook-stories\.js$/
        ]
      }

is this right???

[valentinpalkovic]

This is right! In Storybook 8 we don’t set up any plugins and presets per default, instead the babel-loader is picking up your .babelrc config instead.

[flex-hyuntae]

Hello, I reproduced the error.

When i make folder/file like this

abtest/AbTest.tsx

const AbTest = () => {
  return 'ab-test';
};

export default AbTest;

abtest/AbTestChild.tsx

import { forwardRef } from 'react';

const AbTestChildInner = forwardRef(() => {
  return 'ab-test';
});

export default AbTestChildInner;

abtest/AbTestStyled.tsx

import AA from './AbTestChild';

const AbTestStyled = AA;

export { AbTestStyled };

Error

i got error like this

and i check my bundle

/***/ "./src/components/abtest/AbTest.tsx":
/*!******************************************!*\
  !*** ./src/components/abtest/AbTest.tsx ***!
  \******************************************/
/***/ ((__unused_webpack_module, exports) => {

"use strict";


Object.defineProperty(exports, "__esModule", ({
  value: true
}));
exports["default"] = void 0;
const AbTest = () => {
  return 'ab-test';
};
var _default = exports["default"] = AbTest;

/***/ }),

/***/ "./src/components/abtest/AbTestChild.tsx":
/*!***********************************************!*\
  !*** ./src/components/abtest/AbTestChild.tsx ***!
  \***********************************************/
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";


Object.defineProperty(exports, "__esModule", ({
  value: true
}));
exports["default"] = void 0;
var _react = __webpack_require__(/*! react */ "../../.yarn/cache/react-npm-18.2.0-1eae08fee2-b9214a9bd7.zip/node_modules/react/index.js");
const AbTestChildInner = /*#__PURE__*/(0, _react.forwardRef)(() => {
  return 'ab-test';
});
var _default = exports["default"] = AbTestChildInner;
;
AbTestChildInner.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "AbTestChildInner"
};

/***/ }),

/***/ "./src/components/abtest/AbTestStyled.tsx":
/*!************************************************!*\
  !*** ./src/components/abtest/AbTestStyled.tsx ***!
  \************************************************/
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";


Object.defineProperty(exports, "__esModule", ({
  value: true
}));
exports.AbTestStyled = void 0;
var _AbTestChild = _interopRequireDefault(__webpack_require__(/*! ./AbTestChild */ "./src/components/abtest/AbTestChild.tsx"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const AbTestStyled = exports.AbTestStyled = _AbTestChild.default;
;
AbTestChildInner.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "AbTestChildInner"
};

/***/ }),

Do you see that AbTestChildInner.__docgenInfo in AbTestStyled bundle.
is this webpack error ??

[flex-hyuntae]

when i wrap Component using forwardRef, and export default after using another name,
Storybook 8 throw error

[flex-hyuntae]

This pr solve my problem maybe