Froala導入時にJSエラー「Uncaught SyntaxError: Unexpected token '<'」が出る

Question

背景

• サイトの中にFroalaというwysiwygエディターを利用中。
• エディターの中でアップされた画像をS3にあげる設定を行っている。

　- 公式のドキュメントを参照（https://froala.com/wysiwyg-editor/docs/sdks/ruby/image-s3-upload/）

利用しているバージョンなど

• rails 5.2.4.4
• ruby 2.6.3
• mysql Ver 14.14 Distrib 5.7.32, for osx10.15 (x86_64)
• viewファイルはHamlを利用

エラー内容

JSのエラーで「Uncaught SyntaxError: Unexpected token '<'」と出てしまう。

おそらく、viewをHamlで書いているため、その書式にあってないのではと思いました。。

コード内容

project_new.html.haml

.adminCommonContainer
    .adminProject__form
      = simple_form_for @project, url: admin_project_confirm_path, html: { multipart: true } do |f|
          .adminProject__form__field
            .adminProject__form__title
              コンテンツ
            .adminProject__form__contents
              = f.text_area :contents, label: false, error: false, class: "project_contents_froala"
        .submitButton
          = f.input :publish, as: :hidden, label: false, error: false
          = f.submit '内容を確認する >', class: 'link__box'

admin_controller.rb

class AdminController < ApplicationController
  # 省略
  private
  def hash_init
    options = {
      bucket: 'test-app',
      region: 'ap-northeast-1',
      keyStart: 'uploads/',
      acl: 'public-read',
      accessKey: 'xxxx',
      secretKey: 'xxxx',
    }
      @aws_data = FroalaEditorSDK::S3.data_hash(options)
  end
end

application.js

$(function(){
　new FroalaEditor('.project_contents_froala', {
    　imageUploadToS3: <%= @aws_data.to_json.html_safe %>
  　});
});

試したこと

viewをerbに戻してみる

　→　hamlがダメならとViewファイルをerbに戻して見たが同じエラーがで続ける

JSの値の書き方を書き換える

imageUploadToS3: <%= @aws_data.to_json.html_safe %>

試行①

imageUploadToS3: #{@aws_data.to_json.html_safe}

// 結果
Uncaught SyntaxError: Invalid or unexpected token

試行②

imageUploadToS3: = @aws_data.to_json.html_safe

// 結果
Uncaught SyntaxError: Unexpected token '='

試行③

imageUploadToS3: @aws_data.to_json.html_safe

// 結果
Uncaught SyntaxError: Invalid or unexpected token

試行④　こちらを見つけた→https://code.webzz.us/ja/q/53866

imageUploadToS3: $.parseJSON("#{@aws_data.to_json.html_safe}")

// 結果
Uncaught SyntaxError: Unexpected token = in JSON at position 0
    at JSON.parse (<anonymous>)
    at Function.jQuery.parseJSON (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:9012)
    at HTMLDocument.<anonymous> (application.self-d5058971043ad5cb444e954c1d9090de288044c27de41c319de6ef38d4334f5e.js?body=1:81)
    at fire (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3233)
    at Object.fireWith [as resolveWith] (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3363)
    at Function.ready (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3583)
    at HTMLDocument.completed (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3618)

Answer 1

imageUploadToS3: <%= @aws_data.to_json.html_safe %>
の<%= %> は jsの書き方ではないです。erbです、
のでfile名を　application.js.erb にしてください