ReferenceError: Can't find variable: process

[etclub]

Here are the steps to reproduce it:

1. install nanoid
2. modify main.js

import { nanoid } from 'nanoid'
import App from './App.svelte';

const app = new App({
	target: document.body,
	props: {
		name: nanoid()
	}
});

export default app;

[Conduitry]

If nanoid is written to require Node APIs then you won't be able to use it as-is in a browser. process is a variable that exists in Node and not on browsers.

GitHub issues aren't the right place for support questions like this. Please ask on StackOverflow or in our Discord chat room.

[Antony Jones]

@etclub it's worth noting that nanoid isn't particularly good anyway, and yes, it doesn't run in the browser. Try https://github.com/lukeed/uid instead.

[etclub]

Well, it says it supports modern browser at https://www.npmjs.com/package/nanoid That is why I thought it might be an issue of the template.

[Bogdan Chadkin]

process.env.NODE_ENV is a convention which is usually statically replaced with 'production' or 'development' string. Many browser modules uses it. Webpack replaces it out of the box.

[Andrey Sitnik]

To use Nano ID in Rollup you need to add @rollup/plugin-replace

https://github.com/ai/nanoid#rollup