常連

### 実現したいこと
htmlにおいて、lang='ja'の時、
<h1>{{ _('home') }}</h1>について、

「ホーム」と翻訳して表示したい。


### 発生している問題・分からないこと
langの指定を変えても、翻訳が適用されない。

### エラーメッセージ
```error
#ターミナルやコンソールではエラーを確認できませんでした。
```

### 該当のソースコード

```py
#main.py
from app import create_app
import webbrowser
import threading

def open_browser():
      webbrowser.open_new('http://127.0.0.1:5000/?lang=ja')
      #webbrowser.open_new('http://127.0.0.1:5000/?lang=en')

app = create_app()

if __name__ == '__main__':
    threading.Timer(1.25, open_browser).start()
    app.run(debug=True)

#config.py
class Config:
#秘密鍵は設定しています。
    SECRET_KEY = ""
    LANGUAGES = {
    'en': 'English',
    'ja': '日本語'
    }
    BABEL_DEFAULT_LOCALE = 'en'
    BABEL_TRANSLATION_DIRECTORIES = './locale'
```

```app/.py
#app/__init__.py
from flask import Flask, request, g
from flask_babel import Babel
from config import Config

def create_app():
    app = Flask(__name__)
    app.config.from_object(Config)

    # get_locale関数を定義
    def get_locale():
        # リクエストの引数から言語設定を取得し、なければデフォルトの言語設定を使用
        return request.args.get('lang', app.config['BABEL_DEFAULT_LOCALE'])

    # Babelインスタンスを作成し、locale_selectorパラメータにget_locale関数を渡す
    babel = Babel(app, locale_selector=get_locale)

    # get_locale関数をテンプレートのグローバル関数として登録
    @app.context_processor
    def context_processor():
        return dict(get_locale=get_locale)

    from . import routes
    routes.init_app(app)
    
    return app

#app/routes.py
from flask import render_template
from flask import current_app as app

def init_app(app):
    @app.route('/')
    def home():
        return render_template('01_home.html')

    @app.route('/loading')
    def loading():
        return render_template('02_loading.html')

    @app.route('/select')
    def select():
        return render_template('03_select.html')

    @app.route('/answer')
    def answer():
        return render_template('04_answer.html')  
```

```babel.cfg
[python: **.py]
[jinja2: app/templates/**.html]
jinja2_extensions = jinja2.ext.autoescape,jinja2.ext.with_,jinja2.ext.i18n
```

```messages.po
# Japanese translations for PROJECT.
# Copyright (C) 2024 ORGANIZATION
# This file is distributed under the same license as the PROJECT project.
# FIRST AUTHOR <EMAIL@ADDRESS>, 2024.
#
msgid ""
msgstr ""
"Project-Id-Version: PROJECT VERSION\n"
"Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
"POT-Creation-Date: 2024-03-16 15:07+0900\n"
"PO-Revision-Date: 2024-03-16 10:24+0900\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language: ja\n"
"Language-Team: ja <LL@li.org>\n"
"Plural-Forms: nplurals=1; plural=0;\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=utf-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Generated-By: Babel 2.14.0\n"

#: app/templates/00_base.html:6 app/templates/00_base.html:13
#: app/templates/01_home.html:3
msgid "title"
msgstr "タイトル"

#: app/templates/01_home.html:3 app/templates/01_home.html:6
msgid "home"
msgstr "ホーム"

```

