<<症状>>
ReactJS を記載したXHTMLが、Firefox で意図した通りにレンダリングされません。
Firefox の Console を見ると、下記のメッセージが表示されています。
SyntaxError: embedded: Unexpected token (4:16) ReactDOM.render( , document.getElementById('root'));
<<環境>>
Firefox 56
babel-core 5.8.38
react 15.6.2
react-dom 15.6.2
但し、IE11 であったり、Chrome であったり、Firefox でも (XHTMLでは無く) HTMLで記載した場合は、問題無く ReactJS が機能します。
症状的に、Firefox + XHTML の環境での Babelのトランスが正しく機能していないように思えます。
どなたか要因と対策をご存じの方はいらっしゃいませんでしょうか。
(ちなみに XHTML を利用しているのは、開発環境の都合です)
<<XHTML SOURCE>>
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Confirm: React - JSX</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <script src="https://unpkg.com/react@15/dist/react.min.js"></script> <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, World!</h1> , document.getElementById('root') ); </script> </body> </html>あなたの回答
tips
プレビュー