简记｜Vue-Cli项目迁移至RsBuild遇到的问题记录

去年年底，也迁移了一次，有需要的可以看看记 Vue Cli迁移至Rsbuid，30min到5~7min，提升打包效率

Parsing error: Cannot find module '@babel/eslint-parser'

sh 复制代码

ESLintError: [eslint]
    error Parsing error: Cannot find module '@babel/eslint-parser'

如果遇到这个问题，我猜测你之前的.eslintrc的配置是这样的，而且babel相关的依赖也已经全部卸载：

js 复制代码

"parserOptions": {
    "parser": "@babel/eslint-parser",
    "sourceType": "module",
    "ecmaVersion": 10
}

那么可以修改这个配置进行解决：

js 复制代码

// 配置解析器的选项
"parserOptions": {
  "parser": "espree",
  "sourceType": "module", // 使用 ES6 模块
  "ecmaVersion": 2022, // 设置 ECMAScript 版本为 2022
  "ecmaFeatures": {
    "jsx": true
  },
  "requireConfigFile": false
}

Module build failed: Syntax Error

sh 复制代码

x Module build failed:
   x   Expected '>', got 'class'
   Syntax Error

这应该是babel转译出了问题，可以使用rsbuild提供的@rsbuild/plugin-babel插件来解决：

sh 复制代码

npm add @rsbuild/plugin-babel -D

js 复制代码

import { pluginBabel } from '@rsbuild/plugin-babel'; 
export default { plugins: [pluginBabel()], };

注册组件报错：Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase')

打印信息仅有install和__file

说明Vue组件没有被正确编译解析。这通常是rsbuild配置或vue-loader的问题。

这可能在使用了pluginVue2插件后，又在bundlerChain中配置了规则（极大可能是是直接从原来的vue.config.js文件中直接cv来的啦）：

js 复制代码

tools: {
    bundlerChain: (chain) => {
      chain.module
        .rule('vue')
        .use('vue-loader')
        .loader('vue-loader')
        .tap((options) => {
          // 防止 options 为 undefined
          const vueOptions = options || {};

          // 初始化 compilerOptions
          vueOptions.compilerOptions = vueOptions.compilerOptions || {};

          // 添加自定义指令
          vueOptions.compilerOptions.directives = {
            html(node, directiveMeta) {
              (node.props || (node.props = [])).push({
                name: 'innerHTML',
                value: `xss(_s(${directiveMeta.value}))`
              });
            }
          };

          return vueOptions;
        });
    }
  }

pluginVue2插件和vue-loader配置冲突了，可以将这里的配置，移到pluginVue2中，这样就可以确保vue组件被正确的解析&编译

js 复制代码

pluginVue2({
      vueLoaderOptions: {
        compilerOptions: {
          directives: {
            html(node, directiveMeta) {
              (node.props || (node.props = [])).push({
                name: 'innerHTML',
                value: `xss(_s(${directiveMeta.value}))`
              });
            }
          }
        }
      }
    }),

正常解析打印的组件信息：

warning 'xxx' is defined but never used. Allowed unused vars must match /^React$/u

error Definition for rule 'react/prop-types' was not found

在jsx文件中引入了一些组件，实际已经使用，但是在控制台显示未使用

可以在.eslintrc文件中启用react规则，rules规则根据具体项目来，以下只是在我的项目中需要配的

js 复制代码

"plugins": ["react"],
  "settings": {
    "react": {
      "pragma": "React",
      "version": "detect" // 自动检测 React 版本
    }
  },
// 为不同文件类型设置不同的规则
  "overrides": [
    {
      "files": ["src/components-react/**/*.jsx"],
      "extends": ["plugin:react/recommended"],
      "rules": {
        "no-unused-vars": "off",
        "react/prop-types": "off",
        "react/no-find-dom-node": "off",
        "react/jsx-no-undef": "off"
      }
    }
  ]

Critcal dependcy: require function is used in a way in which dependencies cannot be statically extracted

如果确定该报错没有影响，可以直接忽略

js 复制代码

tools: {
    /**
     * tools.rspack修改Rspack的配置项
     */
    rspack: (config, { rspack }) => {
      config.ignoreWarnings = [
        /Critical dependency: require function is used in a way in which dependencies cannot be statically extracted/
      ];
    },
  }