```html
00_base.html
<!DOCTYPE html>
<html lang="{{ get_locale() }}">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{% block title %}{{ _('title') }}{% endblock %}</title>
        
    </head>
    <body>
        {% block content %}
            <header>
                <div>
                    <h1>{{ _('title') }}</h1>
                </div>
            </header>
        {% endblock %}
    </body>
</html>

01_home.html
{% extends '00_base.html' %}

{% block title %}{{ _('home') }} | {{ _('title') }}{% endblock %}

{% block content %}
    <h1>{{ _('home') }}</h1>
{% endblock %}
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
<html lang="{{ get_locale() }}">がうまくいっていないのかと思い、コンソールを確認しましたが、正常に機能していました。
localeを消してみても何の変化も見られなかったので、loceleフォルダの参照が上手くできていないのかもしれません。

### 補足
構造は下記のようになっています。
・config.py
・babel.cfg
・main.py
・messages.pot
・locale/ja/LC_MESSAGES/messages.po, messages.mo
・app/models.py, __init__.py, routes.py, static/, templates/

Babelの国際化について、web上で翻訳が適用されない。

### 実現したいこと
AttributeErrorを解決して、
@babel.localeselector
を利用したい。

### 発生している問題・分からないこと
@babel.localeselector
の実行時にAttributeErrorが発生しました。

### エラーメッセージ
```error
Traceback (most recent call last):
  File "/Users/.../main.py", line 1, in <module>
    from app import create_app
  File "/Users/.../app/__init__.py", line 20, in <module>
    @babel.localeselector
     ^^^^^^^^^^^^^^^^^^^^
AttributeError: 'Babel' object has no attribute 'localeselector'
```

### 該当のソースコード

```main.py
from app import create_app

app = create_app()
```

```__init__.py
from flask import Flask, request
from flask_babel import Babel
from config import Config

def create_app():
    app = Flask(__name__)
    app.config.from_object(Config)

    babel = Babel(app)

    @babel.localeselector
    def get_locale():
        return request.args.get('lang', app.config['BABEL_DEFAULT_LOCALE'])
```

```config.py
class Config:
#秘密鍵は設定しています。
    SECRET_KEY = ""
    LANGUAGES = {
    'en': 'English',
    'ja': '日本語'
    }
    BABEL_DEFAULT_LOCALE = 'en'
    BABEL_TRANSLATION_DIRECTORIES = './locale'
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
flaskの再インストールなど行いましたが、改善されませんでした。バージョンは最新です。


### 補足
プログラム初心者で、つまらない質問でしたら申し訳ありません。
よろしくお願いいたします。

'Babel' object has no attribute 'localeselector'が解決できない

現在Reactの勉強を始めた初学者です。
標題の通り、jsファイルをビルドさせたいのですが下記エラーで詰まっています。
原因が分かる方がいましたらご教示願います。
宜しくお願いします。

エラー内容

```ここに言語を入力
PS C:\Users\ak198\Desktop\react_redux> gulp
[20:16:40] Using gulpfile ~\Desktop\react_redux\gulpfile.js
[20:16:40] Starting 'default'...
[20:16:40] Starting 'compile'...
[20:16:40] Starting 'browser-sync'...
[20:16:40] Starting 'watch'...
[20:16:41] 'compile' errored after 1.13 s
[20:16:41] Error: File not found with singular glob: C:/Users/ak198/Desktop/react_redux/.src/js/app.js (if this was purposeful, use `allowEmpty` option)
    at Glob.<anonymous> (C:\Users\ak198\Desktop\react_redux\node_modules\glob-stream\readable.js:84:17)
    at Object.onceWrapper (events.js:315:30)
    at emitOne (events.js:116:13)
    at Glob.emit (events.js:211:7)
    at Glob._finish (C:\Users\ak198\Desktop\react_redux\node_modules\glob\glob.js:197:8)
    at done (C:\Users\ak198\Desktop\react_redux\node_modules\glob\glob.js:182:14)
    at Glob._processSimple2 (C:\Users\ak198\Desktop\react_redux\node_modules\glob\glob.js:688:12)
    at C:\Users\ak198\Desktop\react_redux\node_modules\glob\glob.js:676:10
    at Glob._stat2 (C:\Users\ak198\Desktop\react_redux\node_modules\glob\glob.js:772:12)
    at lstatcb_ (C:\Users\ak198\Desktop\react_redux\node_modules\glob\glob.js:764:12)
    at RES (C:\Users\ak198\Desktop\react_redux\node_modules\inflight\inflight.js:31:16)
    at f (C:\Users\ak198\Desktop\react_redux\node_modules\once\once.js:25:25)
    at FSReqWrap.oncomplete (fs.js:152:21)
[20:16:41] 'default' errored after 1.14 s
[20:16:41] The following tasks did not complete: browser-sync, watch
[20:16:41] Did you forget to signal async completion?

```

