Activating MUI-X Pro License in Remix with the Vite builder

I just spent the last two days trying to get my “Pro” components from MUI-X not to show the unlicensed watermark. Here is my resulting working configuration.

This recipe is tested with remix@2.16.2, vite@5.4.15, and @mui/x-data-grid@7.28.2.

For Development Mode #

Add to vite.config.ts configuration definition:

  define: {
    // needed for MUI-X client-side license checker in DEV mode
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
  },

Add the key to the development .env file:

VITE_MUI_LICENSE_KEY=...

For Both Production and Development #

Add to root.tsx to execute when the module is loaded into NodeJS:

import { LicenseInfo } from '@mui/x-license';
const mui_x_license_key = import.meta.env.VITE_MUI_LICENSE_KEY ?? process.env.VITE_MUI_LICENSE_KEY ?? '';
//console.warn(`set license key on load: ${mui_x_license_key}`);
// set for run-time checks. build-time license check is enabled with vite plugin
LicenseInfo.setLicenseKey(mui_x_license_key);

Despite the log statement showing it is set if I use the process.env variable only, without the reference to import.meta.env it does not work in either DEV or PROD. I have no explanation for this.

I’m not 100% convinced this is needed for production. I think because the check was baked in at build time it does not happen again at runtime on production.

For Production Mode #

We need a tiny little Vite plugin to set the license key during build time. I added this function to my vite.config.ts file.

import { LicenseInfo } from '@mui/x-license';
// Create a Vite Rollup plugin that calls setLicenseKey on build start, otherwise the "unlicensed" watermark gets baked into the build
function setMUILicenseKeyPlugin() {
  return {
    name: 'setMUILicenseKeyPlugin',
    buildStart() {
      const VITE_MUI_LICENSE_KEY = process.env.VITE_MUI_LICENSE_KEY ?? '';
      //console.warn(`MUI License Key from vite at buildstart: ${VITE_MUI_LICENSE_KEY}`);
      LicenseInfo.setLicenseKey(VITE_MUI_LICENSE_KEY);
    }
  };
}

Enable it in the config:

  plugins: [
    setMUILicenseKeyPlugin(),
    ...
  ],

Now we just need to arrange to have that environment variable set with the key during build time. Our build happens on a CD server, which does not inherit our local .env file. To set the variable, we add it to a committed file, .env.production, as part of the package. Vite will pick up this value automatically since it knows it is in production mode. The MUI documentation says this is not a secret, so we have no issues committing it to our code base.

Just copy the line from the .env file to .env.production. We do not need to set this in the runtime environment variables of our cloud environment since it comes from the file.

Notes from figuring this out #

Making the call to <DataGriPro> be within remix-utils <ClientOnly> component is not enough to defer the license check to runtime, and turns out to be unnecessary.

If I remove the config that allows NODE_ENV to be set on production, it doesn’t cause the component to crash, but it will crash on development. I think this means that the license check gets baked in at build time.

I logged the current configured key in my component at runtime. Despite it being set, until I did the build time license configuration, the production version always showed the watermark.

I hope this helps someone else get their license key working with a Remix + Vite application.