【徹底解説】Yarn で Reactjs アプリケーションをビルド中に発生する "Could not find plugin "proposal-numeric-separator"" エラーとその解決方法

Reactjs ビルド時に Yarn で発生する "Could not find plugin "proposal-numeric-separator"" エラーの原因と解決策

Reactjs アプリケーションを Yarn でビルドしようとすると、"Could not find plugin "proposal-numeric-separator"" というエラーが発生することがあります。このエラーは、Babel の提案機能である "proposal-numeric-separator" が見つからないことが原因です。

原因

このエラーが発生する主な理由は以下の2つです。

解決策

以下の方法で問題を解決できます。

方法 1: node_modules フォルダと package-lock.json または yarn.lock ファイルを削除して再インストール

1. 以下のコマンドを実行して、必要なパッケージを再インストールします。

yarn install

方法 2: "proposal-numeric-separator" を手動でインストール

1. 以下のコマンドを実行して、"proposal-numeric-separator" を手動でインストールします。

yarn add @babel/plugin-proposal-numeric-separator

方法 3: .babelrc ファイルで "proposal-numeric-separator" を明示的に設定

1. .babelrc ファイルに以下の内容を追加します。

{
  "presets": ["react-app"],
  "plugins": [
    "@babel/plugin-proposal-numeric-separator"
  ]
}

• 上記の解決策を試しても問題が解決しない場合は、使用している Reactjs のバージョンや、他のインストール済みのパッケージとの互換性などを確認する必要があります。

// App.js

import React from 'react';

function App() {
  const [number, setNumber] = React.useState(123456789);

  const handleChange = (event) => {
    setNumber(event.target.value);
  };

  return (
    <div>
      <input type="number" value={number} onChange={handleChange} />
      <p>入力された数値: {number}</p>
    </div>
  );
}

export default App;

このコードでは、以下のことが行われています。

1. useState フックを使用して、number という名前の状態変数を定義します。この変数は、入力された数値を保持するために使用されます。
2. handleChange 関数は、入力フィールドの値が変更されたときに呼び出されます。この関数は、number 状態変数を新しい値に更新します。
3. JSX を使用して、入力フィールドと数値を表示するレンダリングロジックを定義します。

このコードを実行すると、ユーザーが入力した数値が入力フィールドと下部の段落に表示されます。

Babel 7.9.0 以降では、"proposal-numeric-separator" がコア機能として組み込まれているため、プラグインのインストールが不要になりました。Babel のバージョンを 7.9.0 以降に更新することで、このエラーを回避できます。

別の構文を使用する

"proposal-numeric-separator" は、数値リテラルをより読みやすくフォーマットするための提案機能です。この機能を使用しなくても、アンダースコア (_) を使用して数値リテラルを区切ることができます。

const bigNumber = 123_456_789;
console.log(bigNumber); // 123456789

Create React App を使用する

Create React App は、Reactjs アプリケーションを簡単にセットアップするためのツールです。Create React App はデフォルトで Babel 7.9.0 以降を使用しているため、"proposal-numeric-separator" エラーが発生する可能性が低くなります。

手動で Babel 設定を構成する

.babelrc ファイルを手動で編集して、"proposal-numeric-separator" プラグインを明示的に設定することもできます。

{
  "presets": ["react-app"],
  "plugins": [
    "@babel/plugin-proposal-numeric-separator"
  ]
}