chihab / dotenv-run

Seamlessly load environment variables. Supports cli, esbuild, rollup, vite, webpack, angular. ESM and Monorepos.
246 stars 17 forks source link

process is not defined #21

Closed hmendezm closed 1 year ago

hmendezm commented 2 years ago

Hi guys

I have Angular 14 installed and using ngx-env to get env variables but I got the error "process is not defined". I added the code below in polyfills.ts but it is not working for me. I followed the demo and I have exactly everything as the demo.

 import * as process from 'process';
 window['process'] = process;

If I used the code above, I got error below

Module not found: Error: Can't resolve 'process' in 'C:\Projects\project\apps\dashboard\src'

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.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "process": require.resolve("process/browser") }'
        - install 'process'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "process": false }
chihab commented 2 years ago

Hi @hmendezm, did you run ng add @ngx-env/builder to install and setup the package? If so, could you please copy paste your angular.json? Every builder property should have its value start with @ngx-env/builder:, for example

 "architect": {
      "build": {
        "builder": "@ngx-env/builder:browser"
        ...
     }
 }   
hmendezm commented 2 years ago

chihab, thanks for the reply. I am using @nrwl/angular:webpack-browser instead. I will try to see if after changing this builder to @ngx-env/builder:browser the app will work as expected.

Thanks!

tegola commented 1 year ago

@chihab I've got the same issue and I'm using the right builder on Angular 14. What is the right path to get this working?

Thanks

adrenaline15 commented 1 year ago

I also encountered that problem on a new angular-app (ng new) with angular 13.

I managed to get around this with template-strings like that:

export const common = {
  branchName: `${process.env["NG_APP_BRANCH_NAME"]}`,
  commitTimestamp: `${process.env["NG_APP_COMMIT_TIMESTAMP"]}`,
}
chihab commented 1 year ago

If you have a process is not defined you probably don't have the .env.d.ts file in your source folder. This file is created by running ng add @ngx-env/builder.

Depending on your Angular version and your TS config, you might need to define either it this way:

declare namespace NodeJS {
  export interface ProcessEnv {
    readonly NG_APP_ENV: string;
  }
}

or this way (legacy version)

declare var process: {
  env: {
    NG_APP_ENV: string;
    [key: string]: any;
  };
};
chihab commented 1 year ago

Closing the issue, let me know if you still have it.