使用Polymer（Lit Element）结合Redux时出现Process is not defined错误

Hey there, let's work through that "Process is not defined at redux.js" error you're hitting when combining Redux with Lit Element. I've dealt with this exact issue before, so here are the most reliable fixes:

1. Use Redux's browser-ready UMD build #

If you're importing Redux directly in the browser (via <script> tags), skip the Node.js-focused package and use the UMD build made for browsers. Grab it from a CDN like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.1/redux.min.js"></script>

This build doesn't rely on Node's process global variable, so the error should vanish immediately.

2. Polyfill process.env for your bundler (Vite/Webpack) #

If you're using a bundler like Vite or Webpack for your Lit Element project, Redux might be referencing process.env under the hood—and browsers don't have this global by default.

For Vite: #

Add a define block to your vite.config.js to mock the process.env object:

import { defineConfig } from 'vite';

export default defineConfig({
  define: {
    'process.env': {}
  }
});

If you need specific variables (like NODE_ENV), tweak it to:

define: {
  'process.env.NODE_ENV': JSON.stringify('development') // or 'production'
}

For Webpack: #

Use Webpack's DefinePlugin in your webpack.config.js:

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': JSON.stringify({})
    })
  ]
};

3. Double-check you're not pulling in Node-only Redux code #

Occasionally, misconfigured bundlers might pull in the Node.js version of Redux instead of the browser-compatible one. Make sure your package.json has the standard redux package installed, and confirm your bundler is set to target browsers (not Node).

4. Switch to Redux Toolkit (highly recommended) #

Redux Toolkit is the official, opinionated toolset for Redux—and it's built to play nicely with browser environments out of the box. It eliminates most of the boilerplate and environment-related headaches like this one.

First, install it:

npm install @reduxjs/toolkit

Here's a quick example of setting it up with Lit Element:

// store.js
import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value += 1; },
    decrement: state => { state.value -= 1; }
  }
});

export const { increment, decrement } = counterSlice.actions;
export const store = configureStore({
  reducer: counterSlice.reducer
});

// Your Lit Element component
import { LitElement, html } from 'lit';
import { store, increment, decrement } from './store';

class CounterComponent extends LitElement {
  connectedCallback() {
    super.connectedCallback();
    // Subscribe to store changes to trigger re-renders
    this.unsubscribe = store.subscribe(() => this.requestUpdate());
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    // Clean up the subscription when the component is removed
    this.unsubscribe();
  }

  render() {
    const count = store.getState().value;
    return html`
      <p>Current count: ${count}</p>
      <button @click=${() => store.dispatch(increment())}>+</button>
      <button @click=${() => store.dispatch(decrement())}>-</button>
    `;
  }
}

customElements.define('counter-component', CounterComponent);

This approach not only fixes the process error but also makes your Redux code cleaner and more maintainable.

内容的提问来源于stack exchange，提问作者grohjy