Need help for alpine integration

[LuciePH2M]

Summary

Hello !

I'm planning to integrate AlpineJs with tailwind in the storybook.

Additional information

I'm working with Hyvä Theme technology and I'd like to have a place to prepare my components or allow my juniors to do so before integrating them into the site. As well as allowing me to write associated documentation (for us internally or for customers).
I've managed to get Tailwind working though, if I manage to write the AlpineJs template without error (using x-on syntax rather than @) the component just doesn't work, as if alpine wasn't taken into account.

My files :

main.js

/** @type { import('@storybook/react-webpack5').StorybookConfig } */
const config = {
  stories: [
    "../stories/**/*.mdx",
    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
    "@storybook/addon-webpack5-compiler-babel",
    {
      name: '@storybook/addon-styling-webpack',
      options: {
        rules: [
          {
            test: /\.css$/,
            sideEffects: true,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  implementation: require.resolve('postcss'),
                },
              },
            ],
          },
        ],
      },
    },
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
};
export default config;

preview.js

/** @type { import('@storybook/react').Preview } */
import '../src/index.css';
import 'alpinejs';

const preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    backgrounds: {
      default: 'light-grey',
      values: [
        { name: 'light', value: '#fff' },
        { name: 'light-grey', value: '#EAECF0' },
        { name: 'dark', value: '#333' },
      ],
    },
  },
};

export default preview;

AlpineComponent.jsx

import React, {useEffect} from 'react';
import 'alpinejs';

export const AlpineComponent = () => {

  useEffect(() => {
    // Initialiser Alpine.js après le rendu du composant
    if (window.Alpine) {
      window.Alpine.start();
    }
  }, []);

  const template = `<div x-data="{ open: false }">
      <button x-on:click="open = !open">Toggle</button>
      <div x-show="open">
        <p>This is a toggled content.</p>
      </div>
    </div>`;

  return (
    <div>
      <h1>Alpine Component</h1>
      <div dangerouslySetInnerHTML={
        {__html: template}
      }></div>
    </div>
  );
};

AlpineComponent.stories.js

import React from 'react';
import { AlpineComponent } from './AlpineComponent';

export default {
  title: 'Components/AlpineComponent',
  component: AlpineComponent,
};

export const Default = () => <AlpineComponent />;

Create a reproduction

No response