Uncaught SyntaxError: The URL '/sockjs-node' is invalid

[vedam]

Hey Jason,
first of all thx for this.
I'm experimenting with animateplus.js wich relies on async/await.
That's another thing ;-)

I tried to install the plugin in a new folder
preact create simple

went through including installing deps

I added the plugin as described:
npm i -D preact-cli-plugin-async

package.json

"devDependencies": {
  ...,
  "preact-cli-plugin-async": "^1.0.0"
},

I created and edited a 'preact.config.js' as described:

import asyncPlugin from 'preact-cli-plugin-async'

export default config => {
  asyncPlugin(config)
}

starting in dev-mode:
npm run dev

everything seems fine first:

Compiled successfully!
...

But opening http://localhost:8080 in browser[chrome]
logs:

sockjs.js?83d2:678 Uncaught SyntaxError: The URL '/sockjs-node' is invalid

...
  // Step 1 of WS spec - parse and validate the url. Issue #8
  var parsedUrl = new URL(url);
  if (!parsedUrl.host || !parsedUrl.protocol) {
    throw new SyntaxError("The URL '" + url + "' is invalid");    <-------- this throws X
  } else if (parsedUrl.hash) {
    throw new SyntaxError('The URL must not contain a fragment');
...

running without preact.config.js works
Unfortunately I have no idea what to do to fix?

[deltaepsilon]

I've run into the same bug and tracked it down to Kneden.

Kneden stomps over Webpack's global var and sets it to {} for some reason instead of window.

I don't need to compile async/await, so I copy/pasted the guts of this plugin and just commented out the line that adds Kneden. Works like a charm!

Here's my preact.config.js

export default function(config, env, helpers) {
  // https://github.com/developit/preact-cli-plugin-async/blob/master/async-plugin.js
  let babel = config.module.loaders.filter(loader => loader.loader === 'babel-loader')[0].options;
	
	// Blacklist regenerator within env preset:
  babel.presets[0][1].exclude.push('transform-async-to-generator', 'transform-regenerator');

  // Replace stage-1 preset with an inlined, flattened version without regenerator:
  babel.presets.pop();
  babel.plugins.push(
    'transform-export-extensions',
    'syntax-dynamic-import',
    'transform-class-properties',
    'transform-object-rest-spread'
	);

	// Add Kneden
	if (env.production) {
		babel.plugins.push(require.resolve('babel-plugin-async-to-promises'));
	}
}

[vedam]

Thanx for your reply, but I fear that's above my horizon.
Does that mean I have to npm i -D all that babel.plugins stuff?
Maybe it's better for me to stay without async/await until I understand what's going on ;-)

[deltaepsilon]

Yeah. At this point async/await and Preact do not appear to be friends.

[developit]

Ah - sorry for not noticing this issue! I've been seeing the socksjs error locally too, I hadn't figured out it was this plugin yet!

Not sure what's actually causing it, but it's probably worth trying a switch to fast-async, which is more actively maintained.

[deltaepsilon]

Poor Kneden.

I just spun up Preact with ParcelJS for another project and it worked, async/await and all, without as much bundle bloat as I'd feared. I wonder if the better solution is to allow Babel to compile to async/await and update Uglify to handle the generators?

I'll stick with my kneden-for-prod-only workaround or ParcelJS for now and see how thing develop.

[vedam]

@developit – yes. I saw there's a preact-cli-plugin-fast-async. I can't get it working too, but I'm sure that's my bad.

@deltaepsilon – Maybe I should have a closer look at ParcelJS.
Anyway, for now I'm not depending on async/await. I just liked the way writing it seems more natural to me than the Promise.then()...-stuff