glupfile.js
```
const gulp = require("gulp");
const watch = require("gulp-watch");
const plumber = require("gulp-plumber");
const notify = require("gulp-notify");
const browserSync = require("browser-sync").create();
const webpackStream = require("webpack-stream");
const webpackConfig = require("./webpack.config.js");

gulp.task("compile", function () {
  return gulp.src([
    ".src/js/app.js",
  ])
    .pipe(plumber({errorHandler: notify.onError("<%= error.message %>")}))
    .pipe(webpackStream(webpackConfig), null, function(err, stats) {
      if (stats.compilation.errors.length > 0) {
        notify({
          title: "webpack error",
          message: stats.compilation.errors[0].error
        });
      }
    })
    .pipe(gulp.dest("js"))
});

gulp.task("browser-sync", function () {
  browserSync.init({
    server: {
      baseDir: "./"
    }
  });
});

gulp.task("watch", function () {
  watch(["./src/js/**/**.js"], function () {
    gulp.setMaxListeners(["compile"]);
  })
  watch(["./**/*.html", "./js/**.*js"], function () {
    browserSync.reload();
  })
})

gulp.task("default", gulp.series(gulp.parallel("compile", "browser-sync", "watch")));
```

webpack.config.js
```
module.exports = {
  /* ビルドの起点となるファイルの設定 */
  entry: './src/js/index.js',
  /* 出力されるファイルの設定 */
  output: {
    path: '/js', // 出力先のパス
    filename: 'bundle.js' // 出力先のファイル名
  },
  module: {
    /* loaderの設定 */
    rules: [
      {
        test: /.(js|jsx)$/, // 対象となるファイルの拡張子（正規表現可）
        exclude: /node_modules/, // 除外するファイル/ディレクトリ（正規表現可）
        loader: 'babel-loader', // 使用するloader
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
};
```

gulp.taskを実行しwebpackでjsファイルをビルドさせたい

### 前提・実現したいこと

現在、Chromeの拡張機能の開発をしており、プロトタイプが完成したため、webpackやbabelできちんと大規模に作成できるように移行をしています。

### ファイル構成

現在ファイル構成は、ルートディレクトリが

```
.
├── dist
├── index.js
├── node_modules
├── package-lock.json
├── package.json
├── src
└── webpack.config.js
```

上記のようになっており、さらに、srcフォルダの中は


```
src.
├── components
├── htmls
│   └── atcoder.html
├── images
│   ├── large_icon.png
│   └── small_icon.png
├── manifest.json
├── scripts
│   ├── background
│   │   └── icon_click.js
│   ├── background.js
│   ├── options
│   ├── options.js
│   ├── popup
│   ├── popup.js
│   └── third
│       └── jquery-3.3.1.min.js
└── styles
```

上記の様になっています。

### webpackの設定

```javascript
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: {
        background: path.join(__dirname, 'src', 'scripts', 'background.js'),
        popup: path.join(__dirname, 'src', 'scripts', 'popup.js'),
        options: path.join(__dirname, 'src', 'scripts', 'options.js')
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: 'scripts/[name].bundle.js',
    },
    target: "web",
    resolve: {
        extensions: ['ts', '.js'],
        modules:
            [
                'node_modules',
                path.resolve(__dirname, 'src')
            ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        port:
            9000,
        hot:
            true,
    }
    ,
    module: {
        rules: [
            {
                test: /.js$/,
                use: {loader: 'babel-loader'}
            }
        ]
    }
    ,
    plugins: [
        new CopyWebpackPlugin(
            [
                {
                    from: path.join(__dirname, 'src', 'manifest.json'),
                    to: path.join(__dirname, 'dist'),
                },
                {
                    from: path.join(__dirname, 'src', 'htmls'),
                    to: path.join(__dirname, 'dist/htmls')
                },
                {
                    from: path.join(__dirname, 'src', 'images'),
                    to: path.join(__dirname, 'dist/images')
                },
                {
                    from: path.join(__dirname, 'src', 'components'),
                    to: path.join(__dirname, 'dist/components')
                },
                {
                    from: path.join(__dirname, 'src', 'styles'),
                    to: path.join(__dirname, 'dist/styles')
                }
            ]
        )
    ]
}

```

### package.jsonの設定

```json
{
  "name": "atcoder_save",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode=development",
    "start": "webpack --watch  --mode=development"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "copy-webpack-plugin": "^4.5.2",
    "webpack": "^4.16.3",
    "webpack-cli": "^3.1.0"
  }
}

```

### 発生している問題・エラーメッセージ

src/scrpits/background.jsから、src/scripts/background/icon_click.jsを読み込もうと考えています。(background.jsがentryで、backgroundフォルダの中のソースコードが実際の実装。)

しかし、以下のようなエラーが表示されてしまいます。


```
ERROR in ./src/scripts/background.js
Module not found: Error: Can't resolve 'background/icon_click' in '/Users/ganariya/Desktop/AtCoder_Save/src/scripts'
 @ ./src/scripts/background.js 3:15-47
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! atcoder_save@1.0.0 build: `webpack --mode=development`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the atcoder_save@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
```

webpackがなにかエラーをやらかしているのだと考えます。

### 該当のソースコード

background.js
```javascript
const {func} = require('background/icon_click');
func();
```

background/icon_click.js
```javascript
function func() {
    console.log("func");
}

module.exports.func = func;
```

### 試したこと

いろいろと、ネットを調べて、モジュールを最新にしたり、よくあるエラーミスを試したのですが、治すことができませんでした。

### 補足情報（FW/ツールのバージョンなど）

OS:Mac
IDE: WebStorm
フレームワーク: Webpack + babel + chrome extension

WebpackのCan't resolveがどうしても解消できない

## 前提・実現したいこと
expo startを実行して、エラーが発生しない状態にしたい

## 発生している問題
expo startを実行すると以下のようなエラーが表示されます。
```
$ expo start

┌─────────────────────────────────────────────────────────────────────────┐
│                                                                         │
│   There is a new version of expo-cli available (4.13.0).                │
│   You are currently using expo-cli 4.12.1                               │
│   Install expo-cli globally using the package manager of your choice;   │
│   for example: `npm install -g expo-cli` to get the latest version      │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘
Starting project at /Users/ユーザー名/Documents/アプリ名
Developer tools running on http://localhost:19002
Opening developer tools in the browser...
Cannot find module '@babel/code-frame'
Require stack:
- /Users/ユーザー名/Documents/アプリ名/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js
- /Users/ユーザー名/Documents/アプリ名/node_modules/metro/src/node-haste/DependencyGraph.js
- /Users/ユーザー名/Documents/アプリ名/node_modules/metro/src/Bundler.js
- /Users/ユーザー名/Documents/アプリ名/node_modules/metro/src/IncrementalBundler.js
- /Users/ユーザー名/Documents/アプリ名/node_modules/metro/src/Server.js
- /usr/local/lib/node_modules/expo-cli/node_modules/@expo/dev-server/build/metro/importMetroFromProject.js
- /usr/local/lib/node_modules/expo-cli/node_modules/@expo/dev-server/build/HermesBundler.js
- /usr/local/lib/node_modules/expo-cli/node_modules/@expo/dev-server/build/MetroDevServer.js
- /usr/local/lib/node_modules/expo-cli/node_modules/xdl/build/start/startDevServerAsync.js
- /usr/local/lib/node_modules/expo-cli/node_modules/xdl/build/internal.js
- /usr/local/lib/node_modules/expo-cli/node_modules/xdl/build/index.js
- /usr/local/lib/node_modules/expo-cli/build/exp.js
- /usr/local/lib/node_modules/expo-cli/bin/expo.js
```

