Vue3 project with typescript update errors #8671

stepjacky · 2024-12-11T09:22:08Z

I have a vue3 typescipt project ,when i update its dependencies to rsbuild 1.1.9 some issues occured ,and the compiler throw flowwing ：

error   Compile error: 
Failed to compile, check the errors for troubleshooting.
File: K:\node-workset\tn-mobile\src\mobile\CheckUser.vue?vue&type=script&setup=true&lang=js:1:1
  × Module build failed:
  ╰─▶   × Error: Failed to convert JavaScript value `Object {"line":36,"column":0,"index":1406}` into rust type `String` on JsRspackError.loc on JsRspackDiagnostic.error
        │     at _Compilation.__internal__pushRspackDiagnostic (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:3169:32)
        │     at Object.emitError (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6418:31)    
        │     at resolveScript (K:\node-workset\tn-mobile\node_modules\vue-loader\dist\resolveScript.js:62:23)   
        │     at selectBlock (K:\node-workset\tn-mobile\node_modules\vue-loader\dist\select.js:19:58)
        │     at Object.loader (K:\node-workset\tn-mobile\node_modules\vue-loader\dist\index.js:93:41)
        │     at LOADER_EXECUTION (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6131:18)    
        │     at runSyncOrAsync2 (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6132:6)      
        │     at node:internal/util:432:7
        │     at new Promise (<anonymous>)
        │     at runSyncOrAsync2 (node:internal/util:418:12)

 @ ./src/mobile/CheckUser.vue.js?vue&type=script&setup=true&lang=js!=!../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/mobile/CheckUser.vue?vue&type=script&setup=true&lang=js
 @ ./src/mobile/CheckUser.vue
 @ ./src/router/index.ts
 @ ./src/index.ts

File: K:\node-workset\tn-mobile\src\mobile\CheckUser.vue?vue&type=template&id=652db87f:1:1
  × Module build failed:
  ╰─▶   × Error: Failed to convert JavaScript value `Object {"line":36,"column":0,"index":1406}` into rust type `String` on JsRspackError.loc on JsRspackDiagnostic.error
        │     at _Compilation.__internal__pushRspackDiagnostic (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:3169:32)
        │     at Object.emitError (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6418:31)    
        │     at resolveScript (K:\node-workset\tn-mobile\node_modules\vue-loader\dist\resolveScript.js:62:23)       
        │     at resolveScript (K:\node-workset\tn-mobile\node_modules\vue-loader\dist\resolveScript.js:62:23)      
        │     at Object.TemplateLoader (K:\node-workset\tn-mobile\node_modules\vue-loader\dist\templateLoader.js:45:54)
54)
        │     at LOADER_EXECUTION (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6131:18        │     at LOADER_EXECUTION (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6131:18)       │     at runSyncOrAsync2 (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6132:6)
        │     at LOADER_EXECUTION (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6131:18)       │     at new Promise (<anonymous>)
        │     at LOADER_EXECUTION (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6131:18)       │     at new Promise (<anonymous>)
        │     at LOADER_EXECUTION (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6131:18)       │     at new Promise (<anonymous>)
        │     at LOADER_EXECUTION (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6131:18)       │     at new Promise (<anonymous>)
        │     at runSyncOrAsync2 (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6132:6)         │     at LOADER_EXECUTION (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6131:18)       │     at node:internal/util:432:7
        │     at runSyncOrAsync2 (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6132:6)         │     at LOADER_EXECUTION (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6131:18)       │     at node:internal/util:432:7
        │     at runSyncOrAsync2 (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6132:6) )
        │     at runSyncOrAsync2 (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6132:6))
)
        │     at runSyncOrAsync2 (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6132:6)  
        │     at node:internal/util:432:7
        │     at new Promise (<anonymous>)
        │     at runSyncOrAsync2 (node:internal/util:418:12)
        │     at runLoaders (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6612:56)      

 @ ./src/mobile/CheckUser.vue.js?vue&type=template&id=652db87f!=!../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/mobile/CheckUser.vue?vue&type=template&id=652db87f
 @ ./src/mobile/CheckUser.vue
 @ ./src/router/index.ts
 @ ./src/index.ts

