Sanity v2: Module parse error with sanity-plugin-icon-picker 2.1.0

This is a transpilation issue where react-virtualized-auto-sizer (a dependency of sanity-plugin-icon-picker) uses modern JavaScript syntax like spread operators (...rest) that Sanity Studio v2's webpack isn't configured to handle from node_modules by default.

The core problem: Sanity Studio v2 reached end-of-life on December 7, 2023 and no longer receives updates or support. The Parts System and webpack-based build tooling used in v2 don't automatically transpile modern JavaScript syntax from dependencies in node_modules, which is why you're seeing this error with newer plugin versions.

Your best paths forward:

1. Migrate to Sanity Studio v3 or v4 (Strongly Recommended)

This is the officially supported solution. Studio v3+ uses Vite instead of webpack and handles modern ESM packages without these transpilation issues. The migration process is documented and most projects can migrate in a few hours. This will also future-proof your project against similar dependency issues as the JavaScript ecosystem continues evolving.

2. Try a different or older version of the plugin

If you can't migrate immediately:

• Try downgrading to an earlier version of sanity-plugin-icon-picker (before 2.1.0) that might use older dependencies without spread syntax issues
• Look for an alternative icon picker plugin that's explicitly compatible with Studio v2
• Consider building a simpler custom icon picker using v2-compatible dependencies

3. Custom webpack configuration

Studio v2 did support webpack customization through the Parts System. You can add a webpack config by creating a file and referencing it in your sanity.json:

{
  "parts": [
    {
      "implements": "part:@sanity/base/webpack-config",
      "path": "./webpack.config.js"
    }
  ]
}

Then create webpack.config.js in your studio root to configure babel-loader to transpile this specific dependency:

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: /node_modules\/react-virtualized-auto-sizer/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  }
}

You may need to install babel dependencies: npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react

However, since v2 is unsupported, you're likely to encounter more of these compatibility issues as third-party packages and their dependencies continue using modern JavaScript features. Migration to v3/v4 will save you significant troubleshooting time in the long run.