Parcel: Parcel development server using programmatic API works on v1.x but not on v2.x

[KaKi87]

🐛 bug report

Parcel development server using programmatic API works on v1.x but not on v2.x

🎛 Configuration (.babelrc, package.json, cli command)

No .babelrc

No CLI command

package.json :

{
  "dependencies": {
    "@parcel/config-default": "^2.0.0-alpha.3",
    "@parcel/core": "^2.0.0-alpha.3",
    "vue": "^2.6.11"
  }
}

🤔 Expected Behavior

The development server should run properly in v2.x just like in v1.x

😯 Current Behavior

The development server doesn't run properly in v2.x just like in v1.x

Here is the output :

Server running at http://localhost:5492
√ Built in 7.01s.
× console: (node:7944) UnhandledPromiseRejectionWarning: AssertionError [ERRASSERTION]: The expression evaluated to a falsy value:

  (0, assert.default)(server != null)

    at Object.report (D:\Documents\GitHub\vue-parcel\nodemodules\@parcel\reporter-dev-server\lib\ServerReporter.js:70:29)
    at ReporterRunner.report (D:\Documents\GitHub\vue-parcel\nodemodules\@parcel\core\lib\ReporterRunner.js:69:31)
    at process.tickCallback (internal/process/nexttick.js:68:7)
× console: (node:7944) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
× console: (node:7944) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

💁 Possible Solution

The problem seem related to that file : https://github.com/parcel-bundler/parcel/blob/v2/packages/reporters/dev-server/src/ServerReporter.js

🔦 Context

I'm trying to create a Vue.JS project in the most basic way possible.

I chose Parcel as bundler because it truly works with zero-config, and fastly.

My real configuration is inside an Electron instance but I promise this is absolutely irrelevant, proof with what follows.

💻 Code Sample

You can find a full demonstration on this repository : https://github.com/KaKi87/vue-parcel

Please look at the parcel-v1 branch to see the working example then look at the parcel-v2 branch wich is a port of the v1.x configuration for v2.x, nothing less, nothing more, but which doesn't work.

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ------------- |
| Parcel | 2.0.0 alpha 3 |
| Node | 10.16 |
| Yarn | 1.16 |
| Operating System | Win10 19041.1 |

I pledge to become a backer if I succeed publishing my project using Parcel v2.x within next week.
My project used to work in Parcel v1.x except zero-config support for async/await, which, from what I've been told, works in v2.x, implying that it's a wontfix for 1.x

Thanks

[DeMoorJasper]

Hey, so I fixed your start script:

const path = require("path");
const Parcel = require("@parcel/core").default;
const defaultConfig = require("@parcel/config-default").default;

const PORT = 5492;

async function start() {
  let defaultConfig = await packageManager.require(
    "@parcel/config-default",
    __filename
  );

  await new Parcel({
    entries: [path.join(__dirname, "./index.html")],
    defaultConfig: {
      ...defaultConfig,
      filePath: require.resolve("@parcel/config-default")
    },
    serve: {
      port: PORT
    }
  }).watch();
}

start();

not entirely sure why you need to use the api instead of the cli, seems like overcomplicating to me.

Also vue is not supported yet in Parcel 2

[KaKi87]

I fixed your start script

Wow hum what about zero-configuration ? This is way too much code.
It used to work with a single line in v1.x, why did it became so complicated now ?

not entirely sure why you need to use the api instead of the cli, seems like overcomplicating to me.

I choose the API over the CLI so whatever parameters changes, the only command to remember is node index.js. Like I said, in this project, I care very much about zero-configuration and being dev-friendly.

Also vue is not supported yet in Parcel 2

Any idea when will it be ?

Thanks

[mischnic]

logLevel, packageManager, patchConsole can be omitted in your case:

  await new Parcel({
    entries: [path.join(__dirname, "./index.html")],
    defaultConfig: {
      ...defaultConfig,
      filePath: require.resolve("@parcel/config-default")
    },
    disableCache: true,
    serve: {
      host: "localhost",
      port: PORT
    }
  }).watch();

Maybe we can simplify serve and defaultConfig more. That error message you got should definitely be more helpful.

[KaKi87]

What about Vue.JS support, is it really unavailable ? Vue is the only reason I need a bundler.

[DeMoorJasper]

@KaKi87 Somebody was working on Vue, see #3364 for the progress. Feel free to try and finish that implementation yourself.

[lbogdan]

I choose the API over the CLI so whatever parameters changes, the only command to remember is node index.js. Like I said, in this project, I care very much about zero-configuration and being dev-friendly.

@KaKi87 The better practice is to define a script in package.json like

{
  // ...
  "scripts": {
    "dev": "parcel --port 8080 src/index.html"
  }
}

and then the only command to remember is npm run dev / yarn dev.

[KaKi87]

The better practice is to define a script in package.json
and then the only command to remember is npm run dev / yarn dev.

I know, but dispersing configuration elements in so many different files complexify end-user readability.

[Xiphe]

I also think that a zero-config programmatic API is really useful for cases where I want to use parcel behind the scenes in another tool.

serverless-parcel from @johnagan would be a good example where spawning new cli processes (and somehow providing custom config to them) would be less elegant then the current implementation.

I assume there are also reasons I (as a tooling author) do not want my embedded parcel to pick up user-config from .parcelrc and package.json but instead ONLY use my specific config. At the moment, this is not possible using only CLI.

[DeMoorJasper]

This issue should have probably been closed a while ago, @Xiphe feel free to open an RFC for simplifying the api. Preferably kicking it off with some information on how you'd like to see the config maybe even some examples.

We can always wrap our internal api to make it easier for everyone to use :)

But this issue was actually just a question and has been resolved already...

[KaKi87]

has been resolved already

No.
I'm just stuck at v1.x because the v2.x API has been complexified and Vue isn't available on it

[DeMoorJasper]

The API is only meant for advanced usage like mentioned you should use the cli for normal usage and yes vue isn't supported but we have a seperate dedicated issue tracking that.

We're always open to an RFC on how we could improve the API as I also mentioned

[Xiphe]

disableCache and serve.host can also be omitted.

The only thing irritating here (in my opinion) is that the default config does not know its location. I may open a PR for that :)

import Parcel from '@parcel/core';
import defaultConfig from '@parcel/config-default';
import getPort from 'get-port';

await new Parcel({
  entries: [path.join(__dirname, './index.html')],
  defaultConfig: {
    ...defaultConfig,
    filePath: require.resolve('@parcel/config-default'),
  },
  serve: {
    port: await getPort(),
  },
}).watch();