How to add linaria to a project?

I have 6 storybook version want to add linaria plugin like this:

  stories: [
    '../packages/**/*.stories.mdx',
    '../packages/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  babel: (config) => {
    config.presets.push(require.resolve('linaria/babel'));
    return config;
  },
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: require.resolve('babel-loader'),
          options: {
            presets: [
              ['react-app', { flow: false, typescript: true }],
              require.resolve('linaria/babel'),
            ],
          },
        },
        {
          loader: 'linaria/loader',
          options: {
            sourceMap: process.env.NODE_ENV !== 'production',
          },
        },
      ],
    });
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
  },
};

As a result, I get an error: Module not found: Error: Can’t resolve ‘@storybook/react/types-6-0’ in ‘/Users/hazratgs/sberhealth/base-ui/packages/Button’

and WARNING in ./packages/Title/index.stories.tsx Module build failed (from ./node_modules/linaria/loader.js): SyntaxError: /Users/hazratgs/sberhealth/base-ui/packages/Title/index.stories.tsx: Unexpected token, expected “;” (26:2)

How do I add the plugin correctly? Tried different ways, he swears at types

[sotnikov-link]

My .storybook/main.js which works with @linaria/core@4.1.1 and @linaria/webpack5-loader@4.1.2 without external additional babel config file. Environment: yarn@3.2.2 with Workspaces and PnP.

module.exports = {
  webpackFinal(config) {
    // console.dir({ webpack: config }, { depth: null }); // debug

    config.module.rules.forEach((rule) => {
      if (rule.test.test('some.tsx')) {
        const babelLoaderOptions = rule.use.find(
          (item) =>
            typeof item.loader === 'string' &&
            item.loader.includes('babel-loader')
        );

        if (babelLoaderOptions) {
          const {
            // https://github.com/facebook/jest/issues/8082#ref-pullrequest-418539919
            cacheDirectory,
            ...babelOptions
          } = babelLoaderOptions.options;

          // https://github.com/callstack/linaria/blob/ff6ad6086aac24cc300e87274699f711cfe19b79/examples/webpack5/webpack.config.js#L38
          rule.use.push({
            loader: require.resolve('@linaria/webpack5-loader'),
            options: {
              babelOptions,
              sourceMap: true,
            },
          });

          // console.dir( // debug
          //   {
          //     use: rule.use,
          //   },
          //   { depth: null }
          // );
        }
      }
    });

    return config;
  },
}

[drewdecarme]

In my case, the above didn’t work. I had to tell Linaria exactly where my babel config was with the babelOptions key inside of the loader options. I also didn’t need to include the babel key in the storybook config export

{
webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.(ts|js|tsx|jsx)$/,
      exclude: /node_modules/,
      use: [
        {
          loader: require.resolve("@linaria/webpack-loader"),
          options: {
            sourceMap: process.env.NODE_ENV !== "production",
            extension: ".css",
            babelOptions: {
              configFile: path.resolve(__dirname, "./babel.config.js")
            }
          }
        }
      ]
    });
   return config;
}