Riot.js 4.1で「riot+compiler.min.js:2 Uncaught (in promise) SyntaxError: Unexpected token (14:8)」

Riot.js 4.0.2では動作するコード。

・index.html


  1. <html lang="ja">
  2. <head>
  3. <meta charset="UTF-8">
  4.     <title>riot sample</title>
  5. </head>
  6. <body>
  7.     <!-- タグの表示位置 -->
  8.     <my-tag></my-tag>
  9.     <!-- タグの定義ファイルを指定 -->
  10.     <script src="my-tag.riot" type="riot"></script>
  11. <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/4.0.2/riot+compiler.min.js"></script>
  12. <script>
  13. (async function main() {
  14. await riot.compile()
  15. riot.mount('my-tag')
  16. }())
  17. </script>
  18. </body>




・my-tag.riot


  1. <my-tag>
  2.     <h3>ボタンクリックで項目追加</h3>
  3.     <slot each={ item in items }>
  4.         <div>項目:<span>{ item.text }</span></div>
  5.     </slot>
  6.     <div><input type="button" value="追加" onclick={ add }></div>
  7.     <script>
  8.     export default {
  9.         
  10.         onBeforeMount(props, state) {
  11.             this.items = []
  12.         }
  13.         add(event) {
  14.             this.items.push({text : 'テキスト追加'})
  15.             this.update()
  16.         }
  17.     }
  18.     </script>
  19. </my-tag>




Riot.js 4.1.1に上げると、エラーになります。


riot+compiler.min.js:2 Uncaught (in promise) SyntaxError: Unexpected token (14:8)






export default



原因は、my-tag.riotのexport defaultに記載したコード


  1. <my-tag>
  2.     <h3>ボタンクリックで項目追加</h3>
  3.     <slot each={ item in items }>
  4.         <div>項目:<span>{ item.text }</span></div>
  5.     </slot>
  6.     <div><input type="button" value="追加" onclick={ add }></div>
  7.     <script>
  8.     export default {
  9.         
  10.         onBeforeMount(props, state) {
  11.             this.items = []
  12.         },
  13.         add(event) {
  14.             this.items.push({text : 'テキスト追加'})
  15.             this.update()
  16.         }
  17.     }
  18.     </script>
  19. </my-tag>



わずかな変化ですが、onBeforeMountとaddの間に「,」が必要です。
4.0系では許容してくれていたのですが、4.1から必須のようですね。

ずいぶんハマったのでメモしておきます。

関連記事

コメント

非公開コメント

プロフィール

Author:symfo
blog形式だと探しにくいので、まとめサイト作成中です。
Symfoware まとめ

PR




検索フォーム

月別アーカイブ