@Masaharu-Fujiposted at 2023-12-19

Symfony AssetMapper React の超簡単なコードを教えてください。

Q&A

解決したいこと

Symfony6.3 を使っています。
Asset-mapperライブラリを使ってReactを試したい。

とても簡単なコード(HelloWorldレベル)を教えてほしいです。

発生している問題・エラー

//chrome console
stimulus.js:2148 Error connecting controller

TypeError: window.resolveReactComponent is not a function
    at t.connect (render_controller-0e1ac9ab76cef3a8e5f7f21c90688b38.js:30:34)
    at V.connect (stimulus.js:1498:29)
    at U.connectContextForScope (stimulus.js:1668:17)
    at Z.scopeConnected (stimulus.js:2054:20)
    at H.elementMatchedValue (stimulus.js:1961:27)
    at B.tokenMatched (stimulus.js:999:27)
    at F.tokenMatched (stimulus.js:930:23)
    at stimulus.js:924:40
    at Array.forEach (<anonymous>)
    at F.tokensMatched (stimulus.js:924:16)

該当するソースコード

src/importmap.php

<?php

return [
    'app' => [
        'path' => 'app.js',
        'preload' => true,
    ],
    '@symfony/stimulus-bundle' => [
        'path' => '@symfony/stimulus-bundle/loader.js',
    ],
    '@symfony/ux-react' => [
        'path' => '@symfony/ux-react/loader.js',
    ],
    '@hotwired/stimulus' => [
        'url' => 'https://cdn.jsdelivr.net/npm/@hotwired/stimulus@3.2.2/+esm',
    ],
    'react' => [
        'url' => 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm',
    ],
    'react-dom' => [
        'url' => 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm',
    ],
];

src/templates/base.html.twig

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block javascripts %}
            {{ importmap() }}
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
    </body>
</html>

src/templates/hoge/index.html.twig

{% extends 'base.html.twig' %}

{% block title %}hoge{% endblock %}

{% block body %}
<div class="example-wrapper">
    <h1>Hello {{ controller_name }}! ✅</h1>
    <div {{ react_component('Hello') }}>
        Loading...
    </div>
</div>
{% endblock %}

src/assets/react/controllers/Hello.jsx (コンパイルもした。)

import React from 'react';

export default function () {
    return <div>Hello </div>;
}

自分で試したこと

以下のサイトを参考にコードを動かそうと思いました。

参考サイト

Are you sure you want to delete the question?