0

I am trying to transpile an ES6 express app using Parceljs.

Trying to run the parcel dev server using yarn parcel index.js displays that it is running at localhost:1234 but the page is blank. It also generates the following output when trying to run node dist/index.js:

index.js:116
    throw error;
    ^

TypeError: Cannot read properties of undefined (reading 'prototype')

Running yarn parcel index.js --target node does not yield any localhost port for me to test the API with. However, the API now works as I can use node dist/index.js to run the script but now I have to resort to npx nodemon /dist/index.js to have file watching.

Here is the sample code. index.js

import express from "express";
const app = express();
const port = 5000;

app.get("/", (req, res) => {
  res.json({ msg: "Hello!" });
});

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

package.json

...
  "dependencies": {
    "express": "^4.17.3",
    "parcel": "^2.3.2",
    "parcel-bundler": "^1.12.5"
  }
...

I would greatly appreciate a solution that allows me to use Parceljs to watch for file updates directly, preferably with HMR.

Rashiq
  • 317
  • 1
  • 4
  • 13
  • What is the `parcel` *script* in your *package.json* (that you run with `yarn parcel`)? – Bergi Feb 20 '22 at 19:13
  • I don't think node even does support HMR out of the box. You have to mess with its module cache yourself, like [this](https://nimblewebdeveloper.com/blog/hot-reload-nodejs-server), but nothing like that is built into parcel. – Bergi Feb 20 '22 at 19:24
  • There isn't any `parcel` script in the `package.json`. I am manually running parcel from the dev dependencies for testing purposes. – Rashiq Feb 22 '22 at 05:15
  • Are there any alternatives that can transpile and optimize server node code besides webpack that supports an HMR dev mode? I've been trying to Rollup and Snowpack but have been unable to till now. – Rashiq Feb 22 '22 at 05:17
  • What are you trying to optimise? – Bergi Feb 22 '22 at 11:28
  • Ideally, the entire node js server. – Rashiq Feb 24 '22 at 17:08
  • I mean, what specifically? Execution speed? Startup time? Developer experience? And how do you think Rollup or Snowpack would help with that? – Bergi Feb 24 '22 at 17:59
  • Execution speed and startup time in production. Developer experience during development. These bundlers claim to have tree-shaking, code-splitting, and dead code removal among other things. I've also noticed rollup building the entire server in 10s of ms in watch mode. I failed to get babel working on my main code but rollup required minimal config and `parcel watch` worked without any config. – Rashiq Feb 25 '22 at 16:44
  • Code splitting and bundling won't actually improve serverside code, and I doubt there are huge gains from tree shaking either. If you want to improve startup time, you rather should write your code to lazyload modules. And nothing a bundler does will improve execution speed. – Bergi Feb 25 '22 at 17:07

2 Answers2

1

See issue 355: Is parcel meant to work with server-side code insluding HMR?: parcel does not (yet) support hot module reloading in nodejs.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
1

parcel creates a web server and serve your code but express need to be called by itself to be able create a web server and server requests. You'd better use babel & nodemon instead of parcel

I use command bellow

nodemon --exec babel-node src/index.js

Amir
  • 42
  • 3
  • Does Babel optimize code as parcel does with tree shaking, minification et cetera? I wasn't able to find any sources saying so. – Rashiq Feb 22 '22 at 05:20