Skip to content

[Bug]: Compilation fails when I migrate from vue-cli to rsbuild。 #4293

Closed as not planned
@shalouzaixiayu

Description

@shalouzaixiayu

Version

System:
    OS: Windows 11 10.0.26100
    CPU: (12) x64 11th Gen Intel(R) Core(TM) i5-11500 @ 2.70GHz
    Memory: 5.11 GB / 15.73 GB
  Browsers:
    Edge: Chromium (131.0.2903.112)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @rsbuild/core: ^1.1.13 => 1.1.13
    @rsbuild/plugin-check-syntax: ^1.2.0 => 1.2.0
    @rsbuild/plugin-node-polyfill: ^1.2.0 => 1.2.0
    @rsbuild/plugin-sass: ^1.1.2 => 1.1.2
    @rsbuild/plugin-type-check: ^1.2.0 => 1.2.0
    @rsbuild/plugin-vue: ^1.0.5 => 1.0.5

Details

First Error:
Image

Secondary Error:
Image

my config:

import path from 'path';
import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';
import { pluginCheckSyntax } from '@rsbuild/plugin-check-syntax'; // 检测ESNext编译
import { pluginSass } from '@rsbuild/plugin-sass';
import { pluginNodePolyfill } from '@rsbuild/plugin-node-polyfill';
import AutoImport from 'unplugin-auto-import/rspack';
import Components from 'unplugin-vue-components/rspack';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import { pluginTypeCheck } from '@rsbuild/plugin-type-check';

// https://rsbuild.dev/zh/config/index
export default defineConfig({
  plugins: [
    pluginVue(),
    pluginCheckSyntax(),
    pluginNodePolyfill(),
    pluginSass({
      sassLoaderOptions: {
        additionalData: `@use "@/assets/skin/nyu/index.scss" as *;`,
        implementation: require.resolve('sass'),
        api: 'legacy',
      },
    }),
    // pluginTypeCheck(),
  ],
  source: {
    entry: {
      index: './src/main.ts', // 入口文件
    },
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
    include: ['*'],
  },
  html: {
    template: './index.html', // 模板文件
  },
  server: {
    open: true,
    host: '0.0.0.0',
    port: 8085,
  },
  tools: {
    rspack: {
      plugins: [
        AutoImport({
          imports: ['vue', 'vue-router', 'pinia'],
          resolvers: [ElementPlusResolver()],
          dts: path.resolve(__dirname, 'auto-imports.d.ts'),
        }),
        Components({
          resolvers: [ElementPlusResolver()],
          directoryAsNamespace: true,
          dts: path.resolve(__dirname, 'components.d.ts'),
        }),
      ],
    },
  },
});

my package

{
  "name": "orange",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "rsbuild dev",
    "build": "rsbuild build",
    "dev:uat": "rsbuild dev --env-mode uat",
    "build:uat": "rsbuild build --env-mode uat",
    "lint": "eslint --fix \"src/**/*.{ts,vue}\" && prettier --write \"src/**/*.{ts,vue}\"",
    "preview": "rsbuild preview"
  },
  "dependencies": {
    "@highlightjs/vue-plugin": "^2.1.0",
    "@icon-park/vue-next": "^1.4.2",
    "@layui/layui-vue": "^2.11.5",
    "@vue-office/docx": "^1.6.2",
    "@vue-office/excel": "^1.7.11",
    "@vue-office/pdf": "^2.0.9",
    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "^5.1.12",
    "ace-builds": "^1.32.2",
    "axios": "^1.5.1",
    "bpmn-js-token-simulation": "^0.10.0",
    "clipboard": "^2.0.11",
    "crypto-js": "^4.2.0",
    "dayjs": "^1.11.10",
    "diagram-js": "^6.8.2",
    "echarts": "^5.5.0",
    "ejs": "^3.1.9",
    "element-plus": "^2.8.8",
    "highlight.js": "^11.9.0",
    "jsencrypt": "^3.3.2",
    "json-bigint": "^1.0.0",
    "lodash": "^4.17.21",
    "pinia": "^2.1.6",
    "pinia-plugin-persist": "^1.0.0",
    "print-js": "^1.6.0",
    "vant": "^4.7.3",
    "vue": "^3.3.8",
    "vue-demi": "^0.14.6",
    "vue-draggable-plus": "0.3.1",
    "vue-i18n": "^11.0.0-beta.1",
    "vue-json-viewer": "^3.0.4",
    "vue-router": "^4.2.5",
    "vxe-table": "^4.5.13",
    "xe-utils": "^3.5.14",
    "xml-js": "^1.6.11"
  },
  "devDependencies": {
    "@rsbuild/core": "^1.1.13",
    "@rsbuild/plugin-check-syntax": "^1.2.0",
    "@rsbuild/plugin-node-polyfill": "^1.2.0",
    "@rsbuild/plugin-sass": "^1.1.2",
    "@rsbuild/plugin-type-check": "^1.2.0",
    "@rsbuild/plugin-vue": "^1.0.5",
    "@rsdoctor/rspack-plugin": "^0.4.12",
    "@types/ejs": "^3.1.5",
    "@types/json-bigint": "^1.0.4",
    "@types/node": "^22.10.2",
    "@typescript-eslint/eslint-plugin": "^5.46.1",
    "@typescript-eslint/parser": "^5.46.1",
    "@vant/auto-import-resolver": "^1.0.2",
    "@vue/cli-plugin-router": "~5.0.0",
    "autoprefixer": "^10.4.16",
    "bpmn-js": "7.5.0",
    "bpmn-js-properties-panel": "0.37.6",
    "eslint": "^8.30.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.29.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.8.0",
    "node-polyfill-webpack-plugin": "^4.0.0",
    "postcss": "^8.4.20",
    "postcss-html": "^1.5.0",
    "postcss-preset-env": "^7.8.3",
    "postcss-scss": "^4.0.6",
    "prettier": "2.8.1",
    "sass": "^1.83.0",
    "typescript": "^4.9.3",
    "unplugin-auto-import": "^0.16.7",
    "unplugin-vue-components": "^0.25.2",
    "vue-eslint-parser": "^9.1.0"
  }
}

Reproduce link

sorry, I can not.

Reproduce Steps

  1. npm run dev.
  2. error.

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions