常連

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に初期値を持たせたい。

## 前提・実現したいこと
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実行時のエラーを解決したい

現在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ファイルをビルドさせたい

## 概要

テスト対象の関数に引数を定義すると`SyntaxError`でテストが失敗します。

Typescript, Jestでテストを書いています。
ある、関数をテストするためにテストコードを書いたのですが、なぜか`SyntaxError`で失敗します。
ほとんど同じ内容で、関数から引数を除くと成功します。

## 詳細

### 失敗するコード

`hoge.ts`

```ts
const hoge = (huga: number) => { // ←引数hugaを設定
  return 99999;
};

export default hoge;
```

`hoge.test.ts`

```ts
import hoge from "./hoge";

test("hoge", () => {
  const hage = hoge(1); // ←hogeに引数を与えると失敗
  expect(hage).toBe(99999);
});
```

### 成功するコード

`hoge.ts`

```ts
const hoge = () => { // ←引数なし
  return 99999;
};

export default hoge;
```

`hoge.test.ts`

```ts
import hoge from "./hoge";

test("hoge", () => {
  const hage = hoge(); // ←hogeに引数を与えないと成功
  expect(hage).toBe(99999);
});
```

### エラー内容
```bash
$ jest hoge.test.ts
 FAIL  hoge.test.ts
  ● Test suite failed to run

    SyntaxError: /Users/****/Doc/****/hoge.ts: Unexpected token, expected "," (1:18)

    > 1 | const hoge = (huga: number) => {
        |                   ^
      2 |   return 99999;
      3 | };
      4 |

    > 1 | import hoge from "./hoge";
        | ^
      2 |
      3 | test("hoge", () => {
      4 |   const hage = hoge(1);

      at instantiate (node_modules/@babel/parser/src/parse-error/credentials.ts:62:21)
      at instantiate (node_modules/@babel/parser/src/parse-error.ts:60:12)
      at Parser.toParseError [as raise] (node_modules/@babel/parser/src/tokenizer/index.ts:1474:19)
      at Parser.raise [as unexpected] (node_modules/@babel/parser/src/tokenizer/index.ts:1520:16)
      at Parser.unexpected [as expect] (node_modules/@babel/parser/src/parser/util.ts:149:28)
      at Parser.expect [as parseParenAndDistinguishExpression] (node_modules/@babel/parser/src/parser/expression.ts:1754:14)
      at Parser.parseParenAndDistinguishExpression [as parseExprAtom] (node_modules/@babel/parser/src/parser/expression.ts:1162:21)
      at Parser.parseExprAtom [as parseExprSubscripts] (node_modules/@babel/parser/src/parser/expression.ts:722:23)
      at Parser.parseExprSubscripts [as parseUpdate] (node_modules/@babel/parser/src/parser/expression.ts:699:21)
      at Parser.parseUpdate [as parseMaybeUnary] (node_modules/@babel/parser/src/parser/expression.ts:661:23)
      at Parser.parseMaybeUnary [as parseMaybeUnaryOrPrivate] (node_modules/@babel/parser/src/parser/expression.ts:399:14)
      at Parser.parseMaybeUnaryOrPrivate [as parseExprOps] (node_modules/@babel/parser/src/parser/expression.ts:411:23)
      at Parser.parseExprOps [as parseMaybeConditional] (node_modules/@babel/parser/src/parser/expression.ts:366:23)
      at Parser.parseMaybeConditional [as parseMaybeAssign] (node_modules/@babel/parser/src/parser/expression.ts:306:21)
      at parseMaybeAssign (node_modules/@babel/parser/src/parser/expression.ts:260:12)
      at Parser.callback [as allowInAnd] (node_modules/@babel/parser/src/parser/expression.ts:3084:16)
      at Parser.allowInAnd [as parseMaybeAssignAllowIn] (node_modules/@babel/parser/src/parser/expression.ts:259:17)
      at Parser.parseMaybeAssignAllowIn [as parseVar] (node_modules/@babel/parser/src/parser/statement.ts:1387:16)
      at Parser.parseVar [as parseVarStatement] (node_modules/@babel/parser/src/parser/statement.ts:1049:10)
      at Parser.parseVarStatement [as parseStatementContent] (node_modules/@babel/parser/src/parser/statement.ts:449:21)
      at Parser.parseStatementContent [as parseStatement] (node_modules/@babel/parser/src/parser/statement.ts:359:17)
      at Parser.parseStatement [as parseBlockOrModuleBlockBody] (node_modules/@babel/parser/src/parser/statement.ts:1241:25)
      at Parser.parseBlockOrModuleBlockBody [as parseBlockBody] (node_modules/@babel/parser/src/parser/statement.ts:1216:10)
      at Parser.parseBlockBody [as parseProgram] (node_modules/@babel/parser/src/parser/statement.ts:215:10)
      at Parser.parseProgram [as parseTopLevel] (node_modules/@babel/parser/src/parser/statement.ts:197:25)
      at Parser.parseTopLevel [as parse] (node_modules/@babel/parser/src/parser/index.ts:45:10)
      at parse (node_modules/@babel/parser/src/index.ts:67:38)
      at parser (node_modules/@babel/core/src/parser/index.ts:28:14)
          at parser.next (<anonymous>)
      at normalizeFile (node_modules/@babel/core/src/transformation/normalize-file.ts:43:18)
          at normalizeFile.next (<anonymous>)
      at run (node_modules/@babel/core/src/transformation/index.ts:38:23)
          at run.next (<anonymous>)
      at transform (node_modules/@babel/core/src/transform.ts:29:17)
          at transform.next (<anonymous>)
      at evaluateSync (node_modules/gensync/index.js:251:28)
      at sync (node_modules/gensync/index.js:89:14)
      at fn (node_modules/@babel/core/src/errors/rewrite-stack-trace.ts:97:14)
      at transformSync (node_modules/@babel/core/src/transform.ts:66:10)
      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:521:31)
      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:648:40)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:700:19)
      at Object.<anonymous> (hoge.test.ts:1:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.441 s
Ran all test suites matching /hoge.test.ts/i.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```

## 補足情報

`./jest.config.js`, `./jest.setup.js`はそれぞれ作っていません。

`./babel.config.js`をいじっています。

`./babel.config.js`
```js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        modules: "false",
        useBuiltIns: "usage",
        targets: "> 0.25%, not dead",
      },
    ],
  ],
  env: {
    test: {
      presets: [["@babel/preset-env", { targets: { node: "current" } }]],
    },
  },
};
```

もともと、`./babel.config.js`を作らずにテストを実行していたのですが、下記エラーが発生するので[ggって](https://gattino.jp/jest-esm/)これを追加しました。
正直この辺はよくわかっていません。
どちらのエラーもimportでコケているので、ここに問題があるのではないかと思っています。

```bash
$ jest hoge.test.ts
 FAIL  hoge.test.ts
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/****/Doc/****/hoge.test.ts:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import hoge from "./hoge";
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1422:14)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.224 s
Ran all test suites matching /hoge.test.ts/i.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```

## その他

- `hoge.ts`自体に不具合はありません。
- 関数`hoge`の中で`huga`が使われていないことについては、今回の不具合とは関係ないと理解しています。(質問用のコードです。)
- `huga`をstringなど別の型に変えても同様のエラーが発生しています。

引数を取る関数のテストで必ずエラーが発生している

問題）
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と怒られる

### 前提・実現したいこと

現在、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がどうしても解消できない

##実現したいこと

webpackでの制作環境を作っていまして、**pug.scss.js*は問題なく動作するのですが
　imgフォルダの画像がどうしてもページに表示されません。どうしてでしょうか？

### 構造

```tree
├── dist
│   ├── bundle.js
│   ├── index.html
│   └── src
│       └── assets
├── package-lock.json
├── package.json
├── src
│   ├── assets
│   │   ├── img
|   |   |     ├── image.png
│   │   └── scss
│   ├── index.js
│   ├── index.pug
│   └── pug
│       ├── _footer.pug
│       ├── _header.pug
│       ├── _template.pug
└── webpack.config.js
```

```indexpug
extends ./pug/_template.pug

block append var
block main
  p.
    test
  img.test(src="./assets/img/image.png" alt="hoge")
  img(src=`${assets_dir}img/image.png` alt="hoge")

```
```webpackconfig
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = ( env, argv ) => ({
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  // 最適化オプションを上書き
  optimization: {
    minimizer: [
      new TerserPlugin({}),
      new OptimizeCssAssetsPlugin({})
    ]
  },

  devtool: 'inline-source-map',

  //サーバーの設定 npm run start:dev
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    // watchContentBase: true,
    compress: true,
    port: 8000,
    open: true,
  },

  module: {
    rules: [
      // pug-loaderの設定
      {
        test: /.pug$/,
        use: ['pug-loader']
      },

      // babel-loaderの設定
      {
        test: /.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        ],
        exclude: /node_modules/,
      },

      // css/sass-loaderの設定
      {
        test: /.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              url: false
            }
          },
          'sass-loader'
        ]
      },

      // imgの設定
      {
        test: /.(png|svg|jpg|gif)/,
        use: [
          'file-loader',
        ]
      },
    ]
  },

  plugins: [
    new CleanWebpackPlugin(
      ['dist'],
      {
        // 除外するファイルやディレクトリを指定
        exclude: ['img']
      }
    ),
    new MiniCssExtractPlugin({
      filename: './src/assets/style.css'
    }),
    new HtmlWebpackPlugin({
      template: './src/index.pug'
    })
  ]
});

```
```packkagejson
{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "build": "webpack --mode=production",
    "build:dev": "webpack --mode=development --watch",
    "start:dev": "webpack-dev-server --mode=development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "babel-loader": "^8.0.5",
    "clean-webpack-plugin": "^1.0.1",
    "css-loader": "^2.1.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "pug": "^2.0.3",
    "pug-loader": "^2.4.0",
    "sass-loader": "^7.1.0",
    "terser-webpack-plugin": "^1.4.1",
    "url-loader": "^2.1.0",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.8.0"
  }
}

```

### 試したこと
画像以外の参考差分はその都度変更がかかるのですが、画像フォルダのみ色々試したのですが
表示されずにbuild後もdistフォルダにも生成されずに迷っております。

フロントエンドのwebpack環境構築【画像が表示されない】

### デプロイ時のおけるエラーを解決してデプロイ したい

初めまして初心者です。

ただいま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)は見つけたのですが、これはこちらで作成して変更すれば良いのでしょうか？

そもそも、エラー原因の対処法がこれであっているのかもわからず、ご教授いただけますと幸いです。