Issues with ESM module import syntax and endless loop during load in SSR

[aral]

JSDB is a 100% JavaScript database. The latest version is written in ESM. Simply importing it causes errors that do not otherwise exist in other contexts.

To reproduce

1. Create an instance of the vite-plugin-ssr vue starter app:

npm init vite-plugin-ssr

2. Install JSDB:

npm i @small-tech/jsdb

3. Add the following line to pages/_default.page.server.js:

import JSDB from '@small-tech/jsdb'

What should happen

There should not be any errors.

What actually happens

Initially, you get the following error:

Error: Failed to resolve import "fs/promises" from "pages/_default/_default.page.server.js". Does the file exist?
    at formatError (/home/aral/small-tech/small-web/sitekit/sandbox/vite-ssr-project/node_modules/vite/dist/node/chunks/dep-2c03f3f9.js:43582:46)

This is because the JSTable.js file in JSDB has the following import:

import fsPromises from 'fs/promises'

I don’t know if this is an issue with vite-plugin-ssr or vite itself. The workaround is to change the import to:

import fs from 'fs'
const fsPromises = fs.promises

Needless to say, while I can do this in a module I control, this would mean I’d have to update all third-party modules that might use these sorts of imports in the future to make them compatible.

Once that error is out of the way, you get several related errors:

1:53:15 PM [vite] error while updating dependencies:
Error: Build failed with 3 errors:
node_modules/@small-tech/jsdb/lib/JSTable.js:26:9: error: No matching export in "browser-external:perf_hooks" for import "performance"
node_modules/@small-tech/jsdb/lib/Time.js:15:9: error: No matching export in "browser-external:perf_hooks" for import "performance"
node_modules/@small-tech/jsdb/lib/Util.js:15:9: error: No matching export in "browser-external:util" for import "types"
    at failureErrorWithLog (/home/aral/small-tech/small-web/sitekit/sandbox/vite-ssr-project/node_modules/esbuild/lib/main.js:1224:15)
    at buildResponseToResult (/home/aral/small-tech/small-web/sitekit/sandbox/vite-ssr-project/node_modules/esbuild/lib/main.js:936:32)
    at /home/aral/small-tech/small-web/sitekit/sandbox/vite-ssr-project/node_modules/esbuild/lib/main.js:1035:20
    at /home/aral/small-tech/small-web/sitekit/sandbox/vite-ssr-project/node_modules/esbuild/lib/main.js:568:9
    at handleIncomingPacket (/home/aral/small-tech/small-web/sitekit/sandbox/vite-ssr-project/node_modules/esbuild/lib/main.js:657:9)
    at Socket.readFromStdout (/home/aral/small-tech/small-web/sitekit/sandbox/vite-ssr-project/node_modules/esbuild/lib/main.js:535:7)
    at Socket.emit (events.js:315:20)
    at addChunk (internal/streams/readable.js:309:12)
    at readableAddChunk (internal/streams/readable.js:284:9)
    at Socket.Readable.push (internal/streams/readable.js:223:10)

This time it’s clearly an issue with esbuild. The previous error did not have the same stack trace but it might also be with vite’s use of esbuild. (If this is unreleated to vite-plugin-ssr, I’ll open separate issues on vite and/or esbuild.)

(Although I don’t think it’s esbuild as I bundle Place using esbuild and it imports JSDB without issues. And I just tried it with esbuild 0.9.3 – the same version used here – also and it worked without issues.)

Again, the fix is to rewrite the imports:

So import { performance } from 'perf_hooks' becomes:

import perfHooks from 'perf_hooks'
const performance = perfHooks.performance

etc.

Once those changes have been made, I no longer get errors but loading the index page causes the browser to enter an infinite loading loop with no warnings or errors either in the browser or on the console.

I’m opening the issue here as I have a straightforward way of reproducing the error and want to document it somewhere.

If this is an issue with vite and/or esbuild (which seems likely) and not due to anything vite-plugin-ssr is doing specifically, I’ll open issues on the vite and/or esbuild trackers to point to this one.

System details

• Node: 14.16.0
• Vite: 2.2.4
• Esbuild (via Vite): 0.9.3
• vite-plugin-ssr: 0.1.0-beta.40
• JSDB: 2.0.2

[brillout]

Add @small-tech/jsdb to Vite's ssr.external.

import vue from '@vitejs/plugin-vue'
import ssr from 'vite-plugin-ssr/plugin'

export default {
  ssr: {
    external: ['@small-tech/jsdb']
  },
  plugins: [vue(), ssr()]
}

Closing; see my comment on Vite's issue.