Closed10

特定のサーバーで何故かReactが起動しない

ピン留めされたアイテム
BonyChopsBonyChops

結論

おそらくこれが効いた

  • 通常はポートがかぶっているとエラーが出るから気づかなかった
  • 結局なんで出なかったんだろう
  • 謎に起動しないときはポートを変えてみる / ポートをbindしているプロセスを殺すとよいです(ただし自分が過去に起動した確証があるものでないと危険)
$ sudo netstat -lntp | grep 3000
tcp       xx      0 0.0.0.0:3000            0.0.0.0:*               LISTEN      xxx/node        
$ kill -9 xxx
BonyChopsBonyChops

起きていること

npm start

実行後,本来であれば

Starting developing server...

が出るはずが,画面が一度clearが実行されたような挙動(真っ暗)のあと何も表示されない

試したこと

  • rm --rf node_modules
  • rm package-lock.json
  • npm cache verify
  • npm cache clean --force
  • npm cache rm --force
  • rm --rf ~/.npm
  • npm --verbose startnpm start -- --verbose をしたが,前者ではtiming npm:load Completed in 40ms, 後者では何も出ず終了
BonyChopsBonyChops
cd scripts
cp start.js start.js.orig
cat start.js | nawk '{print $0, "console.log("NR")"}' > test.txt
mv test.txt start.js

これで次のようなstart.js ができる(ゴリ押し)

'use strict'; console.log(1)
 console.log(2)
// Do this as the first thing so that any code reading it knows the right env. console.log(3)
process.env.BABEL_ENV = 'development'; console.log(4)
process.env.NODE_ENV = 'development'; console.log(5)
 console.log(6)
...

あとは動くようにいい感じにしていく

BonyChopsBonyChops
node scripts/start.js > res.txt

実行の結果は以下

...
48
49
66
69
154
71
Something is already running on port 3000.
76
77

77まで動いている模様.別のプロセスが3000を使っているというエラーが一瞬出た

BonyChopsBonyChops

3000番ポートをbindしてるプロセス(たぶん昔起動したReact)を握りつぶす

$ sudo netstat -lntp | grep 3000
tcp       xx      0 0.0.0.0:3000            0.0.0.0:*               LISTEN      xxx/node        
$ kill -9 xxx
$ sudo netstat -lntp | grep 3000
$ 
BonyChopsBonyChops
node scripts/start.js
150
Cannot read properties of undefined (reading 'SIGTERM')
151
152

なんかそれっぽいのが出た.

...
    if (process.env.CI !== 'true') { console.log(141)
      // Gracefully exit when stdin ends console.log(142)
      process.stdin.on('end', function () { console.log(143)
        devServer.close(); console.log(144)
        process.exit(); console.log(145)
      }); console.log(146)
    } console.log(147)
  }) //console.log(148)
  .catch(err => { console.log(149)
    if (err && err.message) { console.log(150)
      console.log(err.message); console.log(151)
    } console.log(152)
    process.exit(1); console.log(153)
  }); console.log(154)
...

ここらへんが関係してそう.ただ,console.logが破壊しているだけな気もするので,一度もとのソースに戻す

このスクラップは2022/10/12にクローズされました