rich_text_area 表示されない件について

Question

rich_text_areaを表示させたい

Rails6 のActionTextを導入しました。

原因は、Jsがうまく同期できていないからと思っています。（bootstrap使用）

現在のブラウザ

発生している問題・エラーメッセージ

GET http://localhost:3000/posts/css/blog-home.css net::ERR_ABORTED 404 (Not Found)
new:15 GET http://localhost:3000/posts/vendor/bootstrap/css/bootstrap.min.css net::ERR_ABORTED 404 (Not Found)
bootstrap.js:9 Uncaught Error: Cannot find module 'popper.js'
    at webpackMissingModule (bootstrap.js:9)
    at bootstrap.js:9
    at Object../node_modules/bootstrap/dist/js/bootstrap.js (bootstrap.js:10)
    at __webpack_require__ (bootstrap:19)
    at Module../app/javascript/packs/application.js (application.js:1)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

該当のソースコード

<%= form_with(model: post, local: true) do |form| %>
  <% if post.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2>

      <ul>
        <% post.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>

  <div class="field">
    <%= form.label :content %>
    <%= form.rich_text_area  :content %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

class Post < ApplicationRecord
  has_rich_text :content
end

class PostsController < ApplicationController
  before_action :set_post, only: [:show, :edit, :update, :destroy]
  before_action :move_to_index, except: [:index, :show]
  before_action :search_post, only: [:index, :search]

  # GET /posts
  # GET /posts.json
  def index
    @posts = Post.includes(:user).order("created_at DESC")
  end

  # GET /posts/1
  # GET /posts/1.json
  def show
  end

  # GET /posts/new
  def new
    @post = Post.new
  end

  # GET /posts/1/edit
  def edit
  end

  # POST /posts
  # POST /posts.json
  def create
    @post = Post.new(post_params)

    respond_to do |format|
      if @post.save
        format.html { redirect_to @post, notice: 'Post was successfully created.' }
        format.json { render :show, status: :created, location: @post }
      else
        format.html { render :new }
        format.json { render json: @post.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /posts/1
  # PATCH/PUT /posts/1.json
  def update
    respond_to do |format|
      if @post.update(post_params)
        format.html { redirect_to @post, notice: 'Post was successfully updated.' }
        format.json { render :show, status: :ok, location: @post }
      else
        format.html { render :edit }
        format.json { render json: @post.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /posts/1
  # DELETE /posts/1.json
  def destroy
    @post.destroy
    respond_to do |format|
      format.html { redirect_to posts_url, notice: 'Post was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

  def search
    @posts = @p.result.includes(:category)  # 検索条件にマッチした商品の情報を取得
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_post
      @post = Post.find(params[:id])
    end

    # Only allow a list of trusted parameters through.
    def post_params
      params.require(:post).permit(:title, :content)
    end

    def move_to_index
      unless user_signed_in?
        redirect_to action: :index
      end
    end

    def search_post
      @p = Post.ransack(params[:q])  # 検索オブジェクトを生成
    end
end

const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)


environment.config.resolve.alias = { 'vue$': 'vue/dist/vue.esm.js' }


const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: 'popper.js'
  })
)

module.exports = environment

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
// require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('./preview') 
require.context('../images', true) 

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

require("trix")
require("@rails/actiontext")

import 'bootstrap';
import '../stylesheets/application';

@import '~bootstrap/scss/bootstrap';
@import '~trix/dist/trix';

<!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/blog-home.css" rel="stylesheet">

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    
  </head>

試したこと

Rails 6にjQueryとBootstrapを導入。

Webpackerで入れるようにしました。

ブログ機能を表示させたいです。
どうかご教授お願いいたします。