Search code examples
reduxreact-reduxrollupjslit-element

lit-element with rollup and redux: process is not defined

I'm trying to switch my state management in a lit-element based application from simple global variables to redux. Following the redux tutorials I installed the redux toolkit and created a simple reducer and store.

Building the app with rollup succeeds but when I load the app in Chrome I get the following error:

ReferenceError: process is not defined

There are several lines in the redux code that use 'process', f.e.

/*
 * This is a dummy function to check if the function name has been altered by minification.
 * If the function has been minified and NODE_ENV !== 'production', warn the user.
 */

function isCrushed() {}
/
if (process.env.NODE_ENV !== 'production' && typeof isCrushed.name === 'string' && isCrushed.name !== 'isCrushed') {
  warning('You are currently using minified code outside of NODE_ENV === "production". ' + 'This means that you are running a slower development build of Redux. ' + 'You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ' + 'or setting mode to production in webpack (https://webpack.js.org/concepts/mode/) ' + 'to ensure you have the correct code for your production build.');
 
}

Can anyone help? Am I missing something? Is 'process' something that is only available in Node?

Solution

  • I'm a Redux maintainer. The Redux library ships several different build artifacts for use in different environments. We expect that the CommonJS and ES Module build artifacts are going to be run through a bundler that knows how to handle process.env.NODE_ENV checks and replace them at build time, per standard ecosystem convention.

    If you are trying to use Redux Toolkit in a non-bundled environment, you should use one of the build artifacts that has already been compiled with a specific value of process.env.NODE_ENV ('production' or 'development'). We ship a couple of ESM build artifacts this way, as well as the UMD build artifact:

    https://unpkg.com/browse/@reduxjs/toolkit@1.7.1/dist/

    You probably should be using redux-toolkit.modern.production.min.js (ESM) or redux-toolkit.umd.min.js (UMD).

    If you are actually trying to do a full build, then yes, you need to configure Rollup to do an appropriate replacement on process.env.NODE_ENV.