start   Building...
error   Compile error: 
Failed to compile, check the errors for troubleshooting.
File: K:\node-workset\tn-mobile\src\mobile\CheckUser.vue?vue&type=script&setup=true&lang=js:1:1
  × Module build failed:
  ╰─▶   × Error: Failed to convert JavaScript value `Object {"line":36,"column":0,"index":1406}` into rust type `String` on JsRspackError.loc on JsRspackDiagnostic.error
        │     at _Compilation.__internal__pushRspackDiagnostic (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:3169:32)
        │     at Object.emitError (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6418:31)
        │     at resolveScript (K:\node-workset\tn-mobile\node_modules\vue-loader\dist\resolveScript.js:62:23)
        │     at selectBlock (K:\node-workset\tn-mobile\node_modules\vue-loader\dist\select.js:19:58)        
        │     at Object.loader (K:\node-workset\tn-mobile\node_modules\vue-loader\dist\index.js:93:41)       
        │     at LOADER_EXECUTION (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6131:18)
        │     at runSyncOrAsync2 (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6132:6)  
        │     at node:internal/util:432:7
        │     at new Promise (<anonymous>)
        │     at runSyncOrAsync2 (node:internal/util:418:12)

 @ ./src/mobile/CheckUser.vue.js?vue&type=script&setup=true&lang=js!=!../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/mobile/CheckUser.vue?vue&type=script&setup=true&lang=js
 @ ./src/mobile/CheckUser.vue
 @ ./src/router/index.ts
 @ ./src/index.ts

File: K:\node-workset\tn-mobile\src\mobile\CheckUser.vue?vue&type=template&id=652db87f:1:1
  × Module build failed:
  ╰─▶   × Error: Failed to convert JavaScript value `Object {"line":36,"column":0,"index":1406}` into rust type `String` on JsRspackError.loc on JsRspackDiagnostic.error
        │     at _Compilation.__internal__pushRspackDiagnostic (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:3169:32)
        │     at Object.emitError (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6418:31)
        │     at resolveScript (K:\node-workset\tn-mobile\node_modules\vue-loader\dist\resolveScript.js:62:23)
        │     at Object.TemplateLoader (K:\node-workset\tn-mobile\node_modules\vue-loader\dist\templateLoader.js:45:54)
        │     at LOADER_EXECUTION (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6131:18)
        │     at runSyncOrAsync2 (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6132:6)  
        │     at node:internal/util:432:7
        │     at new Promise (<anonymous>)
        │     at runSyncOrAsync2 (node:internal/util:418:12)
        │     at runLoaders (K:\node-workset\tn-mobile\node_modules\@rspack\core\dist\index.js:6612:56)      

 @ ./src/mobile/CheckUser.vue.js?vue&type=template&id=652db87f!=!../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/mobile/CheckUser.vue?vue&type=template&id=652db87f
 @ ./src/mobile/CheckUser.vue
 @ ./src/router/index.ts
 @ ./src/index.ts

my package.json

