Vite React项目构建报错：Rollup无法解析jss-plugin-{}求助

问题描述 #

本地运行正常，但执行yarn build时出现Rollup解析错误：

[vite]: Rollup failed to resolve import "jss-plugin-{}" from "node_modules/@material-ui/styles/esm/jssPreset/jssPreset.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "jss-plugin-{}" from "node_modules/@material-ui/styles/esm/jssPreset/jssPreset.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at onRollupWarning (file:///Users/ryanwalter/Dev-Repos/Pelham/liquified/node_modules/vite/dist/node/chunks/dep-557f29e6.js:45907:19)
    at onwarn (file:///Users/ryanwalter/Dev-Repos/Pelham/liquified/node_modules/vite/dist/node/chunks/dep-557f29e6.js:45705:13)
    at Object.onwarn (file:///Users/ryanwalter/Dev-Repos/Pelham/liquified/node_modules/rollup/dist/es/shared/rollup.js:23225:13)
    at ModuleLoader.handleResolveId (file:///Users/ryanwalter/Dev-Repos/Pelham/liquified/node_modules/rollup/dist/es/shared/rollup.js:22352:26)
    at file:///Users/ryanwalter/Dev-Repos/Pelham/liquified/node_modules/rollup/dist/es/shared/rollup.js:22313:26
error Command failed with exit code 1.

已尝试的解决方案 #

修改vite.config.js添加别名：

// vite config
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  define: {
    "global": {},
  },
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
      'jss-plugin-{}': 'jss-plugin-global'
    },
  },
  plugins: [
    react()
  ]
})

虽然构建成功，但生产环境出现错误：uncaught TypeError: {} is not a function

环境信息 #

package.json #

{
  "name": "liquified",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@aws-amplify/ui-react": "^3.5.1",
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@material-ui/core": "^4.12.4",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.10.1",
    "aws-amplify": "^4.3.35",
    "ethers": "^5.7.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.1.0",
    "autoprefixer": "^10.4.8",
    "postcss": "^8.4.16",
    "tailwindcss": "^3.1.8",
    "vite": "^3.0.7"
  }
}

index.html #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Liquified App</title>
    <script type="module" crossorigin src="/assets/index.671813cb.js"></script>
    <link rel="stylesheet" href="/assets/index.ac81934a.css">
  </head>
  <body>
    <div id="root"></div>
    
  </body>
</html>

解决方案 #

方案1：统一Material UI版本 #

项目同时混用@material-ui/core v4和@mui/material v5，两个版本的JSS依赖存在冲突：

• 推荐全部升级到MUI v5：移除@material-ui/core和@material-ui/styles，使用@mui/styles替代，确保所有Material UI相关包版本统一；
• 若需保留v4：将@material-ui/styles降级到v4.12.4，与@material-ui/core版本匹配。

方案2：自定义Rollup插件修复错误导入 #

不想改动依赖版本的话，修改vite.config.js添加自定义Rollup插件，拦截错误导入：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  define: {
    "global": {},
  },
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
    },
  },
  plugins: [react()],
  build: {
    rollupOptions: {
      plugins: [
        {
          name: 'fix-jss-import',
          resolveId(id) {
            if (id === 'jss-plugin-{}') {
              return '\0jss-plugin-empty'
            }
          },
          load(id) {
            if (id === '\0jss-plugin-empty') {
              return 'export default {}'
            }
          }
        }
      ]
    }
  }
})

该插件会拦截错误的导入请求，返回一个空模块，既解决构建报错，也不会触发生产环境的函数调用错误。

方案3：清理依赖缓存 #

执行以下命令清理缓存并重新安装依赖，排查缓存损坏导致的解析问题：

yarn cache clean
rm -rf node_modules
rm yarn.lock
yarn install

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