React + Ruby on Railsの実装でモジュールを介してヘッダーをブラウザに表示させたいが、表示されない。

Question

前提・実現したいこと

初めまして。Ruby初学者のものです。
現在RailsとReactを使用したTodoアプリを作成しております。
参考動画：https://www.youtube.com/watch?v=vppVZsR6uoo&t=487s&ab_channel=Farstep%E3%80%90%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E8%AC%9B%E5%BA%A7%E3%80%91

現在ブラウザ上にJavaScriptでヘッダーを表示させようとした際に以下のメッセージが出て、ブラウザが非表示のままの状態です。
どうすれば表示できるようになるか、ご教授いただけますと幸いです。

ソースコードの過不足あればお申し付けください。
何卒よろしくお願い申し上げます。

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

ターミナル

ERROR in ./app/javascript/components/AddTodo.js
Module not found: Error: Can't resolve 'core-js/library/fn/reflect/es7/metadata' in '/Users/username/myprojects/todo_app/app/javascript/components'
 @ ./app/javascript/components/AddTodo.js 2:0-60 5:22-27
 @ ./app/javascript/components/App.js
 @ ./app/javascript/packs/index.jsx

コンソール

Uncaught Error: Cannot find module 'core-js/library/fn/reflect/es7/metadata'
    at webpackMissingModule (bootstrap:83)
    at Module../app/javascript/components/AddTodo.js (bootstrap:83)
    at __webpack_require__ (bootstrap:19)
    at Module../app/javascript/components/App.js (App.css?d67e:19)
    at __webpack_require__ (bootstrap:19)
    at Module../app/javascript/packs/index.jsx (TodoList.js:11)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

該当のソースコード

【index.jsx】

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom';
import App from '../components/App'

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <BrowserRouter>
      <App/>
    </BrowserRouter>,
    document.querySelector('#root'),
  );
});

【AppTodo.js】

import React from 'core-js/library/fn/reflect/es7/metadata'

function AddTodo(){
  return(
    <div>
      AddTodo
    </div>
  )
}

export default AddTodo

【App.js】

import React from 'react'
import { Switch, Route, Link } from 'react-router-dom'
import styled from 'styled-components'
import AddTodo from './AddTodo'
import TodoList from './TodoList'
import EditTodo from './EditTodo'
import './App.css'

const Nabvar = styled.nav`
  background: #dbfffe;
  min-height: 8vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
`

const Logo = styled.div`
  font-weight: bold;
  font-size: 23px;
  letter-spacing: 3px;
`

const NavItems = styled.ul`
  display: flex;
  width: 400px;
  max-width: 40%;
  justify-content: space-around;
  list-style: none;
`

const NavItem = styled.li`
  font-size: 19px;
  font-weight: bold;
  opacity: 0.7;
  &:hover {
    opacity: 1;
  }
`

const Wrapper = styled.div`
  width: 700px;
  max-width: 85%;
  margin: 20px auto;
`

function App() {
  return (
    <>
      <Nabvar>
        <Logo>
          TODO
        </Logo>
        <NavItems>
          <NavItem>
            <Link to="/todos">
              Todos
            </Link>
          </NavItem>
          <NavItem>
            <Link to="/todos/new">
              Add New Todo
            </Link>
          </NavItem>
        </NavItems>
      </Nabvar>
      <Wrapper>
        <Switch>
          <Route exact path="/todos" component={TodoList} />
          <Route exact path="/todos/new" component={AddTodo} />
          <Route path="/todos/:id/edit" component={EditTodo} />
        </Switch>
      </Wrapper>
    </>
  )
}

export default App

// The module cache
 	var installedModules = {};

 	// The require function
 	function __webpack_require__(moduleId) {

 		// Check if module is in cache
 		if(installedModules[moduleId]) {
 			return installedModules[moduleId].exports;
 		}
 		// Create a new module (and put it into the cache)
 		var module = installedModules[moduleId] = {
 			i: moduleId,
 			l: false,
 			exports: {}
 		};

 		// Execute the module function
 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

 		// Flag the module as loaded
 		module.l = true;

 		// Return the exports of the module
 		return module.exports;
 	}


 	// expose the modules object (__webpack_modules__)
 	__webpack_require__.m = modules;

 	// expose the module cache
 	__webpack_require__.c = installedModules;

 	// define getter function for harmony exports
 	__webpack_require__.d = function(exports, name, getter) {
 		if(!__webpack_require__.o(exports, name)) {
 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
 		}
 	};

 	// define __esModule on exports
 	__webpack_require__.r = function(exports) {
 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		}
 		Object.defineProperty(exports, '__esModule', { value: true });
 	};

 	// create a fake namespace object
 	// mode & 1: value is a module id, require it
 	// mode & 2: merge all properties of value into the ns
 	// mode & 4: return value when already ns object
 	// mode & 8|1: behave like require
 	__webpack_require__.t = function(value, mode) {
 		if(mode & 1) value = __webpack_require__(value);
 		if(mode & 8) return value;
 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
 		var ns = Object.create(null);
 		__webpack_require__.r(ns);
 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
 		return ns;
 	};

 	// getDefaultExport function for compatibility with non-harmony modules
 	__webpack_require__.n = function(module) {
 		var getter = module && module.__esModule ?
 			function getDefault() { return module['default']; } :
 			function getModuleExports() { return module; };
 		__webpack_require__.d(getter, 'a', getter);
 		return getter;
 	};

 	// Object.prototype.hasOwnProperty.call
 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };

 	// __webpack_public_path__
 	__webpack_require__.p = "/packs/";


 	// Load entry module and return exports
 	return __webpack_require__(__webpack_require__.s = "./app/javascript/packs/index.jsx");

試したこと

・https://qiita.com/riversun/items/63c5f08c8da604c5ec1a
・https://www.codegrepper.com/code-examples/javascript/Module+not+found%3A+Can%27t+resolve+%27core-js%2Flibrary%2Ffn%2Freflect%2Fes7%2Fmetadata%27
・https://qiita.com/tsuuuuu_san/items/e4fda04eef3b347128f1

core-jsのバージョンが古いから読み取れないのかと仮設し、上記のバージョンアップ及びインストールを行ったものの、ブラウザに表示されなかった。

補足情報（FW/ツールのバージョンなど）

使用機材：MacOS Big Sar
ruby :2.6.5
rails: 6.0.3.5
webpacker:4.0

Comments

[hoshi-takanori]

AppTodo.js でも import React from 'react' とすれば良いのでは？