Libs imported into Next.js apps do not have access to process.env in the client bundle

[wescopeland]

Current Behavior

Libs imported into Next.js apps do not have access to process.env their client bundles.

Expected Behavior

Libs imported into a Next.js app should be able to use environment variables and not cause an app to throw:

ReferenceError: process is not defined

Steps to Reproduce

1. Create a Next.js app.
2. Create a .env.production file in the app root directory. Add an env var NEXT_PUBLIC_FOO=bar.
3. Use the env var somewhere from within the app, eg in index.tsx:

<>{JSON.stringify(process.env["NEXT_PUBLIC_FOO"]}</>

You will observe that "bar" renders correctly to the screen.

4. Create a utils lib that exports a function relying on this env var, eg:

export const getVar = () => {
  return process.env["NEXT_PUBLIC_FOO"];
}

5. Export this function from the lib and import it somewhere into the Next.js app.
6. Observe an error being thrown that process is not defined.

Environment

   Node : 16.13.0
   OS   : darwin x64
   yarn : 1.22.18

   nx : 13.9.5
   @nrwl/angular : Not Found
   @nrwl/cypress : 13.9.5
   @nrwl/detox : Not Found
   @nrwl/devkit : 13.9.5
   @nrwl/eslint-plugin-nx : 13.9.5
   @nrwl/express : Not Found
   @nrwl/jest : 13.9.5
   @nrwl/js : 13.9.5
   @nrwl/linter : 13.9.5
   @nrwl/nest : Not Found
   @nrwl/next : 13.9.5
   @nrwl/node : Not Found
   @nrwl/nx-cloud : 13.1.6
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 13.9.5
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 13.9.5
   @nrwl/web : 13.9.5
   @nrwl/workspace : 13.9.5
   typescript : 4.5.5
   rxjs : 7.5.5

[wescopeland]

If anyone else encounters this issue, we worked around it by adding the following in our next.config.js file:

  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    if (config.name === "client") {
      const envKeys = Object.keys(process.env).reduce((prev, key) => {
        if (key.startsWith("NEXT_PUBLIC_")) {
          prev[key] = JSON.stringify(process.env[key]);
        }

        return prev;
      }, {});

      config.plugins.push(
        new webpack.DefinePlugin({
          process: {
            env: {
              ...envKeys
            }
          }
        })
      );
    }

    return config;
  },

[aparij]

I don't see any fixes here, only a test added?

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.