Strangest Express With Remix bug? | Remix | Page 1

fallen bone Jan 4, 2023, 2:33 PM

#

I am at a loss here, I have a nearly fresh express server that uses a basic config for socket.io and then passes things to remix. I am receiving the strangest behavior that seems to maybe be cache related but I have no idea to even access it since I've tried all things I could think of.

I'm calling these together as a sort of proof of file contents, but also that the file is just not doing what is shown in the code...
I have tried:

Deleting and reinstalling node_modules folder
Deleting and remaking the file itself
Deleting and remaking the file into a newly named file (copied contents, create index.js, paste into index.js)

I have no idea whats gone on here...

#

Example Run of app:

 cat server.js && node server.js
const path = require("path");
const express = require("express");
const app = express();
const compression = require("compression");
const morgan = require("morgan");
const { createRequestHandler } = require("@remix-run/express");
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);

const BUILD_DIR = path.join(process.cwd(), "build");


app.use(compression());

// http://expressjs.com/en/advanced/best-practice-security.html#at-a-minimum-disable-x-powered-by-header
app.disable("x-powered-by");

// Remix fingerprints its assets so we can cache forever.
app.use(
  "/build",
  express.static("public/build", { immutable: true, maxAge: "1y" })
);

// Everything else (like favicon.ico) is cached for an hour. You may want to be
// more aggressive with this caching.
app.use(express.static("public", { maxAge: "1h" }));

app.use(morgan("tiny"));

io.on("connection", (socket) => {
    console.log("a user connected");
});

app.all(
  "*",
  process.env.NODE_ENV === "development"
    ? (req, res, next) => {
        purgeRequireCache();

        return createRequestHandler({
          build: require(BUILD_DIR),
          mode: process.env.NODE_ENV,
        })(req, res, next);
      }
    : createRequestHandler({
        build: require(BUILD_DIR),
        mode: process.env.NODE_ENV,
      })
);
const port = process.env.PORT || 3000;
server.listen(port, () => {
    console.log(`Express server listening on port ${port}`);
});

#


function purgeRequireCache() {
  // purge require cache on requests for "server side HMR" this won't let
  // you have in-memory objects between requests in development,
  // alternatively you can set up nodemon/pm2-dev to restart the server on
  // file changes, but then you'll have to reconnect to databases/etc on each
  // change. We prefer the DX of this, so we've included it for you by default
  for (const key in require.cache) {
    if (key.startsWith(BUILD_DIR)) {
      delete require.cache[key];
    }
  }
}starting
in func
send first listen
Express server listening on port 3000
/Users/brocktho/Desktop/SocSoter/Soul/node_modules/@react-pdf/yoga/src/build/Release/nbind.js:53
        throw ex;
        ^

Error: listen EADDRINUSE: address already in use :::3000
    at Server.setupListenHandle [as _listen2] (node:net:1432:16)
    at listenInCluster (node:net:1480:12)
    at Server.listen (node:net:1568:7)
    at Object.<anonymous> (/Users/brocktho/Desktop/SocSoter/Soul/server.js:53:8)
    at Module._compile (node:internal/modules/cjs/loader:1126:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47
Emitted 'error' event on Server instance at:
    at emitErrorNT (node:net:1459:8)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  code: 'EADDRINUSE',
  errno: -48,
  syscall: 'listen',
  address: '::',
  port: 3000
}

#

(Had to split it cause it was longer than discord allows)

cedar minnow Jan 4, 2023, 2:35 PM

#

something else is using the port 3000

fallen bone Jan 4, 2023, 2:35 PM

#

yea, but it isnt

#

lsof grep 3000 shows nothing

#

ive tried netstat, lsof, i full shut down and restarted

cedar minnow Jan 4, 2023, 2:36 PM

#

try npx kill-port 3000

#

if after a restart it's still the same then something is causing your all to run twice

fallen bone Jan 4, 2023, 2:36 PM

#

you'll see in the cat of the file itself, things are being logged in the run that aren't in the file

#

starting
in func
send first listen
Express server listening on port 3000

#

starting
in func
send first listen
Express server listening on port 3000

#

that gets logged

cedar minnow Jan 4, 2023, 2:37 PM

#

how do you run it?

fallen bone Jan 4, 2023, 2:37 PM

#

node server.js

cedar minnow Jan 4, 2023, 2:37 PM

#

node server.js?

#

if you create a new Remix + Express app without touching anything does it work?

fallen bone Jan 4, 2023, 2:37 PM

#

i thought maybe it was a build tool error so ive tried base node in the terminal and even that throws it

#

I'd bet it does, the thing thats scaring me is there are file contents not matching what node is actually running...
This is my main prod and i was trying to add in express myself so i can add socket.io, it was working until suddenly it stopped...
I'll run a fresh remix-run with express to see if the whole computer is foo bar'd

#

yea, a fresh remix install does indeed work. If i flat out copy and paste the contents of server.js from that fresh remix-express app. the same error occurs

#

cat server.js && node server.js
const path = require("path");
const express = require("express");
const compression = require("compression");
const morgan = require("morgan");
const { createRequestHandler } = require("@remix-run/express");

const BUILD_DIR = path.join(process.cwd(), "build");

const app = express();

app.use(compression());

// http://expressjs.com/en/advanced/best-practice-security.html#at-a-minimum-disable-x-powered-by-header
app.disable("x-powered-by");

// Remix fingerprints its assets so we can cache forever.
app.use(
  "/build",
  express.static("public/build", { immutable: true, maxAge: "1y" })
);

// Everything else (like favicon.ico) is cached for an hour. You may want to be
// more aggressive with this caching.
app.use(express.static("public", { maxAge: "1h" }));

