Node.js&ReactアプリケーションでSocket.ioを使おうとするとrequire is not defined

Question

Node.js と　React で　簡単なチャットアプリを開発中にUncaught　ReferenceError require is not defined
発生。

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

Uncaught ReferenceError: require is not defined
at Object.5747 (external "fs":1) external "fs" 1
at n (bootstrap:18)
at Object.3756 (XMLHttpRequest.js:14)
at n (bootstrap:18)
at Object.7080 (index.js:1)
at n (bootstrap:18)
at Object.7150 (socket.js:1)
at n (bootstrap:18)
at Object.1756 (index.js:1)
at n (bootstrap:18)

と出たため　developper toolのsources を確認すると　external "fs" に

module.exports = require("fs");;

がエラーマークとともに表示

該当のソースコード

<構造>
-node-modules
-public
----bundle.js
----bundle.js.LICENSE.txt
----index.html
-src
----index.js
----ChatForm.js
-app.js
-package.json
-package-lock.json
-webpack.config.js

<webpack.config>－－－－－－－－－－－－－－－－－－－－－－－－－－
const path = require('path');

module.exports ={
entry:path.join(__dirname,"src/index.js"),
target:"node",
output:{
path:path.join(__dirname,"public"),
filename:"bundle.js"
},
devtool: 'inline-source-map',
module:{
rules:[
{
test:/.js$/,
loader:"babel-loader",
options:{
presets:["@babel/preset-env","@babel/preset-react"]
}
}
]
}
}

<package.json>－－－－－－－－－－－－－－－－－－－－－－－－－
{
"name": "notra",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "webpack",
"watch": "webpack -w",
"start": "node app.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"path": "^0.12.7",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"socket.io": "^3.0.5",
"socket.io-client": "^3.0.5"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"babel-loader": "^8.2.2",
"webpack": "^5.13.0",
"webpack-cli": "^4.3.1"
}
}

<app.js>－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
const express = require('express');
const app = express();
const server = require('http').createServer(app);
const portNo = 3001;

app.use('/public',express.static('./public'));
app.use('/',(req,res)=>{
res.redirect(302,'/public');
});

const socketio = require('socket.io');
const io = socketio(server);

io.on('connection',(socket)=>{
console.log('接続',socket.client.id);
socket.on('chat',(msg)=>{
console.log('メッセージ',msg);
io.emit('chat',msg);
});
});

server.listen(portNo);

<index.js>－－－－－－－－－－－－－－－－－－－－－－－－－－
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import socketio from 'socket.io-client';
import ChatForm from './ChatForm';
const socket = socketio();

class App extends Component{
constructor(props){
super(props);
this.state={
logs:[]
}
}

componentDidMount(){
    socket.on('chat',(obj)=>{
        const logs2 = this.state.logs;
        obj.key = 'key_' + (this.state.logs.length + 1);
        console.log(obj);
        logs2.unshift(obj);
        this.setState({logs:logs2});
    });
}

render(){
    const messages = this.state.logs.map((value,index)=>{
        <div key={value.key}>
            <span>{value.name}</span>
            <span>{value.message}</span>
        </div>
    });
    return(
        <div>
            <h1>チャット</h1>
            <ChatForm />
            <div>{messages}</div>
        </div>
    );
}

}

ReactDOM.render(
<App/>,document.getElementById('root')
);

<ChatForm.js>－－－－－－－－－－－－－－－－－－－－－－－－－－－
import React,{Component} from 'react';
import socketio from 'socket.io-client';
const socket = socketio();

class ChatForm extends Component{
constructor(props){
super(props);
this.state={
name:'',
msg:''
}
this.nameChange = this.nameChange.bind(this);
this.msgChange = this.msgChange.bind(this);
}

nameChange(e){
    this.setState({name:e.target.value});
}

msgChange(e){
    this.setState({msg:e.target.value});
}

send(){
    socket.emit('chat',{
        name:this.state.name,
        msg:this.state.msg
    });
    this.setState({msg:''});
}


render(){
    return(
        <div>
            名前:<br/>
            <input type="text" onChange={this.nameChange} value={this.state.name}/><br/>
            メッセージ:<br/>
            <input type="text" value={this.state.msg} onChange={this.msgChange}/><br/>
            <button onClick={this.send}>送信</button>
        </div>
    );
}

}
export default ChatForm;

<index.html>－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>NODE</title> </head> <body> <div id="root"></div> <script src="/public/bundle.js"></script> </body> </html>

試したこと

エラーまでの流れ
１．socket使わずにhttpでReact表示ー＞成功、エラーなし
2. socket.io とsocket.io-client をインストールし　
app.js,index.js,ChatForm.jsを書き換えた後エラー発生

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

ここにより詳細な情報を記載してください。

Comments

[hoshi-takanori]

Uncaught ReferenceError: require is not defined というエラーは何をした時にどこに出ましたか？

[gasuketu]

ビルド成功
起動、ターミナルではエラーなし
localhostにアクセス
表示なし、devtoolに require is not defined
という流れです。よろしくお願いします。

[hoshi-takanori]

devtool ってブラウザのことですよね。require が書いてあるのは app.js だと思いますが、app.js はサーバー側のコードなのに、ブラウザで動いてるからでは…。

[gasuketu]

協力ありがとうございます。ブラウザのことです。socket導入前(試したこと　の１）に、webpack.configやpackage.jsonのコードは掲載しているのと同様の内容で動作を確認した時はエラーも表示されずReactの内容が表示されていたのですが、その時にもapp内にexpressなどをrequireは記述していました。。。
話がずれている場合は遠慮なくおしゃっていただきたいです。協力ありがとうございます。

[hoshi-takanori]

えっと、app.js は node で動く Web サーバーで、index.js と ChatForm.js はクライアント (ブラウザの中で動く) ってのはお分かりですか？ で、app.js を node で動かす場合は require は node が処理しますが、ブラウザでは require は使えません。

[gasuketu]

ありがとうございます。理解しています。requireがブラウザで使えないことも理解しています。

[hoshi-takanori]

それは失礼しました。とにかく、ブラウザが require なんて知らないと言ってるということは app.js がどういう訳かブラウザで実行されてますが、質問文のコードを眺めた限り、そうなる原因は見当たらないので…。

[gasuketu]

協力ありがとうございました<(_ _)>。もう一度気張ってみます。