Vue3+Vite+Laravel项目构建报错：无法赋值只读属性'name'

错误信息 #

Cannot assign to read only property 'name' of function '(userOptions) => {
    const meta = {
      framework: "vite"
    };
    const rawPlugins = toArray(factory(use...<omitted>... }'
error during build:
TypeError: Cannot assign to read only property 'name' of function '(userOptions) => {
    const meta = {
      framework: "vite"
    };
    const rawPlugins = toArray(factory(use...<omitted>... }'
    at normalizePlugins (file:///C:/laragon/www/proj/node_modules/rollup/dist/es/shared/node-entry.js:25984:25)
    at getInputOptions (file:///C:/laragon/www/proj/node_modules/rollup/dist/es/shared/node-entry.js:25971:5)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async rollupInternal (file:///C:/laragon/www/proj/node_modules/rollup/dist/es/shared/node-entry.js:25911:72)
    at async build (file:///C:/laragon/www/proj/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:46471:18)
    at async CAC.<anonymous> (file:///C:/laragon/www/proj/node_modules/vite/dist/node/cli.js:812:9)

当前依赖版本 #

npm list输出：

PS C:\laragon\www\proj> npm list
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
proj@ C:\laragon\www\proj
├── laravel-vite-plugin@0.7.3
├── lodash@4.17.21
├── postcss@8.4.24
├── prettier@2.8.8
├── sortablejs@1.15.0
├── sweetalert2@11.7.12
├── unplugin-vue-components@0.25.1
├── vite@4.3.9
├── vue@3.2.45
└── vuetify@3.0.6

package.json配置：

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@inertiajs/vue3": "^1.0.0",
        "@mdi/font": "^7.1.96",
        "@vitejs/plugin-vue": "^4.0.0",
        "autoprefixer": "^10.4.12",
        "axios": "^1.1.2",
        "eslint": "^8.42.0",
        "eslint-config-prettier": "^8.8.0",
        "eslint-plugin-vue": "^9.14.1",
        "laravel-vite-plugin": "^0.7.2",
        "lodash": "^4.17.19",
        "postcss": "^8.4.18",
        "prettier": "2.8.8",
        "unplugin-vue-components": "^0.25.1",
        "vite": "^4.0.0",
        "vue": "^3.2.41"
    },
    "dependencies": {
        "@tiptap/starter-kit": "^2.0.0-beta.212",
        "@tiptap/vue-3": "^2.0.0-beta.212",
        "dayjs": "^1.11.7",
        "sortablejs": "^1.15.0",
        "sweetalert2": "^11.7.12",
        "vuetify": "^3.0.6"
    }
}

解决方案 #

这个错误本质是Rollup在标准化插件时，尝试修改某个插件函数的name属性，但该属性被设为只读，通常由依赖版本不兼容或插件配置异常导致，按以下步骤排查修复：

1. 清理依赖并重新安装
   先删除旧依赖缓存，避免版本不一致问题：

   rmdir /s node_modules
   del package-lock.json
   npm install
   

2. 锁定兼容的依赖版本
   当前vite实际安装了4.3.9，但package.json里是^4.0.0，宽版本范围导致自动升级后和其他插件不兼容。修改package.json里的依赖版本为固定兼容组合：

   "devDependencies": {
       // ... 其他依赖保持不变
       "@vitejs/plugin-vue": "4.3.4",
       "laravel-vite-plugin": "0.7.3",
       "vite": "4.3.8"
   }
   

   修改后重新执行npm install。

3. 检查Vite插件配置
   打开vite.config.js，确认有没有自定义插件或第三方插件被意外冻结（比如用Object.freeze包裹插件函数），如果有，移除冻结操作。

4. 验证Vuetify插件配置
   如果使用Vuetify的Vite插件，确保配置正确，避免和其他插件冲突：

   // vite.config.js示例
   import vuetify from 'vite-plugin-vuetify'
   
   export default defineConfig({
     plugins: [
       // ... 其他插件
       vuetify({ autoImport: true }),
     ],
   })
   

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