CommonJS rollup plugin syntax error when importing 3rd party libraries, mostly related to 'process' - reactjs

Question

I've been working on a custom rollup config which takes a React project, and inlines the js and css in index.html.
When I've imported some third party react libraries (like material-ui-color) I run into a problem with CommonJS where it says there's a syntax error. Of the libraries I've tried to install so far, the word 'process' is most commonly the word it breaks on. Here is the log from the material-ui-color issue:
[!] (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) {
^
I've included the rollup-plugin-replace to fix any occurrences of process.env.NODE_ENV but this seems to be a different issue.
Here is my rollup config:
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,
});
}
},
};
}
Any ideas how I can overcome this and import 3rd party libraries into the project easily?

Answer 1

I recommend rewriting the config in the following way:
replace({
"process.env.isProd": production,
}),