Missing shims and global variables when used in renderer process

[jtlapp]

I get the following errors when (and only when) using electron-log in the renderer process:

rollup v2.58.0
bundles src/frontend/main.ts → public/build/bundle.js...
(!) Missing shims for Node.js built-ins
Creating a browser bundle that depends on "path", "os", "querystring", "util", "events", "http", "https" and "url". You might need to include https://github.com/snowpackjs/rollup-plugin-polyfill-node
LiveReload enabled
(!) Missing global variable names
Use output.globals to specify browser global variable names corresponding to external modules
path (guessing 'path')
fs (guessing 'fs')
os (guessing 'os')
querystring (guessing 'queryString')
util (guessing 'util$1')
events (guessing 'EventEmitter')
http (guessing 'http')
https (guessing 'https')
url (guessing 'url')

Here's my rollup config:

import svelte from 'rollup-plugin-svelte'
import commonjs from '@rollup/plugin-commonjs'
import resolve from '@rollup/plugin-node-resolve'
import livereload from 'rollup-plugin-livereload'
import { terser } from 'rollup-plugin-terser'
import sveltePreprocess from 'svelte-preprocess'
import typescript from '@rollup/plugin-typescript'
import css from 'rollup-plugin-css-only'

const production = !process.env.ROLLUP_WATCH

function serve() {
	let server

	function toExit() {
		if (server) server.kill(0)
	}

	return {
		writeBundle() {
			if (server) return
			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
				stdio: ['ignore', 'inherit', 'inherit'],
				shell: true
			})

			process.on('SIGTERM', toExit)
			process.on('exit', toExit)
		}
	}
}

export default {
	input: 'src/frontend/main.ts',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/build/bundle.js'
	},
	plugins: [
		svelte({
			preprocess: sveltePreprocess({ sourceMap: !production }),
			compilerOptions: {
				dev: !production
			}
		}),
		css({ output: 'bundle.css' }),

		resolve({
			browser: true,
			dedupe: ['svelte']
		}),
		commonjs(),
		typescript({
			sourceMap: !production,
			inlineSources: !production,
			tsconfig: "src/frontend/tsconfig.json"
		}),

		!production && serve(),
		!production && livereload('public'),
		production && terser()
	],
	watch: {
		clearScreen: false
	}
}

[megahertz]

I've never used rollup for building Electron or Node.js app, so I can't suggest anything for the purpose. First of all, the config should be configured to keep node imports untouched.

[busterbogheart]

@jtlapp Did you get anywhere with this?

[jtlapp]

No, I'm no longer using it in the renderer. Sorry!

[sazzer]

I've just hit what I think is the same problem only using Webpack instead. I'm getting a stack of:

Module not found: Error: Can't resolve 'querystring' in 'node_modules/electron-log/src'
Module not found: Error: Can't resolve 'path' in 'node_modules/electron-log/src'
Module not found: Error: Can't resolve 'os' in 'node_modules/electron-log/src'

And so on. All of them also say:

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

And it happens as soon as electron-log is imported into a renderer script, even if it's never actually used.

[megahertz]

It should work fine in v5

[sazzer]

Turns out it works if you have target: "electron-renderer" set in your Rendere Webpack config. If you don't have that then it breaks as mentioned above.
Frustratingly, for that to work I also have to set contextIsolation: false, and doing that breaks hot reload for reasons I've not yet worked out. But that's not related to electron-log at least :)