解決したいこと

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を作成した結果、タイトルのエラーに戻ってしまいます。