reactjs - CommonJS rollup-plugin syntaxfel vid import av tredjepartsbibliotek, mest relaterat till 'process'

Jag har arbetat på en anpassad rollup-konfiguration som tar ett React-projekt och bäddar in js och css i index.html.
När jag har importerat några tredjeparts React-bibliotek (som material-ui-color) stöter jag på ett problem med CommonJS där det står att det finns ett syntaxfel. Av de bibliotek jag har försökt installera hittills är ordet 'process' det ord som det oftast bryts på. Här är loggen från material-ui-color-problemet:

[!] (plugin commonjs) SyntaxError: Unexpected token (205:28) in /Users/meyerm/Documents/GitHub/button-generator-figma-plugin/node_modules/jss/dist/jss.esm.js
node_modules/jss/dist/jss.esm.js (205:28)
203:     var newValue = value;
204:
205:     if (!options || options.process !== false) {
                                 ^

Jag har inkluderat rollup-plugin-replace för att fixa alla förekomster av process.env.NODE_ENV men detta verkar vara ett annat problem.

Här är min rollup-konfiguration:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import livereload from 'rollup-plugin-livereload';
import replace from '@rollup/plugin-replace';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';
import html from 'rollup-plugin-bundle-html-plus';
import typescript from 'rollup-plugin-typescript';
import svgr from '@svgr/rollup';

const production = !process.env.ROLLUP_WATCH;

export default [
  /* 
  Transpiling React code and injecting into index.html for Figma  
  */
  {
    input: 'src/app/index.tsx',
    output: {
      name: 'ui',
      file: 'dist/bundle.js',
      format: 'umd',
    },
    plugins: [
      // What extensions is rollup looking for
      resolve({
        extensions: ['.jsx', '.js', '.json', '.ts', '.tsx'],
      }),

      // Manage process.env
      replace({
        preventAssignment: true,
        process: JSON.stringify({
          env: {
            isProd: production,
          },
        }),
        'process.env.NODE_ENV': JSON.stringify(production),
      }),

      typescript({ sourceMap: !production }),

      // Babel config to support React
      babel({
        presets: ['@babel/preset-react', '@babel/preset-env'],
        babelHelpers: 'runtime',
        plugins: ['@babel/plugin-transform-runtime'],
        extensions: ['.js', '.ts', 'tsx', 'jsx'],
        compact: true,
        exclude: 'node_modules/**',
      }),

      commonjs({
        include: 'node_modules/**',
      }),

      svgr(),

      // Config to allow sass and css modules
      postcss({
        extensions: ['.css, .scss, .sass'],
        modules: true,
        use: ['sass'],
      }),

      // Injecting UI code into ui.html
      html({
        template: 'src/app/index.html',
        dest: 'dist',
        filename: 'index.html',
        inline: true,
        inject: 'body',
        ignore: /code.js/,
      }),

      // If dev mode, serve and livereload
      !production && serve(),
      !production && livereload('dist'),

      // If prod mode, minify
      production && terser(),
    ],
    watch: {
      clearScreen: true,
    },
  },

  /* 
  Main Figma plugin code
  */
  {
    input: 'src/plugin/controller.ts',
    output: {
      file: 'dist/code.js',
      format: 'iife',
      name: 'code',
    },
    plugins: [resolve(), typescript(), commonjs({ transformMixedEsModules: true }), production && terser()],
  },
];

function serve() {
  let started = false;

  return {
    writeBundle() {
      if (!started) {
        started = true;

        // Start localhost dev server on port 5000 to work on the UI in the browser
        require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
          stdio: ['ignore', 'inherit', 'inherit'],
          shell: true,
        });
      }
    },
  };
}

Några idéer om hur jag kan övervinna detta och importera tredjepartsbibliotek till projektet enkelt?

Svar #1

Jag rekommenderar att skriva om konfigurationen på följande sätt:

replace({
  "process.env.isProd": production,
}),