Storybook webpack crashing on build

[dougfer]

Describe the bug

Storybook webpack started to send me this error after I tried to use any functions from the library:

[storybook] ERROR in ./node_modules/tailwind-merge/dist/bundle-cjs.js 49:30
[storybook] Module parse failed: Unexpected token (49:30)
[storybook] You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
[storybook] |   return classPartObject.validators.find(({
[storybook] |     validator
[storybook] >   }) => validator(classRest))?.classGroupId;
[storybook] | }
[storybook] | const arbitraryPropertyRegex = /^\[(.+)\]$/;
[storybook]  @ ./src/components/RadioGroup/index.tsx 12:0-49 22:15-22 22:23-29
[storybook]  @ ./src/components/RadioGroup/index.stories.tsx
[storybook]  @ ./src sync ^\.(?:(?:^|[\\/]|(?:(?:(?!(?:^|[\\/])\.).)*?)[\\/])(?!\.)(?=.)[^\\/]*?\.stories\.(js|jsx|ts|tsx))$
[storybook]  @ ./generated-stories-entry.js
[storybook]  @ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js

I tried to change the moduleResolution but it didn't work.

To Reproduce

1 - Use storybook/react@6.5.9
2 - Use tailwind-merge@2.2.0

Expected behavior

To build properly

Environment

• storybook: 6.5.9
• tailwind-merge version: 2.2.0
• tailwind 3.3.6

Storybook main file

const path = require('path');

module.exports = {
  stories: ['../src/**/**/*.stories.mdx', '../src/**/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    'storybook-addon-styled-component-theme/dist/preset',
    '@storybook/addon-jest',
  ],
  framework: '@storybook/react',
  webpackFinal: async (config) => {
    config.module?.rules?.push(
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      },
      {
        test: /\.css&/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [require('tailwindcss'), require('autoprefixer')],
            },
          },
        ],
        include: path.resolve(__dirname, '../'),
      },
    );
    return config;
  },
};

[dougfer]

Fixed by upgrading storybook to version 7 (uses webpack5).