Is there a way to reference environment variables for an npm package from a consumer app? - build

Question

I am creating a package on npm and for simplicity reasons I am trying to use environment variables in my npm package ( since user secret is needed ) that would be defined by a consumer app. But I seem to run into build issues when using the created package.
The structure looks something like this:
My demo app
|
|-----My npm package
|
|-----Other packages for my demo app
...
I have my npm package ( on npm ) and a demo app to showcase how the package works. I have environment variables used in the package, but I want to define them in my demo app.
In my package I am referencing the environment variables as such:
// My package
// auth-config.js
const config = {
variable1: import.meta.env['PUBLIC_VITE_VARIABLE_1'],
variable2: import.meta.env['PUBLIC_VITE_VARIABLE_2'],
variable3: import.meta.env['PUBLIC_VITE_VARIABLE_3']
};
export default config;
And later using them in my package code:
// My package
// auth-service.ts
const user = await getUser({
variable1: config.variable1,
variable2: config.variable2,
variable3: config.variable3
});
Then I have them defined in my demo app:
// Demo app
// .env
PUBLIC_VITE_VARIABLE_1=some-value
PUBLIC_VITE_VARIABLE_2=some-value-2
PUBLIC_VITE_VARIABLE_3=some-value-3
Then, when building ( npm run build ) my demo application, I am getting the following errors:
TypeError: Cannot read properties of undefined (reading 'PUBLIC_VITE_VARIABLE_1')
at file:///C:/Users/user1/Namu/login-with-auth/node_modules/my-app/auth0/auth-config.js:2:28
However, the dev build works completely fine. And it uses the variables successfully as well.
My configuration for both the package and the demo app is:
Svelte + Svelte Kit
Vite
Typescript
I have tried using different approaches to import environment variables ( process.env instead of import.meta.env ) inside the package. I have also tried updating the svelte.config.js and vite.config.js with different paths to environment variables to try and reach the scope of the application that uses this package.
I am not sure where to go from here, since I can't find any definitive answer online and nothing seems to work so far.

Answer 1

I was able to solve the issue in the end. Keep in mind I am using svelte + svelte-kit + vite in both the package and the demo app using the package.
The fix goes like this:
Name the environment variables properly. Naming convention should follow what the bundler says, not what the framework says. In my case for vite it has to start with VITE_, so the environment variable would be VITE_VARIABLE_1. More info can be found Here.
Side note: this is also configurable, but I could not make the configurations work in my favour.
Using proper references in the package. For vite, the correct way to reference an env variable is by using import.meta.env['VITE_VARIABLE_1'].
Adding checks for undefined when using the variables in the package like so: import.meta.env ? import.meta.env['VITE_VARIABLE_1'] : ''.
This let's you avoid the build errors that I was running into, since at build time, import.meta.env is not defined.
And this is how the final files look like:
Where the environment variables are referenced:
// My package
// auth-config.js
const variable1 = import.meta.env ? import.meta.env['PUBLIC_VITE_VARIABLE_1'] : '';
const variable2 = import.meta.env ? import.meta.env['PUBLIC_VITE_VARIABLE_2'] : '';
const variable3 = import.meta.env ? import.meta.env['PUBLIC_VITE_VARIABLE_3'] : '';
const config = {
variable1,
variable2,
variable3
};
Where the environment variables are used:
// My package
// auth-service.ts
const user = await getUser({
variable1: config.variable1,
variable2: config.variable2,
variable3: config.variable3
});
Where the environment variables are defined:
// Demo app
// .env
PUBLIC_VITE_VARIABLE_1=some-value
PUBLIC_VITE_VARIABLE_2=some-value-2
PUBLIC_VITE_VARIABLE_3=some-value-3
You can also look at the insides of the created Package.
And the coresponding files: auth-config.js, auth-service.ts.