{
  "name": "tn-mobile",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "build": "rsbuild build --env-mode prod",
    "dev": "rsbuild dev --open --env-mode dev",
    "format": "prettier --write .",
    "preview": "rsbuild preview",
    "dev:rsdoctor": "RSDOCTOR=true rsbuild dev --env-mode dev",
    "build:rsdoctor": "RSDOCTOR=true rsbuild build --env-mode prod"
  },
  "dependencies": {
    "@opentiny/vue": "^3.20.0",
    "@opentiny/vue-locale": "^3.20.0",
    "@primevue/themes": "^4.2.4",
    "bootstrap": "^5.3.3",
    "dayjs": "^1.11.13",
    "font-awesome": "4.7.0",
    "primevue": "^4.2.4",
    "vue": "^3.5.13",
    "vue-i18n": "^10.0.5",
    "vue-router": "^4.5.0"
  },
  "devDependencies": {
    "@arco-design/web-vue": "^2.56.3",
    "@rsbuild/core": "^1.1.9",
    "@rsbuild/plugin-babel": "^1.0.3",
    "@rsbuild/plugin-less": "^1.1.0",
    "@rsbuild/plugin-node-polyfill": "^1.2.0",
    "@rsbuild/plugin-sass": "^1.1.2",
    "@rsbuild/plugin-vue": "^1.0.5",
    "@rsbuild/plugin-vue-jsx": "^1.0.1",
    "@rsdoctor/rspack-plugin": "^0.4.11",
    "@unocss/postcss": "^0.65.1",
    "prettier": "^3.4.2",
    "sass": "^1.82.0",
    "typescript": "^5.7.2",
    "unocss": "^0.65.1"
  }
}

rsuild.config.ts

import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';
import { pluginBabel } from '@rsbuild/plugin-babel';
import { pluginLess } from '@rsbuild/plugin-less';
import { pluginVueJsx } from '@rsbuild/plugin-vue-jsx';
import { pluginSass } from '@rsbuild/plugin-sass';
import { pluginNodePolyfill } from '@rsbuild/plugin-node-polyfill';
export default defineConfig({
  source: {
    entry: {
      index: './src/index.ts',
    },
    alias: {
      '@mobile': './src/mobile',
    },
    define: {
      //'process.env': { ...process.env }
    },

  },
  output: {
    polyfill: 'entry',
  },
  html: {
    title: '投票系统',
  },
  dev: {
    hmr: true,
    liveReload: true,
  },
  server: {
    open: {
      target: "/#/",
    },
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:88',
        pathRewrite: { '^/api': '' },
      },
    },
  },
  plugins: [
    pluginBabel({
      include: /\.(?:jsx)$/,
    }),
    pluginVue(),
    pluginVueJsx(),
    // pluginVueInspector(),
    pluginLess(),
    pluginSass({
      sassLoaderOptions: {
        sassOptions: {
          silenceDeprecations: ['import'],
        },
      },
    }),
    pluginNodePolyfill(),
  ],
});

nodejs v20.18.0 npm lasted version , windows 11 lasted version and run in cmd

The text was updated successfully, but these errors were encountered:

stepjacky · 2024-12-11T09:27:57Z

and i removed all dependencies in node_modules folder,reinstall by run npm i ,these errors come again

github-actions · 2024-12-11T09:42:09Z

Hello @stepjacky, sorry we can't investigate the problem further without reproduction demo, please provide a repro demo by forking rspack-repro, or provide a minimal GitHub repository by yourself. Issues labeled by need reproduction will be closed if no activities in 14 days.

stepjacky · 2024-12-12T02:09:42Z

reproduction git respo

https://github.com/stepjacky/rs-demo.git

stepjacky · 2024-12-21T13:11:22Z

这个bug还没修复吗

CPunisher · 2024-12-22T07:15:53Z

@h-a-n-a We should serialize error.loc to string before passing it to rust side.

LingyuCoder added the need reproduction label Dec 11, 2024

chenjiahan added bug Something isn't working and removed need reproduction labels Dec 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue3 project with typescript update errors #8671

Vue3 project with typescript update errors #8671

stepjacky commented Dec 11, 2024

stepjacky commented Dec 11, 2024

github-actions bot commented Dec 11, 2024

stepjacky commented Dec 12, 2024

stepjacky commented Dec 21, 2024

CPunisher commented Dec 22, 2024

Vue3 project with typescript update errors #8671

Vue3 project with typescript update errors #8671

Comments

stepjacky commented Dec 11, 2024

stepjacky commented Dec 11, 2024

github-actions bot commented Dec 11, 2024

stepjacky commented Dec 12, 2024

stepjacky commented Dec 21, 2024

CPunisher commented Dec 22, 2024