app.use(morgan("tiny"));

app.all(
  "*",
  process.env.NODE_ENV === "development"
    ? (req, res, next) => {
        purgeRequireCache();

        return createRequestHandler({
          build: require(BUILD_DIR),
          mode: process.env.NODE_ENV,
        })(req, res, next);
      }
    : createRequestHandler({
        build: require(BUILD_DIR),
        mode: process.env.NODE_ENV,
      })
);
const port = process.env.PORT || 3000;

app.listen(port, () => {
  console.log(`Express server listening on port ${port}`);
});

#

function purgeRequireCache() {
  // purge require cache on requests for "server side HMR" this won't let
  // you have in-memory objects between requests in development,
  // alternatively you can set up nodemon/pm2-dev to restart the server on
  // file changes, but then you'll have to reconnect to databases/etc on each
  // change. We prefer the DX of this, so we've included it for you by default
  for (const key in require.cache) {
    if (key.startsWith(BUILD_DIR)) {
      delete require.cache[key];
    }
  }
}
starting
in func
send first listen
Express server listening on port 3000
/Users/brocktho/Desktop/SocSoter/Soul/node_modules/@react-pdf/yoga/src/build/Release/nbind.js:53
        throw ex;
        ^

Error: listen EADDRINUSE: address already in use :::3000
    at Server.setupListenHandle [as _listen2] (node:net:1432:16)
    at listenInCluster (node:net:1480:12)
    at Server.listen (node:net:1568:7)
    at Function.listen (/Users/brocktho/Desktop/SocSoter/Soul/node_modules/express/lib/application.js:635:24)
    at Object.<anonymous> (/Users/brocktho/Desktop/SocSoter/Soul/server.js:46:5)
    at Module._compile (node:internal/modules/cjs/loader:1126:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
Emitted 'error' event on Server instance at:
    at emitErrorNT (node:net:1459:8)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  code: 'EADDRINUSE',
  errno: -48,
  syscall: 'listen',
  address: '::',
  port: 3000
}

#

cat unrelated.js && node unrelated.js
const path = require("path");
const express = require("express");
const compression = require("compression");
const morgan = require("morgan");
const { createRequestHandler } = require("@remix-run/express");

const BUILD_DIR = path.join(process.cwd(), "build");

const app = express();

app.use(compression());

// http://expressjs.com/en/advanced/best-practice-security.html#at-a-minimum-disable-x-powered-by-header
app.disable("x-powered-by");

// Remix fingerprints its assets so we can cache forever.
app.use(
  "/build",
  express.static("public/build", { immutable: true, maxAge: "1y" })
);

// Everything else (like favicon.ico) is cached for an hour. You may want to be
// more aggressive with this caching.
app.use(express.static("public", { maxAge: "1h" }));

app.use(morgan("tiny"));

app.all(
  "*",
  process.env.NODE_ENV === "development"
    ? (req, res, next) => {
        purgeRequireCache();

        return createRequestHandler({
          build: require(BUILD_DIR),
          mode: process.env.NODE_ENV,
        })(req, res, next);
      }
    : createRequestHandler({
        build: require(BUILD_DIR),
        mode: process.env.NODE_ENV,
      })
);
const port = process.env.PORT || 3000;

app.listen(port, () => {
  console.log(`Express server listening on port ${port}`);
});

#


function purgeRequireCache() {
  // purge require cache on requests for "server side HMR" this won't let
  // you have in-memory objects between requests in development,
  // alternatively you can set up nodemon/pm2-dev to restart the server on
  // file changes, but then you'll have to reconnect to databases/etc on each
  // change. We prefer the DX of this, so we've included it for you by default
  for (const key in require.cache) {
    if (key.startsWith(BUILD_DIR)) {
      delete require.cache[key];
    }
  }
}
starting
in func
send first listen
Express server listening on port 3000
/Users/brocktho/Desktop/SocSoter/Soul/node_modules/@react-pdf/yoga/src/build/Release/nbind.js:53
        throw ex;
        ^

Error: listen EADDRINUSE: address already in use :::3000
    at Server.setupListenHandle [as _listen2] (node:net:1432:16)
    at listenInCluster (node:net:1480:12)
    at Server.listen (node:net:1568:7)
    at Function.listen (/Users/brocktho/Desktop/SocSoter/Soul/node_modules/express/lib/application.js:635:24)
    at Object.<anonymous> (/Users/brocktho/Desktop/SocSoter/Soul/unrelated.js:46:5)
    at Module._compile (node:internal/modules/cjs/loader:1126:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
Emitted 'error' event on Server instance at:
    at emitErrorNT (node:net:1459:8)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  code: 'EADDRINUSE',
  errno: -48,
  syscall: 'listen',
  address: '::',
  port: 3000
}

#

Okay

#

figured out why thats happened, cause remix's build is intense. If you import anything from server.js anywhere in the normal app folder, it'll add it to remix's build including another express app listen event

#

@cedar minnow Is there anything documented about this sort of behavior? The reason I had anything imported from the server was trying to emit from the server socket (not necessarily a great idea, just trying to figure out a good way to emit to the browser once the server had finished something in remix)

cedar minnow Jan 4, 2023, 2:51 PM

#

you shouldn't import your server from within your app

#

because your server imports your app

fallen bone Jan 4, 2023, 2:51 PM

#

i mean, makes sense yea...

cedar minnow Jan 4, 2023, 2:52 PM

#

also because the server is not being compiled by Remix

#

if you want to share things between server and app

#

use the getLoadContext function in createRequestHandler

fallen bone Jan 4, 2023, 2:56 PM

#

Ah, well I feel quite silly... Thanks for the pointer, had no idea how to communicate the two

#Strangest Express With Remix bug?