🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

1803閲覧

JSON::ParserErrorを解決したい

anago1030

総合スコア1

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2021/03/27 19:04

解決したいこと

Rails6系にReact.jsを組み合わせてアプリを作成しようとしています。
rails sを実行したところJSON::ParserErrorのエラーが発生してしまいました。
webpack関連のエラーだと思いますが、解決できません。

開発環境

  • macOS Catalina
  • ruby 2.6.5
  • Rails 6.0.3.6
  • node v15.8.0
  • yarn 1.22.10

エラー画面

イメージ説明

該当コード

app/views/layout/application.html.erb

php:

1<!DOCTYPE html> 2<html> 3 <head> 4 <title>TodoApp</title> 5 <%= csrf_meta_tags %> 6 <%= csp_meta_tag %> 7 8 <%= stylesheet_link_tag 'application', media: 'all' %> 9 <%= javascript_pack_tag 'application' %> 10 <%= javascript_pack_tag 'index' %> 11 </head> 12 13 <body> 14 <%= yield %> 15 </body> 16</html>

app/views/site/index.html.erb

<div id="root"></div>

app/javascript/packs/application.js

php:app/javascript/packs/application.js

1// This file is automatically compiled by Webpack, along with any other files 2// present in this directory. You're encouraged to place your actual application logic in 3// a relevant structure within app/javascript and only use these pack files to reference 4// that code so it'll be compiled. 5 6require("@rails/ujs").start() 7require("turbolinks").start() 8require("@rails/activestorage").start() 9require("channels") 10 11 12// Uncomment to copy all static images under ../images to the output folder and reference 13// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) 14// or the `imagePath` JavaScript helper below. 15// 16// const images = require.context('../images', true) 17// const imagePath = (name) => images(name, true)

app/javascript/packs/index.jsx

// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file, // like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom // of the page. import React from 'react' import ReactDOM from 'react-dom' import PropTypes from 'prop-types' const Hello = props => ( <div>Hello {props.name}!</div> ) Hello.defaultProps = { name: 'David' } Hello.propTypes = { name: PropTypes.string } document.addEventListener('DOMContentLoaded', () => { ReactDOM.render( <Hello name="React" />, document.body.appendChild(document.createElement('div')), ) })

コントローラー

app/controllers/site_controller.rb

class SiteController < ApplicationController def index end end

app/controllers/api/v1/todos_controller.rb

class Api::V1::TodosController < ApplicationController def index todos = Todo.order(updated_at: :desc) render json: todos end def show todo = Todo.find(params[:id]) render json: todo end def create todo = Todo.new(todo_params) if todo.save render json: todo else render json: todo.errors, status: 422 end end def update todo = Todo.find(todo_params) if todo.update(todo_params) render json: todo else render json: todo.errors, status: 422 end end def destroy if Todo.destroy head: no_content else render json: { error: "Failed to destroy" }, status: 422 end end def destroy_all if Todo.destroy_all head: no_content else render json: { error: "Failed to destroy" }, status: 422 end end provate def todo_params params.require(:todo).permit(:name, :is_completed) end end

試したこと

767: unexpected token at ''で調べてこちらの記事にたどり着きました。
参考記事
こちらの記事の内容通りに、public/packs/manifest.jsonのファイルを削除しましたが、新しいエラーが発生しました。

エラー画面

イメージ説明
エラー内容にWebpacker can't find application in /Users/iwanabekiyoshiya/projects/todo_app/public/packs/manifest.json. とあるので再び、public/packs配下にmanifest.jsonを作成した結果、タイトルのエラーに戻ってしまいます。

どうかご教示していただきたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2021/03/28 00:23

> 再び、public/packs配下にmanifest.jsonを作成した結果 どのように作成したのですか?
anago1030

2021/03/28 00:34

ターミナルでのLinuxコマンドではなく、VSCode上でGUIで操作してmanifest.jsonのファイルを作成しました。
guest

回答1

0

ターミナルでのLinuxコマンドではなく、VSCode上でGUIで操作してmanifest.jsonのファイルを作成しました。

public/packs/manifest.jsonは、自分で作るものではありません。rails assets:precompileでアセットと一緒に生成するか、ローカル環境ではwebpack-dev-serverに任せるかで、自動生成させるものです。

投稿2021/03/28 00:37

編集2021/03/28 00:37
maisumakun

総合スコア145975

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問