質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.59%

webpackによるビルドのエラーを解決したい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 858

score 36

前提・実現したいこと

現在webpackによるビルドが動作しなくなってしまったため、そのエラーを直したいと考えています。
エラーが発生するまでは正常にビルドできていたため、何か変更してしまった可能性があります。

何か原因にお心当たりのある方がいましたら、ご教授いただければ幸いです。

実行環境

Windows 10
Ubuntu 18.04.5 LTS (Bionic Beaver)

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

ビルドを行うと、以下のようなエラーが発生します。

vagrant@ubuntu-bionic:~/workspace/bbs$ yarn run build
yarn run v1.21.1
$ webpack
[webpack-cli] { [Error: EIO: i/o error, close] errno: -5, code: 'EIO', syscall: 'close' }
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

ソースコード

簡略化のため、headerコンポーネントを表示するコードになっています。

  • index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
  } from 'react-router-dom';
import { BBSApp } from './bbsApp';
import { Header } from './header';

const App = () => {
    return (
        <>
            <Header styles={styles} />          
        </>
    );
};

const styles = {
    h1: {
      backgroundColor: 'blue',
      color: 'white',
      fontSize: 24,
      padding: 12
    },
    form: {
      padding: 12,
      border: '1px solid silver',
      backgroundColor: '#F0F0F0'
    },
    right: {
      textAlign: 'right'
    }
  };

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
  • header.js
import React from 'react';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
  } from 'react-router-dom';
import ReactDOM from 'react-dom';
import { BBSApp } from './bbsApp';

export const Header = (props) => {
    const {styles} = props;
    return (
        <>
            <h1 style={styles.h1}>掲示板</h1>
        </>
    );
};
  • index.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body>
  <div id="root"></div>
  <script src="bundle.js"></script>
</body></html>
  • package.json
{
  "name": "bbs",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "babel-loader": "^8.2.2",
    "express": "^4.17.1",
    "nedb": "^1.8.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "superagent": "^6.1.0",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.2.0"
  }
}
  • webpack.config.js
const path = require('path')
module.exports = {
    mode: "production",
    entry:   path.join(__dirname, 'src/index.js'),
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },

    module: {
      rules: [
        {
          test: /\.js$/,
          use: [
            {
              loader: "babel-loader",
              options: {
                presets: [
                  "@babel/preset-env",
                  "@babel/react"
                ]
              }
            }
          ]
        }
      ]
    },
    target: ["web", "es5"],
  };

問題発生までに行ったこと

エラーが起こった日には、react routerの導入のためyarn add react-router-domは行いました。ただ、これの動作確認はできており、直後にエラーが発生したわけではないです。

エラーが起きた時の状況は具体的には思い出せないのですが、Routerのswitchによるルーティングをindex.jsで調整していました。

試したこと

主に3つ試しました。

  • 以前動いていたファイルに切り替える → 状況変わらず
  • webpackの再インストール → 状況変わらず
  • webpack-cliの再インストール → エラーによりできず
//webpack-cli再インストールのエラー内容
vagrant@ubuntu-bionic:~/workspace/bbs$ yarn add webpack-cli
yarn add v1.21.1
[1/4] Resolving packages...
[2/4] Fetching packages...
error human-signals@2.1.0: The engine "node" is incompatible with this module. Expected version ">=10.17.0". Got "10.14.2"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.


以上を考慮すると、コード自体に原因はないように個人的には考えております。

どなたか何卒よろしくお願いします。

追加で試したこと①:nodeのバージョン変更

error human-signals@2.1.0: The engine "node" is incompatible with this module. Expected version ">=10.17.0". Got "10.14.2"

このエラー文を参考にnodeのバージョンをv10.17.0に変更しましたが、同様のエラーが発生しました。

追加で試したこと②:routerのアンインストール

routerをアンインストールし、コードを改変せずにビルドしたところ、以下のようなエラーに変わりました。前半は普段ビルドしているときに出てくる文が出てきました。
これが原因かと思ったのですが、その後router部分を削除してビルドすると、元のエラーに戻りました。試しに他の文法エラーを入れてビルドしても以下のようにエラーが発生しました。

ここから分かることは、文法ミスが原因の可能性は低いということでしょうか。

vagrant@ubuntu-bionic:~/workspace/bbs$ yarn run build
yarn run v1.21.1
$ webpack
assets by status 161 KiB [cached] 1 asset
orphan modules 12.4 KiB [orphan] 3 modules
runtime modules 718 bytes 3 modules
modules by path ./node_modules/ 277 KiB
  modules by path ./node_modules/superagent/ 72.7 KiB 11 modules
  modules by path ./node_modules/react/ 9.06 KiB 2 modules
  modules by path ./node_modules/react-dom/ 178 KiB
    ./node_modules/react-dom/index.js 1.32 KiB [built] [code generated]
    ./node_modules/react-dom/cjs/react-dom.production.min.js 176 KiB [built] [code generated]
  modules by path ./node_modules/scheduler/ 7.28 KiB
    ./node_modules/scheduler/index.js 197 bytes [built] [code generated]
    ./node_modules/scheduler/cjs/scheduler.production.min.js 7.09 KiB [built] [code generated]
  ./node_modules/object-assign/index.js 2.17 KiB [built] [code generated]
  ./node_modules/component-emitter/index.js 3.27 KiB [built] [code generated]
  ./node_modules/fast-safe-stringify/index.js 4.83 KiB [built] [code generated]
./src/index.js + 3 modules 13.9 KiB [built] [code generated]

ERROR in ./src/bbsApp.js 24:0-80
Module not found: Error: Can't resolve 'react-router-dom' in '/home/vagrant/workspace/bbs/src'
 @ ./src/index.js 4:0-34

ERROR in ./src/header.js 2:0-80
Module not found: Error: Can't resolve 'react-router-dom' in '/home/vagrant/workspace/bbs/src'
 @ ./src/index.js 5:0-34 8:97-103

ERROR in ./src/index.js 3:0-80
Module not found: Error: Can't resolve 'react-router-dom' in '/home/vagrant/workspace/bbs/src'

webpack 5.11.1 compiled with 3 errors in 9714 ms
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

+1

環境を新しく構築したところ、ビルドすることできました。結局原因は分かりませんでした。
educ_gt様、ご回答いただきありがとうございました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

The engine "node" is incompatible with this module. Expected version ">=10.17.0". Got "10.14.2"
error Found incompatible module.


このエラーに従って、node.jsを新しいバージョンにしたらよさそうです。

何でnode.jsを導入したかによりますが、導入方法、node updateとかで調べたら出てくると思います。

そしたらwebpack-cliも最新版が入ってエラーが解決しそうな気がします。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/01/03 16:05

    ご回答ありがとうございます!
    承知しました。現状cliに原因がありそうなので、アップデートしてみます。

    キャンセル

  • 2021/01/03 18:11

    nodeをv10.17.0に変更しましたが、同様のエラーになりました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る