ReferenceError: process is not defined

[joanrodriguez]

I am trying to use angular-redux/store with two enhancers: gaearon/redux-devTools and rt2zz/redux-persist.

My project is built on https://github.com/AngularClass/angular2-webpack-starter version 5.1.1.

I was using configureStore() of the angular-redux but redux-persist requires that the store object be passed to persistStore(store) and I can't access it directly from the ngRedux object (_storeis private). So I went with provideStore() instead.

This is my code:

    const store = createStore(
      rootReducer,
      devTools.isEnabled() ? devTools.enhancer() : undefined,
    );
    persistStore(store);
    ngRedux.provideStore(store);

It build fine on my machine but not on my colleague's and not on the build server. The error thrown is the following: Uncaught ReferenceError: process is not defined

Somehow redux crashes my build (and that's not related to angular-redux/store). Because configureStore compiles OK I would like to use it, but how can I access the store object?

Thanks

[SethDavenport]

Can you post the full stack trace? One of the dependencies is probably trying to dereference process.env.NODE_ENV or similar but I'm not sure which one.

[SethDavenport]

Whether you use configureStore or provideStore I wouldn't expect a change in behaviour since they use the same code under the hood.

It's also interesting that it fails on your colleague's system but not on yours. This suggests that it's surfaced by some toolchain edge case. Is it possible that you have different values for $NODE_ENV in your shell?

Is it possible that your colleague is running the app in prod mode and you aren't?

[rikup88]

I faced same problem with AoT build. I tracked the problem down to Redux code, which has following checks:
process.env.NODE_ENV !== 'production'
and naturally if these end up in the browser, the application hangs. It seems that line
var redux_1 = require('redux');
in
@angular-redux/store/lib/components/ng-redux.js
causes problems because it imports the default Redux as specified in redux/packaje.json (redux/lib/index.js or redux/es/index.js depending on jsnext settings on module bundler).

I was able to get around of this problem by using Rollup's Alias plugin like this:
import { join } from 'path';

const alias = require('rollup-plugin-alias');
const nodeResolve = require('rollup-plugin-node-resolve-angular');
const commonjs = require('rollup-plugin-commonjs');
const includePaths = require('rollup-plugin-includepaths');
const rollup = require('rollup');

const config = {
entry: join(Config.TMP_DIR, Config.BOOTSTRAP_FACTORY_PROD_MODULE),
sourceMap: true,
treeshake: true,
moduleName: 'main',
plugins: [
includePaths({
include: {},
paths: [join(Config.TMP_DIR, 'app')],
external: [],
extensions: ['.js', '.json', '.html', '.ts']
}),
alias({
redux: __dirname + '/../../../node_modules/redux/dist/redux.min.js'
}),
nodeResolve({
es2015: true, jsnext: true, main: true, module: true, browser: true
}),
commonjs({
include: 'node_modules/**'
})
]
};

Hope this helps.

[rikup88]

For Rollup guys, I found this one which also resolves the issue:
rollup/rollup#487
Same idea should work with Webpack and others also.

[SethDavenport]

So yeah, defining process.env.NODE_ENV is something your build toolchain would have to do. For rollup, I've seen people do as @rikup88 mentioned above.

rollup.config.js

import replace from 'rollup-plugin-replace'

export default {
    // ...
    plugins: [
        // ...
        replace({
            'process.env.NODE_ENV': JSON.stringify( 'production' )
        }),
        // ...
    ]
}

For Webpack, I've done this:

webpack.conf.js:

  // ...
  plugins: [
   new webpack.DefinePlugin({
     'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
     // ...
  }),
  // ...

@angular/cli does the same thing inside its hidden webpack config. In general you'll want to do this for a number of packages, not just us.