#755·sapper

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

Author: bauskCreated Jun 19, 2019Updated Jul 22, 2021
Labelsbundling

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:

bash
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.