## 試したこと
①Cannot find module '@babel/code-frame'と表示されているので、
```
$ expo install @babel/code-frame
```

②こちらのサイト(https://www.mongodb.com/community/forums/t/chapter0-ticket-connection-cannot-find-module-babel-register/98937/6)の中段あたりの記載内容を参考に、
```
$ npm uninstall packeage-lock.json node_modules/
$ expo install

```

③先程のサイト（https://www.mongodb.com/community/forums/t/chapter0-ticket-connection-cannot-find-module-babel-register/98937/6）の記載事項の少し下にある、
```
$ npm install --legacy-peer-deps
```

## 補足情報（FW/ツールのバージョンなど）
Expo v4.12.1
node v14.16.0

##
ほぼ一日調べていますが、まだ解決に至っておりません。。
お力をお借りしたいです。よろしくお願いいたします。

expo start実行時のエラーを解決したい

問題）
jquery.lazyload.jsと$(○○).lazyloadを利用する.jsファイルを結合する
ためimport及びrequireで定義、下記設定のwebpackでコンパイルを実行、
その後、index.jsx内の<script src='結合した.js'></script>と定義
すると、require is not definedとエラーになる
開発環境）
・jQueryからReact.jsベースに書き換えるため、コンパイル結合にwebpack
を利用（gulp、grantは本件では扱わないため除外します）
・express(node.js)のapp.jsで、css/jsのhtml(.jsx)から./及び/で
アクセスできるリンク先をプロジェクト名/publicに指定 →よって、index.jsx
(プロジェクト名/views)から<script src=○○.js></script>を指定する
には、プロジェクト名/public内に記載しなければ参照できない 
→ ☓ ./../別のjsファイル.js
状況）
webpackでコンパイルした筈の.jsファイルをindex.jsxで<script src・・・
から指定すると、require is not definedとエラーになる
→ では、index.jsx内に複数のjsを網羅的に<script src・・・を複数記載
すればいいのでは？と思いやってみるが、今度は、js同士の結合ができていない
状態（jquery.lazyload.jsと$(○○).lazyloadを使うjsファイル）となり、
lazyload is not definedとエラーになる（別issueに記載、.ejsでは
問題ないが、.jsx内に書くからそうなるのか？現在質問済み、回答待ち）
```
webpack.config.jsコード）
var webpack = require ('webpack');
var webpackNodeExternals = require ('webpack-node-externals');
module.exports = {
  target :'node',
  entry :{
    jsA :'./○○/○○.js
    jsB :'./○○/○○.js
    jsC :'./○○/○○.js
  },
  output :{
    path :__dirname + '/○○/○○',
    filename :[name].js
  },
  context :__dirname,
  node :{
    __filename :true,
    __dirname :true,
  },
  externals :[webpackNodeExternals()],
  module :{
    loaders :[
      {
         test :/\.js$/,
         exclude :/node_modules/,
         loader :'babel-loader',
         query :{
           presets :['es2015'],
         },
      },
    ],
  },
}, {
・・・
（React.js等をコンパイルする設定のため省略する）
};
```
.babelrcコード）
```
{
  "presets" :["es2015", "react"]
}
```
○○.jsコード）
import $ from 'jquery';
import '・・・/jquery-lazyload.js';又は、require ('jquery.lazyload.cjs')($)の両方試している

webpack.config.jsに適切な設定をしているのにimport又はrequireがコンパイルされておらず、require is not definedと怒られる

ES6+react.js(15.3.2)をbabelで変換して使っています。
親コンポーネントから、formを持つ子コンポーネントへ初期値をstateで渡したいのですがうまくいきません。propsで渡すとformを変更できなくなってしまいます。
なお、うまくいけばformの変更を親から利用しようと考えています。


```react.js
class UMU extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: this.props.value};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});    
    this.props.onEventCallBack({ value: event.target.value });
  }

  render() {
    return (
      <form>
        <label>
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="0">なし</option>
            <option value="1">あり</option>
          </select>
        </label>        
      </form>
    );
  }
}

class Texts extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ""};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
    this.props.onEventCallBack({ value: event.target.value });
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>コメント:
          <input type="text" value={this.state.text} onChange={this.handleChange} />
        </label>
      </form>
    );
  }
}

const json = {
    "name":"tanaka",
    "umu":"1",
    "comment":"foo"
}

class Box extends React.Component {
  constructor(props) {
    super(props);
    this.state =  {data:[]};
  }

  pushMessage(comment){
    console.log(comment);
  }

  componentDidMount() {
      this.setState({data: json});
    }
  render(props) {
    return (
        <div>
            <div>name:{this.state.data.name}</div>
            <UMU value={this.state.data.umu} onEventCallBack={this.pushMessage}/>
            <Texts value={this.state.data.comment} onEventCallBack={this.pushMessage}/>
        </div>
      );
  }
}
ReactDOM.render(<Box/>, document.getElementById('app'));
```

react.jsでformに初期値を持たせたい。

### デプロイ時のおけるエラーを解決してデプロイ したい

初めまして初心者です。

ただいまRubyを使って簡単な画像投稿アプリを作成しています。
デプロイを行おうとした際に下記のエラーメッセージが出ました。

### 発生している問題・エラーメッセージ

herokでデプロイをしようとした際に下記のエラーが出ました
（前提としてこのアプリのデプロイは何度か実行して成功しています）

![ターミナルエラーメッセージ](7b2bcc2d8a995125b10d42edf81a6434.png)ターミナル上でのエラ〜メッセージ


 % heroku logs
で原因を探るとどうやらBuildに失敗しているようでした。
```
2021-06-02T00:44:26.002809+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2021-06-02T00:44:26.087980+00:00 app[web.1]: - Gracefully stopping, waiting for requests to finish
2021-06-02T00:44:26.088956+00:00 app[web.1]: === puma shutdown: 2021-06-02 00:44:26 +0000 ===
2021-06-02T00:44:26.088958+00:00 app[web.1]: - Goodbye!
2021-06-02T00:44:26.089120+00:00 app[web.1]: Exiting
2021-06-02T00:44:26.194056+00:00 heroku[web.1]: Process exited with status 143
2021-06-02T01:09:42.000000+00:00 app[api]: Build started by user ****@icloud.com
2021-06-02T01:10:37.000000+00:00 app[api]: Build failed -- check your build output: https://dashboard.heroku.com/apps/73fd92a9-87d1-4084-806d-52e7542b8b6d/activity/builds/2b176a28-b659-4349-a593-423f36f1097b
2021-06-02T01:11:20.492603+00:00 heroku[web.1]: Unidling
2021-06-02T01:11:20.508363+00:00 heroku[web.1]: State changed from down to starting
```
ですのでherokuのBuildのログを確認しますと

```
"loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
       The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
       	["@babel/plugin-proposal-private-methods", { "loose": true }]
       to the "plugins" section of your Babel config.
       Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
       The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
       	["@babel/plugin-proposal-private-methods", { "loose": true }]
       to the "plugins" section of your Babel config.
       Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
       The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
       	["@babel/plugin-proposal-private-methods", { "loose": true }]
       to the "plugins" section of your Babel config.
       
 !
 !     Precompiling assets failed.
 !
 !     Push rejected, failed to compile Ruby app.
 !     Push failed
```

と確認でいました。
つまり
**【@babel/plugin-proposal-class-properties の "loose" モード オプションが "true" に設定しなおせば解決する】**
と認識しました（この前提が誤っていた場合ご指摘頂けると幸いです）


**__ここでご質問なのですがどうすれば@babel/plugin-proposal-class-properties を設定できるのでしょうか？__**

この【Babel】というファイルを作成した記憶がなく、調べたところ
[Babel作成方法](https://qiita.com/one-kelvin/items/ae57250613aff3472917)は見つけたのですが、これはこちらで作成して変更すれば良いのでしょうか？

そもそも、エラー原因の対処法がこれであっているのかもわからず、ご教授いただけますと幸いです。