Rollup bundler adds server/Node-only code when bundling third-party dependencies

[bausk]

Setup

I'm trying to get the basic Sapper template working with Auth0. In order to do this, I'm first including in a component the client-only async import of my utils/auth.js where Auth0 is used:

// In Login.svelte
onMount(async () => {
	const { default: getAuth } = await import(`../utils/auth`);
	secondary = (e) => {
		getAuth().then((auth) => {
			auth.lock.show();
		});
	}
});

And exporting the business logic of the login in utils/auth.js:

export default async () => {
  const { createBrowserHistory } = await import('history');
  const { Auth0Lock } = await import('auth0-lock');

  class Auth {
    constructor() {
      this.lock = new Auth0Lock(...);
    ...

rollup.config.js is the one from sapper-template except for using PostCSS preprocess option.

Problem

When using Rollup bundler, the dependencies like Auth0Lock are bundled into an asset, index.hash.js. This asset begins like so:

import events from 'events';
import util from 'util';
import tty from 'tty';
import fs from 'fs';
import net from 'net';

...
// mentions of process.env.DEBUG_FD and other server-only code are also bundled here
...

Which obviously results in a client-side console error as soon as the asset is fetched:

TypeError: Failed to resolve module specifier "events". Relative references must start with either "/", "./", or "../".

This is reproducible on both dev and production build.

I'm at a loss on how to proceed with this. Note that when using webpack with the same config and sources, the build is okay and can be used with Auth0Lock. This sort of tells me that the problem is not with Auth0Lock.

Any insight is much appreciated, thank you for your time.

[mrkishi]

Hey, @bausk. I couldn't reproduce that. Are you sure there are no unconditional auth0 imports lying around?

[bausk]

Hey, @bausk. I couldn't reproduce that. Are you sure there are no unconditional auth0 imports laying around?

Thanks for looking at this. By unconditional you mean not wrapped in await? Generally, would you consider the above code to be the proper way to include libraries on client only?

[bausk]

This is the repository I'm using:

https://github.com/bausk/trader-monorepo/tree/master/frontend

[bausk]

@mrkishi Here's what I've managed to get in codesandbox so far:

https://codesandbox.io/s/sapper-template-v3-alpha2625-alpha2-p5qe3?fontsize=14

The error there is during client build, could not load events. Working version is demonstrated by commenting line 10 in src/utils/auth.js:

const { Auth0Lock } = await import("auth0-lock");

And uncommenting external script load in line 13 of template.html:

<!-- <script src="https://cdn.auth0.com/js/lock/11.16.3/lock.min.js"></script> -->

[mrkishi]

I'm so sorry, I must have loaded the wrong page whenever I was testing that — auth0-lock indeed requires polyfills for node APIs. I could almost get it working with either rollup-plugin-node-builtins or rollup-plugin-node-polyfills, but I always end up with some cjs residuals.

It could be a bug in rollup-plugin-commonjs or one of lock's dependencies but honestly, auth0-lock is so gigantic I can't go spelunking on that one. I'm sorry.

[bausk]

Okay, first of all thanks for confirming that I'm not taking crazy pills!

I will follow your route on node polyfills to see if there is some general solution and whether this can be isolated to a rollup plugin or anything.

[Enteleform]

@bausk Have you managed to find any workarounds for this?

[rhanka]

Interested in that too, I encounted the same problem in an other problem, importing a tierce dependency js lib? Uncaught TypeError: Failed to resolve module specifier "events". Relative references must start with either "/", "./", or "../".

[tuchuants]

To people who have the same problem, you may suffer from this when you have an indirect dependency to browserify/events or something named like it, whose package name is the same as a certain node buitlin module. Run npm ls events or other command that has similar function to check whether you are blocked by it, and if so, adding preferBuiltins: false to your @rollup/plugin-node-resolve configuration may solve your problem.