admin webpack is not working with @google-cloud/storage package

[afzaalahmad]

Bug Report

I am trying to develop a plugin for uploading my images to google cloud storage. I am using @google-cloud/storage to upload files from admin to google cloud storage bucket instead of locally.

Expected Behavior

It should work with @google-cloud/storage package to upload files.

Current Behavior

webpack is throwing an error that for multiple modules stating that Module not found. I guess it is a conflict with webpack version 5.

Steps to Reproduce

1. add @google-cloud/storage in your payload project.
2. Create a collection for media and try to use the package inside beforeChange hook.

Detailed Description

Payload version: 0.18.0 , 0.20.1
Browser: Safari
System: macOS

[GeorgeyB]

I believe this page in the documentation should provide you with the info you need. 🙂

See also @jmikrut's related anwer here.

[afzaalahmad]

@GeorgeyB Thank you for pointing this out 🙌

[afzaalahmad]

@GeorgeyB sorry to bother you, but I am facing a problem in injecting env variable in payload.config.ts. I am using these ways to inject env in payload:

if I use import 'dotenv/config' in payload.config.ts then it says this is not allowed in browser.
and If I use import dotenv from 'dotenv' and then use doting.config() then it says that env variable is undefined.

Any idea?

[GeorgeyB]

@afzaalahmad, I personally initialise dotenv in server.ts, not payload.config.ts.

Be sure to call dotenv.config() before trying to reference any environmental variables (including before other imports):

Hope that helps 👍

[afzaalahmad]

@GeorgeyB I got your point. I am kind of confusing build time env variable with runtime env variables. I am using an env variable inside payload.config.ts, and inside a collection hook. But on logging it, I am getting it undefined on build time.

this is my server.ts

[jmikrut]

Hey @afzaalahmad — I'm going to move this to a discussion at this point because it doesn't have to do with Payload core, but I have an idea for you to consider.

First, just to clarify - are you saying that your env variable is defined when running yarn dev or similar, but it is not defined when you run your app in production? What do you mean by "build" time?

One thing to try is to pass a full path to the dotenv config, that points directly at your environment variable. This is what we usually do:

require('dotenv').config({
  path: path.resolve(__dirname, '../.env'),
});

And that goes at the top of our server.ts.