"Can't find variable React" after upgrading to v8

[Foxhoundn]

Summary

Migrated a v7.5 SB to v8 and this started showing. It's from preview.tsx where I have a decorator. This error does not show in the editor.

Additional information

export default {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],

  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-webpack5-compiler-babel',
    '@chromatic-com/storybook',
  ],

  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },

  features: {
    interactionsDebugger: true,
  },

  typescript: { reactDocgen: 'react-docgen' },

  refs: {
    reqore: {
      title: 'ReQore',
      url: 'https://reqore.qoretechnologies.com/',
    },
  },
};

preview:

import { ReqoreContent, ReqoreLayoutContent, ReqoreUIProvider } from '@qoretechnologies/reqore';

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  layout: 'fullscreen',
  options: {
    panelPosition: 'right',
    sidebar: {
      showRoots: true,
    },
  },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
    hideNoControlsWarning: true,
    expanded: true,
  },
  chromatic: {
    pauseAnimationAtEnd: true,
    viewports: [1440],
  },
};

export const argTypes = {
  mainTheme: {
    control: 'color',
    description: 'The overall theme for all ReQore components',
    name: 'Main Theme',
    defaultValue: '#333333',
    table: {
      type: {
        summary: 'hex color of 6 characters',
      },
      defaultValue: { summary: '#333333' },
    },
  },
};

export const decorators = [
  (Story, context) => (
    <ReqoreUIProvider
      options={{
        animations: {
          buttons: false,
          dialogs: false,
        },
        ...context.args?.reqoreOptions,
      }}
    >
      <ReqoreLayoutContent style={{ height: '100%' }}>
        <ReqoreContent style={{ padding: '20px', display: 'flex', flexFlow: 'column' }}>
          <Story />
        </ReqoreContent>
      </ReqoreLayoutContent>
    </ReqoreUIProvider>
  ),
];

I migrated with the babel compiler btw.

Create a reproduction

No response

[gabro]

I'm randomly seeing the same thing after upgrading to v8. It happens inconsistently, e.g. sometimes it happens on one story sometimes it happens on another one. I'll try to tracking it down

[gabro]

ah, I've actually fixed the issue by adding the react vite plugin to the build explicitly. I had missed this step in the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-specific-vite-plugins-have-to-be-explicitly-added

[Foxhoundn]

This is still an issue btw - here is a repo for reproduction qoretechnologies/qorus-ide#15 - this is the second storybook I upgraded to v8 and the same issue happens. I tried clearing the yarn cache, updating babel, but nothing helped.

[gabro]

have you seen my comment here? #26982 (reply in thread)

[Foxhoundn]

We don't use vite.

[valentinpalkovic]

In Storybook 8, we don't apply any Babel presets. If you don't want to import "React" every time you use JSX, you have to set the appropriate setting to automatically include the JSX React runtime, as documented here: https://babeljs.io/docs/babel-preset-react

If you use Vite and the proper React Vite plugin, the React runtime is set per default to "automatic": https://www.npmjs.com/package/@vitejs/plugin-react

[Foxhoundn]

Did you check the repo / branch I linked please? I do all of that and we don't use vite.

[valentinpalkovic]

What if you explicitly import React in your preview.tsx file? Does the error go away?

[Foxhoundn]

Yes, it moves to the first component that does not have it.

[valentinpalkovic]

So the issue is that the babel-loader first reads your babel configuration from your package.json and therefore ignores babel.config.js. If you remove the babel setting in package.json, you will see, that it will process the configuration in babel.config.js

[Foxhoundn]

That was it, thank you! :)